Esta es una función para obtener variables aleatorias en un archivo llamado data.js a un gráfico en un archivo html separado llamado chart.html
function getRandomJson() { var cdata = [{ "_id": "585b544f5c86b6c8537c34d6", "pizza": "Pepperoni", "sold": Math.floor(Math.random() * (100 - 20 + 1)) + 20, }, {/* www . d em o 2s .com*/ "_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; } Este es mi código chart.html :
<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>