CODEWITHSUNDEEP
javascriptlaravelchart.js
specterdemara
specterdemara

Reputation: 1

Multiple Charts in one page with Laravel & Chartjs

I'm trying to display two charts in one page. I'm expecting like 1 doughnut and 1 pie.

Here's my view snippets: First Chart

<div class="card-body d-flex flex-center flex-column" style="width: 381px; height:350px;">
            <!-- Find the JS file for the following chart at: src/js/charts/echarts/bandwidth-saved.js-->
            <!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js-->
            <canvas id="pengeluaran" width="350"></canvas>
          </div>

Second Chart

<div class="card-body d-flex flex-center flex-column" style="width: 381px; height:350px;">
              <!-- Find the JS file for the following chart at: src/js/charts/echarts/bandwidth-saved.js-->
              <!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js-->
              <canvas id="sponsorship" width="350"></canvas>
            </div>

I tried the solution at Two charts in a page not working, using Chart.js 3.1.1 cdn in Laravel 8.x framework & Multiple charts in one page - Chartjs, but it's seems doesn't work for me. I tried to implement it, but only the first chart is displaying on the page. It's displays the error "Failed to create chart: can't acquire context from the given item", I double check everything and I can't find what's cause of the error.

Here's the javascript file:

<script>
  const ctx1 = document.getElementById('pengeluaran');
  const ExpensesLabel = ['Rewards', 'Bantuan', 'Others'];
  const ExpensesData = {
    labels :ExpensesLabel,
    datasets: [{
    label: 'Sebaran Pengeluaran untuk Anak',
    data: [300, 50, 100],
    backgroundColor: [
      "rgb(255, 99, 132, 0.2)", "rgb(54, 162, 235, 0.2)",
      "rgb(255, 206, 86, 0.2)",
    ],
    borderColor: [
      "rgb(255, 99, 132, 1)", "rgb(54, 162, 235, 1)",
      "rgb(255, 206, 86, 1)",
    ],
    hoverOffset: 4,
    borderWidth: 1,
  }]};

  const options1 = {
      responsive: true,
      maintainAspectRatio: true,
      layout: {
        padding: 10
      }
    };

  new Chart(ctx1, {
    type: 'doughnut',
    data: ExpensesData,
    options: options1
  });
</script>

Second Charts

<script>
  const ctx2 = document.getElementById('sponsorship');
  const SponsorLabel = ['TK','SD','SMP','SMA-K / Kuliah'];
  const SponsorData = {
    labels : SponsorLabel,
    datasets: [{
    label: 'Sebaran Penerimaan Hadiah Sponsor',
    data: [300, 50, 100, 90],
    backgroundColor: [
      "rgb(255, 99, 132, 0.2)", "rgb(54, 162, 235, 0.2)",
      "rgb(255, 206, 86, 0.2)", "rgb(75, 192, 192, 0.2)",
    ],
    borderColor: [
      "rgb(255, 99, 132, 1)", "rgb(54, 162, 235, 1)",
      "rgb(255, 206, 86, 1)", "rgb(75, 192, 192, 1)",
    ],
    hoverOffset: 4,
    borderWidth: 1
    }]
};

  const options2 = {
      responsive: true,
      maintainAspectRatio: true,
      layout: {
        padding: 10
      }
    };

  new Chart(ctx2, {
    type: 'pie',
    data: SponsorData,
    options: options2,
  });
</script>

Is there anything I missed? Any help would be appreciated! Thanks

Upvotes: 0

Views: 634

Answers (1)

specterdemara
specterdemara

Reputation: 1

Sorry for late reply. The fix was it was conflicting id naming with other div in the blade file. So I had to rename the second chart canvas id to different name. The code above works perfectly though, as explained and tested by FiddlingAway in the comment section.

          <canvas id="sponsorship-charts" width="350"></canvas>

Upvotes: 0

Related Questions