在Chart.js图表​​中使用JSON数据

Question

I am using Chart.js and Tabletop to create a line chart. I have got to a certain point, but am not sure how to get the JSON data produced by Tabletop into the chart. This is my JSON output using console.log(JSON.stringify(data));

JSON

[{"Date":"2016-05-09","Sessions":"295"},{"Date":"2016-05-10","Sessions":"308"},{"Date":"2016-05-11","Sessions":"288"},{"Date":"2016-05-12","Sessions":"253"},{"Date":"2016-05-13","Sessions":"261"},{"Date":"2016-05-14","Sessions":"222"},{"Date":"2016-05-15","Sessions":"298"},{"Date":"2016-05-16","Sessions":"363"},{"Date":"2016-05-17","Sessions":"328"},{"Date":"2016-05-18","Sessions":"356"},{"Date":"2016-05-19","Sessions":"321"},{"Date":"2016-05-20","Sessions":"287"},{"Date":"2016-05-21","Sessions":"371"},{"Date":"2016-05-22","Sessions":"328"},{"Date":"2016-05-23","Sessions":"310"},{"Date":"2016-05-24","Sessions":"515"},{"Date":"2016-05-25","Sessions":"465"},{"Date":"2016-05-26","Sessions":"354"},{"Date":"2016-05-27","Sessions":"330"},{"Date":"2016-05-28","Sessions":"298"},{"Date":"2016-05-29","Sessions":"295"},{"Date":"2016-05-30","Sessions":"365"},{"Date":"2016-05-31","Sessions":"425"},{"Date":"2016-06-01","Sessions":"449"},{"Date":"2016-06-02","Sessions":"326"},{"Date":"2016-06-03","Sessions":"318"},{"Date":"2016-06-04","Sessions":"279"},{"Date":"2016-06-05","Sessions":"253"},{"Date":"2016-06-06","Sessions":"369"},{"Date":"2016-06-07","Sessions":"331"}]

I have hard coded the values into the Chart so you can see what I am trying to achieve:

CHART JAVASCRIPT

<script>
var ctx = document.getElementById("myChart");
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: ["2016-05-09","2016-05-10","2016-05-11","2016-05-12","2016-05-13","2016-05-14","2016-05-15","2016-05-16","2016-05-17","2016-05-18","2016-05-19","2016-05-20","2016-05-21","2016-05-22","2016-05-23","2016-05-24","2016-05-25","2016-05-26","2016-05-27","2016-05-28","2016-05-29","2016-05-30","2016-05-31","2016-06-01","2016-06-02","2016-06-03","2016-06-04","2016-06-05","2016-06-06","2016-06-07"],
    datasets: [
        {
            label: "Sessions",
            fill: true,
            lineTension: 0.4,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'round',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'round',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [295,308,288,253,261,222,298,363,328,356,321,287,371,328,310,515,465,354,330,298,295,365,425,449,326,318,279,253,369,331],
        }
    ]
},
options: {
  legend: {
    display: false
  },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});
</script>

So I need to work through the array, pulling in the Date as labels and the Sessions as the data . I am sure this is simple but I have not worked with JSON before so it has me a bit stumped, nothing I try seems to work.

Thanks for any help

Answer 1

Try this Split Json into 2 different arrays and use that data in chart.js

var arr = [{"Date":"2016-05-09","Sessions":"295"},{"Date":"2016-05-10","Sessions":"308"},{"Date":"2016-05-11","Sessions":"288"},{"Date":"2016-05-12","Sessions":"253"},{"Date":"2016-05-13","Sessions":"261"},{"Date":"2016-05-14","Sessions":"222"},{"Date":"2016-05-15","Sessions":"298"},{"Date":"2016-05-16","Sessions":"363"},{"Date":"2016-05-17","Sessions":"328"},{"Date":"2016-05-18","Sessions":"356"},{"Date":"2016-05-19","Sessions":"321"},{"Date":"2016-05-20","Sessions":"287"},{"Date":"2016-05-21","Sessions":"371"},{"Date":"2016-05-22","Sessions":"328"},{"Date":"2016-05-23","Sessions":"310"},{"Date":"2016-05-24","Sessions":"515"},{"Date":"2016-05-25","Sessions":"465"},{"Date":"2016-05-26","Sessions":"354"},{"Date":"2016-05-27","Sessions":"330"},{"Date":"2016-05-28","Sessions":"298"},{"Date":"2016-05-29","Sessions":"295"},{"Date":"2016-05-30","Sessions":"365"},{"Date":"2016-05-31","Sessions":"425"},{"Date":"2016-06-01","Sessions":"449"},{"Date":"2016-06-02","Sessions":"326"},{"Date":"2016-06-03","Sessions":"318"},{"Date":"2016-06-04","Sessions":"279"},{"Date":"2016-06-05","Sessions":"253"},{"Date":"2016-06-06","Sessions":"369"},{"Date":"2016-06-07","Sessions":"331"}]


var dateArr = [];
var sessionArr = [];

for (i=0;i<arr.length;i++) {
  for (n in arr[i]) {
    if (n == 'Date') {
      dateArr.push(arr[i][n]); 
    } else {
      sessionArr.push(arr[i][n]);
    }
  }
}
console.log(dateArr);
console.log(sessionArr);