Fetch data from Codeigniter

[zeffry]

Hello, I have problem to fetch data from Codeigniter to Chart.
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”}]

I’m already trying , but the result just blank white , not render the chart.
How can i implement this result json_encode() to chart?
Thank’s
`
<script>
window.onload = function() {
var tampil_kategori = ‘<?= $tampil_kategori ?>’;
var newdataPoints = JSON.parse(tampil_kategori);
var jumlahBerita = new CanvasJS.Chart(“chartContainer2”, {
animationEnabled: true,
theme: “light2”, // “light1”, “light2”, “dark1”, “dark2”
title: {
text: “Jumlah Berita(per Kategori)”
},

data: [{
type: “column”,
dataPoints: newdataPoints
}]
});
jumlahBerita.render();

}
</script>
`

[Shashi Ranjan]

@zeffry,

The datapoint being passed to chart is not in the format accepted by CanvasJS. Passing it in the format accepted by CanvasJS should work fine in this case.

—
Shashi Ranjan
Team CanvasJS

[zeffry]

@ShashiRanjan , If like that, How can i convert my 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 :

[
{y:2,label:"Music"},
{y:1,label:"Sport"},
{y:1,label:"Agama"},
{y:0,label:"Teknologi"},
{y:2,label:"Pendidikan"},
]

Thanks

• This reply was modified 5 years, 1 month ago by zeffry.

[Shashi Ranjan]

@zeffry,

You can try parsing the data from newdataPoints array into a new array in CanvasJS acceptable format. As shown in the below code snippet.

var dps = [];
for(var i = 0; i < newdataPoints.length; i++) {
dps.push({ label: newdataPoints[i].nama_kategori, y: newdataPoints[i].jumlah_berita });
} 

Further, using the dps array to define the chart option dataPoints like dataPoints: dps should work fine in your case.

—
Shashi Ranjan
Team CanvasJS