How to add multiple chart js script in html-CodePudding

I want to create a chart from chart js library. The code of script of bar chart is written in some .js file means its not in html now I want to add that script inside my html when i do it then chart not get prepared then I tried window.onload=function(){Here is the code snippet of chartjs dataset}. This working fine one chart prepared but I want it 4 times same chart with different ids then it not work it only print chart in last div

            <div
            
          >
            <h4 >
              Bars
            </h4>
            <canvas id="bars1"></canvas>
            <div
              
            >
             
            </div>
            <script>
                window.onload = function(){
                  window.myBar = new Chart(document.getElementById('bars1'),
                  {
                    type: 'bar',
                    data: {
                      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                      datasets: [
                      
                        {
                          label: 'Bags',
                          backgroundColor: '#7e3af2',
                          // borderColor: window.chartColors.blue,
                          borderWidth: 1,
                          data: [66, 33, 43, 12, 54, 62, 84,100],
                        },
                        
                      ],
                    },
                    options: {
                      responsive: true,
                      legend: {
                        display: false,
                      },
                    },
                  }
                )
              }
              
              </script>
          </div>

same chart i want 4 times if i paste this same div below this div with different id in canavs tag and getelementbyid then it wont work only last div chart get printed

Explained

CodePudding user response：

you can just store the ids of all the canvas elements and loops over that array while adding a chart to the respective element with the id

<canvas id="bars1"></canvas>
<canvas id="bars2"></canvas>
<canvas id="bars3"></canvas>
<canvas id="bars4"></canvas>

<script>
window.onload = function(){
    const ids = ['bars1', 'bars2', 'bars3', 'bars4']
    ids.forEach((id) => {
        window.myBar = new Chart(document.getElementById(id),
                  {
                    type: 'bar',
                    data: {
                      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                      datasets: [
                      
                        {
                          label: 'Bags',
                          backgroundColor: '#7e3af2',
                          // borderColor: window.chartColors.blue,
                          borderWidth: 1,
                          data: [66, 33, 43, 12, 54, 62, 84,100],
                        },
                        
                      ],
                    },
                    options: {
                      responsive: true,
                      legend: {
                        display: false,
                      },
                    },
                  }
                )
              }
    })
                  
</script>

CodePudding user response：

does this solve your problem? if not please provide more details

let ids = ['bars1', 'bars2', 'bars3', 'bars4']

ids.forEach(id => {
  window.myBar = new Chart(document.getElementById(id), {
      type: "bar",
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
          {
            label: "Bags",
            backgroundColor: "#7e3af2",
            // borderColor: window.chartColors.blue,
            borderWidth: 1,
            data: [66, 33, 43, 12, 54, 62, 84, 100],
          },
        ],
      },
      options: {
        responsive: true,
        legend: {
          display: false,
        },
      },
    });
})

<canvas id="bars1"></canvas>
<canvas id="bars2"></canvas>
<canvas id="bars3"></canvas>
<canvas id="bars4"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>