[Chartjs]-Multiple ChartJS scripts are not working at the same time

by

1👍

✅

The problem seems to be 2 onload functions. If you make both charts in the second onLoad function it will work. It will look better if you make it a single script tag also then.

<body>
  <!--<canvas id="chartJSContainer" width="600" height="400"></canvas>-->


  <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
    <div class="card">
      <div class="card-body">
        <h5 class="text-muted">No of Drivers:</h5>
        <div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
          <h1 class="fs-20">Driver Status</h1>
        </div>
      </div>
      # THE FIRST CHART
      <canvas id="pie-chart" style="margin-bottom: 20px!important;"></canvas>
    </div>
  </div>
  <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
    <div class="card">
      <div class="card-body">
        <h5 class="text-muted">Driver</h5>
        <div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
          <h1 class="fs-20">EVR Status</h1>
        </div>
      </div>
      # THE SECOND CHART
      <canvas id="evr-status" style="margin-bottom: 20px!important;"></canvas>
    </div>
  </div>

  <script>
    // Driver Status
    var config = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [10, 20, 30],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
          ],
          label: 'Population'
        }],
        labels: ['pending', 'hired', 'terminated']
      },
      options: {
        responsive: true
      }
    };
  </script>

  # The Script for the Second chart

  <script>
    // EVR STATUS
    var config2 = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [30, 20, 10],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
          ],
          label: ['EVR Status']
        }],
        labels: ['done', 'partial', 'not_started']
      },
      options: {
        responsive: true
      }
    };
    window.onload = function() {
      var ctx2 = document.getElementById('evr-status').getContext('2d');
      window.myPie2 = new Chart(ctx2, config2);
      var ctx = document.getElementById('pie-chart').getContext('2d');
      window.myPie = new Chart(ctx, config);
    };
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

Leave a comment