CODEWITHSUNDEEP
javascriptjsonajaxcodeigniterchart.js
irufano
irufano

Reputation: 128

How to make dynamic chart js using JSON in Codeigniter?

I want to make chart js with dynamic data using JSON, i'm still confuse to using JSON in chart, Below there are chart js code and my file json. Labels in chart using 'tahun' in json and Data using 'e_nilai' in json.

Here is my Static Line Chart JS :

ChartJs.prototype.init = function() {
    //creating lineChartexport
    var lineChart = {
        labels: ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
        datasets: [
            {
                label: "Nilai Ekspor ($)",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "#5d9cec",
                borderColor: "#5d9cec",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "#5d9cec",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 5,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "#5d9cec",
                pointHoverBorderColor: "#eef0f2",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [59, 50, 41, 56, 55, 40, 35, 30, 40, 45, 50, 53, 45, 60, 65, 70, 80, 90]
            }]
    };

    var lineOpts = {
        scales: {
            yAxes: [{
                ticks: {
                    max: 100,
                    min: 20,
                    stepSize: 10
                }
            }
          ]
        }
    };

    this.respChart($("#lineChartExport"),'Line',lineChart, lineOpts);

Here is my file data.JSON :

[{
    "id_ekspor": "EAA01",
    "e_berat": "123791375",
    "e_nilai": "321652431",
    "tahun": "2000",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA02",
    "e_berat": "135719274",
    "e_nilai": "253398253",
    "tahun": "2001",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA03",
    "e_berat": "187393877",
    "e_nilai": "336003121",
    "tahun": "2002",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA04",
    "e_berat": "128295793",
    "e_nilai": "368611670",
    "tahun": "2003",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA05",
    "e_berat": "171821748",
    "e_nilai": "364339174",
    "tahun": "2004",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA06",
    "e_berat": "281319414",
    "e_nilai": "620528336",
    "tahun": "2005",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA07",
    "e_berat": "339357790",
    "e_nilai": "1117675174",
    "tahun": "2006",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA08",
    "e_berat": "828240527",
    "e_nilai": "1285587692",
    "tahun": "2007",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA09",
    "e_berat": "541271140",
    "e_nilai": "1506863073",
    "tahun": "2008",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA10",
    "e_berat": "435374795",
    "e_nilai": "1785347418",
    "tahun": "2009",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA11",
    "e_berat": "392740658",
    "e_nilai": "1942154132",
    "tahun": "2010",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA12",
    "e_berat": "310010079",
    "e_nilai": "2171049091",
    "tahun": "2011",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA13",
    "e_berat": "253303518",
    "e_nilai": "1924902851",
    "tahun": "2012",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA14",
    "e_berat": "241833783",
    "e_nilai": "1850122870",
    "tahun": "2013",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA15",
    "e_berat": "213647160",
    "e_nilai": "1538193197",
    "tahun": "2014",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA16",
    "e_berat": "262358687",
    "e_nilai": "1507887694",
    "tahun": "2015",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA17",
    "e_berat": "387940300",
    "e_nilai": "2124722151",
    "tahun": "2016",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA18",
    "e_berat": "241644238",
    "e_nilai": "1624678879",
    "tahun": "2017",
    "id_industri": "ID01"
}]

I want to take data 'e_nilai' as data, 'tahun' as labels..

How to use JSON for data dynamic in chart JS?

Please help,

Thanks

Upvotes: 1

Views: 1697

Answers (1)

Radonirina Maminiaina
Radonirina Maminiaina

Reputation: 7004

You should build your label from your json data. Check this:

var json = [
 // your data json listed here
]

var label = []
var data = []
json.forEach(function (element) {
    label.push(element.tahun)
  data.push(element.e_nilai)
})

console.log(label, data)

Then you can use your data and label into the Chart.js.

Here the fiddle

Update:

if you use ajax, call this into the on success.

$.ajax({
  method: 'GET',
  url: 'your_url',
  dataType: 'json',
  success: function (response) {
    var label = []
    var data = []
    response.forEach(function (element) {
      label.push(element.tahun)
      data.push(element.e_nilai)
    })
    // your chart goes here
  }
})

Upvotes: 1

Related Questions