Cannot read property 'x' of undefined using morris.js

Question

I'm facing a new problem. Below is my JSON encoded data:

{"1":{"day":"1","ccase":3,"ongoing":2,"done":1},
 "2":{"day":"2","ccase":110,"ongoing":8,"done":0},
 "3":{"day":"3","ccase":"4","ongoing":"0","done":"0"}}

How do I set multi-line chart using Morris.js?

Answer 1

Example Controller

    <?php
class Chart extends CI_Controller{
    function __construct(){
      parent::__construct();   
    }

    function index(){
      $data = $this->chart_model->get_data();
      $x['data'] = json_encode($data);
      $this->load->view('chart_view',$x);
    }
}

Example View

<div id="graph"></div>

<script src="<?php echo base_url().'assets/js/jquery.min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/raphael-min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/morris.min.js'?>"></script>
<script>
    Morris.Bar({
      element: 'graph',
      data: <?php echo $data;?>,
      xkey: 'year',
      ykeys: ['purchase', 'sale', 'profit'],
      labels: ['Purchase', 'Sale', 'Profit']
    });
</script>