This is a function to get random variables in file called data.js to a chart in a separate html file called chart.html
function getRandomJson() {
var cdata = [{
"_id": "585b544f5c86b6c8537c34d6",
"pizza": "Pepperoni",
"sold": Math.floor(Math.random() * (100 - 20 + 1)) + 20,
}, {/* w w w . d em o 2s .c o m*/
"_id": "585b54505c86b6c8537c34d7",
"pizza": "Farmhouse",
"sold": Math.floor(Math.random() * (80 - 1 + 1)) + 1,
}, {
"_id": "585b54515c86b6c8537c34d8",
"pizza": "Veggie Paradise",
"sold": Math.floor(Math.random() * (90 - 20 + 1)) + 20,
}, {
"_id": "585b54525c86b6c8537c34d9",
"pizza": "Peppy Panner",
"sold": Math.floor(Math.random() * (50 - 40 + 1)) + 40,
}, {
"_id": "585b54535c86b6c8537c34da",
"pizza": "VEGGIE PARADISE",
"sold": Math.floor(Math.random() * (85 - 20 + 1)) + 20,
}];
return cdata;
}
This is my chart.html code:
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:1000px"></canvas>
<script>
var xValues = ["Pepperoni", "Farmhouse", "Veggie Paradise", "Peppy Panner", "VEGGIE PARADISE"];
var yValues = [55, 49, 44, 24, 60];
var barColors = ["red", "green", "blue", "orange", "brown"];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
legend: {
display: false
},
title: {
display: true,
text: "World Wine Production 2018"
}
}
});
</script>
<center>
<h3></h3>
</center>
</body>
</html>