0👍
✅
The chart is not loading because, you haven’t defined the chart type (bar, line etc.).
SO, define the chart type, as such :
...
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
...
Now, to add three y-axis, first you need to set yAxisID
for each dataset, like so :
...
datasets: [{
...,
yAxisID: 'price'
}, {
...,
yAxisID: 'reviews'
}, {
...,
yAxisID: 'stock'
}]
...
then, add three separate y-axis and set their id in your chart options, as such :
options: {
scales: {
yAxes: [{
id: 'price'
}, {
id: 'reviews'
}, {
id: 'stock'
}]
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
$(document).ready(function() {
$.ajax({
url: "https://istack.000webhostapp.com/json/t12.json",
type: "GET",
success: function(data) {
console.log(data);
var stock = [];
var price = [];
var reviews = [];
var date = [];
for (var i in data) {
stock.push(data[i].stock);
price.push(data[i].price);
reviews.push(data[i].rating);
date.push(data[i].scrape_date);
}
var chartdata = {
labels: date,
datasets: [{
label: "price",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
data: price,
yAxisID: 'price'
}, {
label: "reviews",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(29, 202, 255, 0.75)",
borderColor: "rgba(29, 202, 255, 1)",
pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
pointHoverBorderColor: "rgba(29, 202, 255, 1)",
data: reviews,
yAxisID: 'reviews'
}, {
label: "stock",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(211, 72, 54, 0.75)",
borderColor: "rgba(211, 72, 54, 1)",
pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
pointHoverBorderColor: "rgba(211, 72, 54, 1)",
data: stock,
yAxisID: 'stock'
}]
};
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
scales: {
yAxes: [{
id: 'price'
}, {
id: 'reviews'
}, {
id: 'stock'
}]
}
}
});
},
error: function(data) {
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="mycanvas"></canvas>
Source:stackexchange.com