I would like to fetch json data via ajax with this code, its work with the other json data from the original source code but it doesn't work on my json data, what do i miss? please help, thank you
$(document).ready(function() {
var dataPointsA = []
var dataPointsB = []
$.ajax({
type: 'GET',
url: 'https://api.myjson.com/bins/1fp11x',
dataType: 'json',
success: function(field) {
for (var i = 0; i < field.length; i++) {
dataPointsA.push({
x: field[i].day,
y: field[i].impressions
});
dataPointsB.push({
x: field[i].day,
y: field[i].money
});
}
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "JSON from External File"
},
data: [{
type: "line",
name: "line1",
dataPoints: dataPointsA
}, {
type: "line",
name: "line2",
dataPoints: dataPointsB
}, ]
});
chart.render();
}
});
})
You forgot to pick the stats field from json api. Also, the fields need to be formatted for the chart. PS: The chart is not pretty. You might have to rethink it.
$(document).ready(function() {
var dataPointsA = []
var dataPointsB = []
$.ajax({
type: 'GET',
url: 'https://api.myjson.com/bins/1fp11x',
dataType: 'json',
success: function(field) {
field = field.stats;
for (var i = 0; i < field.length; i++) {
dataPointsA.push({
x: new Date(field[i].day),
y: parseInt(field[i].impressions)
});
dataPointsB.push({
x: new Date(field[i].day),
y: parseInt(field[i].money)
});
}
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "JSON from External File"
},
data: [{
type: "line",
name: "line1",
dataPoints: dataPointsA
}, {
type: "line",
name: "line2",
dataPoints: dataPointsB
}, ]
});
chart.render();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>