1👍
✅
Here is a translation from canvas.js to chart.js:
var DATA1 = [];
var DATA2 = [];
$.ajax({
type: 'GET',
url: "https://api.myjson.com/bins/14edgx",
dataType: 'json',
success: function(field) {
field = field.data;
for (var i = 0; i < field.length; i++) {
DATA1.push({
x: new Date(field[i].day),
y: parseInt(field[i].money)
});
DATA2.push({
x: new Date(field[i].day),
y: parseInt(field[i].impressions)
});
}
createChart();
console.log(DATA1, DATA2);
}
});
function createChart() {
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 1000;
ctx.canvas.height = 600;
var cfg = {
type: 'bar',
data: {
datasets: [{
label: "DATA1",
data: DATA1,
type: 'line',
pointRadius: 1,
fill: true,
borderColor: 'red',
lineTension: 0,
borderWidth: 2,
yAxisID: 'A',
},
{
label: "DATA2",
data: DATA2,
type: 'line',
pointRadius: 1,
fill: true,
borderColor: 'blue',
lineTension: 0,
borderWidth: 2,
yAxisID: 'B',
}]
},
options: {
legend: {
display: false
},
tooltips: {
mode: 'nearest',
intersect: false,
callbacks: {
title: function(tooltipItem, data) {
console.log('title',tooltipItem, data);
var date = moment(tooltipItem[0]['xLabel']).format('DD.MM.YYYY');
return date;
},
label: function(tooltipItem, data) {
console.log('label',tooltipItem, data);
return data.datasets[0].label+": "+tooltipItem['yLabel'];
}
},
},
scales: {
xAxes: [{
type: 'time',
distribution: 'linear',
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'DD-MM-YY'
}
}
}],
yAxes: [{
id: 'A',
scaleLabel: {
display: true,
labelString: 'money'
},
position: 'left',
}, {
id: 'B',
type: 'linear',
scaleLabel: {
display: true,
labelString: 'impressions'
},
position: 'right',
}]
}
}
};
var chart = new Chart(ctx, cfg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Source:stackexchange.com