1๐
โ
Ok. So I had to move your code upside down.
The JSON format and json type was wrong
As per ChartJs this example correct format for generating chart is this
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'dataset - big points',
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
fill: false,
borderDash: [5, 5],
pointRadius: 15,
pointHoverRadius: 10,
}, {
label: 'dataset - individual point sizes',
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
fill: false,
borderDash: [5, 5],
pointRadius: [2, 4, 6, 18, 0, 12, 20],
},]
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
issue 1: What you were trying is this
var config = {
type: 'line',
labels: XXdates,
datasets: []
}
Notice the missing data attr
issue 2: Data format has to be in Array of Number
eg: [ 1,2,3,4,5]
but your data returns like this
"[ "1", "2" ,"0" ]"
Solution : Working Code after resolving above points
function drawChart() {
var jsonData = $.ajax({
url: 'https://api.myjson.com/bins/11poyc',
dataType: 'json',
}).done(function(results) {
var label = [];
var output = [];
results.forEach(function(data) {
label.push(data.Labels);
output.push(data.Array);
});
var XXnames = label.slice(0, -1);
var XXdata = output.slice(0, -1);
var XXdates = JSON.parse(output.reverse(output)[0]);
var data = {
labels: XXdates,
datasets: []
}
XXnames.forEach(function(XXa, i) {
console.log(JSON.parse(XXdata[i]).map(Number));
data.datasets.push({
label: XXa,
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: JSON.parse(XXdata[i]).map(Number)
});
});
var config = {
type: 'line',
data : data
}
var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, config);
});
}
drawChart();
Source:stackexchange.com