Drawing line chart in chart.js with json response

Question

<script type="text/javascript">
            $(function() {
                $.ajax({
                    type: "POST",
                    url: "BillnAmount",
                    cache: false,
                    dataType: 'json',
                    success: function(data) {
                        console.log(data);

                        var data = {
                            labels: ["January", "February", "March", "April", "May", "June", "July"],
                            datasets: [
                                {
                                    label: "My First dataset",
                                    fillColor: "rgba(220,220,220,0.2)",
                                    strokeColor: "rgba(220,220,220,1)",
                                    pointColor: "rgba(220,220,220,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(220,220,220,1)",
                                    data: [65, 59, 80, 81, 56, 55, 40]
                                },
                                {
                                    label: "My Second dataset",
                                    fillColor: "rgba(151,187,205,0.2)",
                                    strokeColor: "rgba(151,187,205,1)",
                                    pointColor: "rgba(151,187,205,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(151,187,205,1)",
                                    data: [28, 48, 40, 19, 86, 27, 90]
                                }
                            ]
                        };
                        var ctx = $("#myChart").get(0).getContext("2d");
                        var myNewChart = new Chart(ctx);
                        var myLineChart = new Chart(ctx).Line(data);
                    }
                });
            });
        </script>

I am calling a url with ajax and getting its response in json format.

Inside ajax call I am drawing Line chart with Chart.js which is working properly.

Now I want to change above chart value with json response data my json response value is

  {"billDetails":
 [{"invoiceDate":"2014-07-24T00:00:00","totalAmount":1031.00,"totalBills":1},  
 {"invoiceDate":"2014-07-15T00:00:00","totalAmount":7281.00,"totalBills":3},
 {"invoiceDate":"2014-07-12T00:00:00","totalAmount":14841.00,"totalBills":7},
 {"invoiceDate":"2014-07-11T00:00:00","totalAmount":1294.00,"totalBills":3},
 {"invoiceDate":"2014-07-10T00:00:00","totalAmount":674.00,"totalBills":3},
 {"invoiceDate":"2014-07-09T00:00:00","totalAmount":2.00,"totalBills":1},
 {"totalAmount":114.00,"totalBills":10}]}

What changes should I do so it must display data from json response

Edit: I tried this

var data1;
  $.each(data.billDetails, function(i, value) {
                        data1 = {
                            labels: data.billDetails[i].invoiceDate,
                            datasets: [
                                {
                                    label: "My First dataset",
                                    fillColor: "rgba(220,220,220,0.2)",
                                    strokeColor: "rgba(220,220,220,1)",
                                    pointColor: "rgba(220,220,220,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(220,220,220,1)",
                                    data: data.billDetails[i].totalBills
                                },
                                {
                                    label: "My Second dataset",
                                    fillColor: "rgba(151,187,205,0.2)",
                                    strokeColor: "rgba(151,187,205,1)",
                                    pointColor: "rgba(151,187,205,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(151,187,205,1)",
                                    data: data.billDetails[i].totalAmount
                                }
                            ]
                        };
                    });

On console it is showing following

Uncaught TypeError: Cannot read property 'x' of undefined

My data in format

2014-07-24T00:00:00 1 1031 
2014-07-15T00:00:00 3 7281 
2014-07-12T00:00:00 7 14841
2014-07-11T00:00:00 3 1294
2014-07-10T00:00:00 3 674 
2014-07-09T00:00:00 11 116

It is showing only following image

enter image description here

This isn't a code writing service. What have you tried? Where is your problem? — RoToRa, Jul 24 '14 at 11:04
The error implies that you have a variable/property called `x` somewhere. You'll need to find out in which line exactly the error is thrown. — RoToRa, Jul 24 '14 at 12:31
@RoToRa this is on chart.js at line `ctx.lineTo(dataset.points[dataset.points.length-1].x, this.scale.endPoint);` — xrcwrn, Jul 25 '14 at 07:32
@RoToRa I would like to know above code for getting data from json is correct or not. — xrcwrn, Jul 25 '14 at 07:34

Kevin Sandow · Accepted Answer · 2014-07-27T21:08:26.117

You're on the right track, you'll have to iterate over your json and convert it into an structure chart.js will understand.

You should start with an empty structure containing all the static information:

var chartData = {
  labels: [], // currently empty will contain all the labels for the data points
  datasets: [
    {
      label: "Total Bills",
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [] // currently empty will contain all the data points for bills
    },
    {
      label: "Total Amount",
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151,187,205,1)",
      data: [] // currently empty will contain all the data points for bills
    }
  ]
};

So far this will not print your chart, but it contains all the necessary information, like line labels and colors.

Now iterate over your array:

$.each(data.billDetails, function(position, billDetail) {
  // first use the invoiceDate as a label
  if (billDetail.invoiceDate) {
    // You should probably format that
    chartData.labels.push(billDetail.invoiceDate); 
  } else {
    // your last data entry doesn't have an invoiceDate
    chartData.labels.push(''); // blank or think of something creative
  }

  // add the totalBills and totalAmount to the dataset
  chartData.datasets[0].data.push(billDetail.totalBills);
  chartData.datasets[1].data.push(billDetail.totalAmount);
});

And now you can let chart.js render the chartData.

I tried above again it is showing Uncaught TypeError: Cannot read property 'x' of undefined at Chart.js:2693 my code which i tried is http://jsfiddle.net/xrcwrn/t3MVa/ — xrcwrn, Jul 27 '14 at 07:45
I made a mistake - edited my answer to use `Array.push()` instead of `Array.pop()` — Kevin Sandow, Jul 27 '14 at 21:09
Hi could you help me with this: http://stackoverflow.com/questions/30473933/uncaught-typeerror-cannot-read-property-draw-of-undefined — vini, May 27 '15 at 07:13

score 0 · Answer 2 · answered Sep 04 '15 at 20:12

Your JSON results should be same structure as chardata, and then you make this

    var charData = 
    {
        labels = [\\months]
        datasets: data.datasets
    }

in case that your response (in my case data.datasets) has sam structure like is hardcoded in those examples.

Drawing line chart in chart.js with json response

2 Answers2

Linked