Question

0

220

Views

How to bring random values to html file for chart

This is a function to get random variables in file called data.js to a chart in a separate html file called chart.html

I need to know how to link that JavaScript file to the HTML document once the HTML is properly formed/valid.
THEN: How to call the function - and properly use those values returned by it within my chart?

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>

about 4 years ago · Juan Pablo Isaza

Answer question

0

220

How to bring random values to html file for chart

Find remote jobs

Andres GPT