Mike Harrison Mike Harrison - 5 months ago 14
Javascript Question

Use JSON data in Chart.js chart

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

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);