Multiple ChartJS scripts are not working at the same time

When I am using a Single Chart in ChartJS, it works well but whenever I use more than a Chart, only the last chart works, the others don’t longer display.

I am not sure of what the problem might actually be as I have checked the console and terminal if I would get any error or so so as to debuy it.

index.html

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

# The Script for the first chart

<script>
    // Driver Status
    var config = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [{{pending}},{{hired}},{{terminated}}],
              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
      }
    };
    window.onload = function() {
      var ctx = document.getElementById('pie-chart').getContext('2d');
      window.myPie = new Chart(ctx, config);
    };
</script>

# The Script for the Second chart

<script>
    // EVR STATUS
    var config2 = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [{{done}},{{partial}},{{not_started}}],
              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);
    };
</script>
<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: {{drivers_list.count}}</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>
{% endblock %}

Answer

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>

Advertisement

Answer