CODEWITHSUNDEEP
javascripthtmlchart.jsweb-frontend
def __init__
def __init__

Reputation: 1066

Create two inline chart using chart js

I'm trying to create two inline chart to my web page ;

enter image description here

enter image description here

I tried to create pie chart and dough chart using chart.js. But I'm getting only one chart, though I entered input for both the chart in my code.

Edit: edited the code.

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<style>
  .gfg {
    display: inline;
}
</style>

<body>
    <canvas id="myChart1" width="90" height="90" style="width:100%;max-width:650px"></canvas>
    <canvas id="myChart2" width="90" height="90" style="width:100%;max-width:650px"></canvas>
    <script>
      function getColors(length) {
        let pallet = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
        let colors = [];
  
        for (let i = 0; i < length; i++) {
          colors.push(pallet[i % (pallet.length - 1)]);
        }
  
        return colors;
      }
      var xValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test'];
      var yValues = [2, 100, 223, 84, 197];
      var barColors = getColors(xValues.length);
  
      new Chart("myChart1", {
        type: "pie",
        data: {
          labels: xValues,
          datasets: [{
            backgroundColor: barColors,
            data: yValues
          }]
        },
  
        options: {
          "legend": {
            "display": true,
            "labels": {
              "fontSize": 20,
            }
          },
          title: {
            display: true,
            fontColor: 'rgb(255, 0, 0)',
            fontSize: 25,
            text: "Products in shortage (by number)"
          }
        }
      });
      var xxValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test','kinley'];
      var yyValues = [2, 100, 223, 84, 197,100];
      var barColors = getColors(xxValues.length);
  
      new Chart("myChart2", {
        type: "pie",
        data: {
          labels: xxValues,
          datasets: [{
            backgroundColor: barColors,
            data: yyValues
          }]
        },
  
        options: {
          "legend": {
            "display": true,
            "labels": {
              "fontSize": 20,
            }
          },
          title: {
            display: true,
            fontColor: 'rgb(255, 0, 0)',
            fontSize: 25,
            text: "Products in shortage (by number)"
          }
        }
      });
    </script>
</body>

</html>

How one can insert two inline charts on the web page? I'm an absolute beginner in chart.js.

Upvotes: 3

Views: 939

Answers (1)

timewastingprofessional
timewastingprofessional

Reputation: 816

Your script tags seem to be duplicated, I'm not sure if this is intentional but you're overshadowing any functions and vars declared in the first script tag with the second script tag.

Regardless, the problem here is that you're loading two charts with same ID on one canvas.

Set the name of your second chart to myChart2 and add another canvas with myChart2 as ID:

new Chart("myChart", {
...

new Chart("myChart2", {
...

and for the canvas:

<canvas id="myChart" width="90" height="90" style="width:100%;max-width:650px"></canvas>
<canvas id="myChart2" width="90" height="90" style="width:100%;max-width:650px"></canvas>

That should load both charts and inline can be accomplished through css using flexbox or inline-block display.

Upvotes: 2

Related Questions