Using Morris Bar can't show

Question

I am using Morris bar chart, I want to show bar:

This my Controller :

public function detail_grafik() 
    {   
            $row = $this->Tb_grafik_model->get_data()->result();
            $iklan  = $this->Tb_iklan_model->get_all();
            $berita = $this->Tb_berita_model->get_all(); 

             ($row) {
                $data = array(
                'row'     => json_encode($row),
                'iklan'   => $iklan,    
                'berita'  => $berita, 
                'content' =>"frontend/detail_grafik"
                );
            $this->load->view('layout/frontend', $data);

            } else {
                $this->session->set_flashdata('message', 'Record Not Found');
                redirect(site_url('frontend'));
            }
        }

This my view:

<link rel="stylesheet" type="text/css" href="<?=base_url()?>assets/vendor/morris/morris.css">


<div style="width: 500px;height: 500px">
<canvas id="grafik"></canvas>
</div>
<script type="text/javascript" src="<?=base_url()?>assets/vendor/jQuery/jQuery.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>assets/vendor/raphael/raphael-min.js"></script>
<script type="text/javascript" src="<?=base_url()?>assets/vendor/morris/morris.min.js"></script>

<script>
    Morris.Bar({
      element: 'grafik',
      data: <?php echo $data;?>,
      xkey: 'kd_spbu',
      ykeys: ['kd_spbu', 'desa', 'nama_persahaan', 'alamat', 'pemilik', 'jumlah_nozzle'],
      labels: ['kd_spbu', 'desa', 'nama_persahaan', 'alamat', 'pemilik', 'jumlah_nozzle']
    });

</script>

  </section>
  </body>
  </html>

This my eror : raphael-min.js:10 Error: attribute width: Expected length, "Infinity"

can't show bar. help me..

Answer 1

Your xkey (kd_spbu) is also in ykeys. You need to remove it from from the ykeys.

Also none of the xkeys / ykeys are defined in your PHP code.