Codeigniter : Fetch Data into Canvas js

Question

i have some problem to fetch data into my chart using Canvas js. So, i have result json_encode() like this :

[{"jumlah_berita":2,"nama_kategori":"Music"},{"jumlah_berita":1,"nama_kategori":"Sport"},{"jumlah_berita":1,"nama_kategori":"Agama"},{"jumlah_berita":0,"nama_kategori":"Teknologi"},{"jumlah_berita":1,"nama_kategori":"Pendidikan"},{"jumlah_berita":0,"nama_kategori":"Cinta"},{"jumlah_berita":0,"nama_kategori":"coba test"}]

And my chart like This

I want implement my chart Like this, how can i make this ?

It's my Code to create CHART

<script>
    window.onload = function() {
        var jumlahBerita = new CanvasJS.Chart("chartContainer2", {
            animationEnabled: true,
            theme: "light2", // "light1", "light2", "dark1", "dark2"
            title: {
                text: "Jumlah Berita(per Kategori)"
            },

            data: [{
                type: "column",
                dataPoints: [{
                        y: 3,
                        label: "< 30 Tahun"
                    },
                    {
                        y: 25,
                        label: "30-40 Tahun"
                    },
                    {
                        y: 5,
                        label: "> 40 Tahun"
                    }
                ]
            }]
        });
        jumlahBerita.render();

    }
</script>

The problem is when i'm place data json_encode() in dataPoints like this:

dataPoints:<?= $tampil_kategori ?>

My chart just render blank white

Can you help me with this ?

Thank's

If you need my Controller and Model to fetch json_encode()

Controller

$data['tampil_kategori'] = json_encode($this->home->getAllKategori(), JSON_NUMERIC_CHECK);

Model

public function getAllKategori()
    {
        $this->db->select('jumlah_berita,nama_kategori');
        return $this->db->get('tb_kategori')->result();
    }

Oh i forgot , can i'm modified the result json_encode() from :

[{"jumlah_berita":2,"nama_kategori":"Music"},{"jumlah_berita":1,"nama_kategori":"Sport"},{"jumlah_berita":1,"nama_kategori":"Agama"},{"jumlah_berita":0,"nama_kategori":"Teknologi"},{"jumlah_berita":1,"nama_kategori":"Pendidikan"},{"jumlah_berita":0,"nama_kategori":"Cinta"},{"jumlah_berita":0,"nama_kategori":"coba test"}]

To this ?

[
{1,"Pendidikan,}
{2,"Sport"},
{3,"Agama"},
]

Please, format your code and structure your question to complete it. It is too hard to read right now. You can find info and tips about it at stackoverflow.com/help/how-to-ask — Ignacio Lago
– Ignacio Lago, Commented Sep 16, 2019 at 13:11

Dilip Hirapara · Accepted Answer · 2019-09-16 12:46:46Z

1

Try like this.

use JSON.parse if you're passing encoded data.

var tampil_kategori = '<?php  echo $tampil_kategori; ?>';
var newdataPoints = JSON.parse(tampil_kategori);

dataPoints : newdataPoints

answered Sep 16, 2019 at 12:46

Dilip Hirapara

15.4k3 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zeffry Reynando Over a year ago

Not work for me, my chart not render just blank white.

Zeffry Reynando Over a year ago

I dont know this chart plugin Canvas JS the y and label i think it's absolute / cant be modified

Collectives™ on Stack Overflow

Codeigniter : Fetch Data into Canvas js

It's my Code to create CHART

Controller

Model

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

It's my Code to create CHART

Controller

Model

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related