Chartjs-ChartJS showing incorrect data on the X-Axes

by

0👍

✅

Se for example your simplified graph in the snippet below. The data for each of the month is allocated by index to the graph.

labels: ["January", "February",….]
data: [100, 200, ….]

So 100 is for january and 200 for february and so on.

What I mean, is that you need to pass an array with the data in the array already grouped by month either the array "hardcoded" by you, or make the corresponding arrangements with code to retrieve that array using the date field of your database

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<canvas id="chart"></canvas>
<script>
  var barChartData = {
    labels: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    datasets: [
      {
        label: "Subgrade",
        backgroundColor: "rgba(189,55,220,0.5)",
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100]
      }
      // {
      //   label: "Cast Aluminium",
      //   backgroundColor: "rgba(29,155,220,0.5)",
      //   data: castaluminium_material
      // },
      // {
      //   label: "Copper",
      //   backgroundColor: "rgba(129,155,20,0.5)",
      //   data: copper_material
      // },
      // {
      //   label: "Stainless Steel",
      //   backgroundColor: "rgba(29,255,55,0.5)",
      //   data: stainlesssteel_material
      // },
      // {
      //   label: "Brass",
      //   backgroundColor: "rgba(0,155,45,0.5)",
      //   data: brass_material
      // }
    ]
  };

  var ctx = document.getElementById("chart").getContext("2d");
  var myBar = new Chart(ctx, {
    type: "bar",
    data: barChartData,
    options: {
      title: {
        display: true,
        text: "General Recyclables Overview By Month"
      },
      tooltips: {
        mode: "label"
        // callbacks: {
        //   label: function (tooltipItem, data) {
        //     var corporation = data.datasets[tooltipItem.datasetIndex].label;
        //     var valor =
        //       data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        //     var total = 0;
        //     for (var i = 0; i < data.datasets.length; i++)
        //       total += data.datasets[i].data[tooltipItem.index];
        //     if (tooltipItem.datasetIndex != data.datasets.length - 1) {
        //       return (
        //         corporation +
        //         " : KG" +
        //         valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
        //       );
        //     } else {
        //       return [
        //         corporation +
        //           " :" +
        //           valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"),
        //         "Total : " + total + " KG"
        //       ];
        //     }
        //   }
        // }
      },
      responsive: true,
      scales: {
        xAxes: [
          {
            stacked: true
          }
        ],
        yAxes: [
          {
            stacked: true
          }
        ]
      }
    }
  });

  var barChartData = {
    labels: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    datasets: [
      {
        label: "Low Grade PCB",
        backgroundColor: "rgba(189,55,220,0.5)",
        data: lowgradePCB_material
      },
      {
        label: "Medium Grade PCB",
        backgroundColor: "rgba(29,155,220,0.5)",
        data: mediumgradePCB_material
      },
      {
        label: "Copper",
        backgroundColor: "rgba(129,155,20,0.5)",
        data: highgradePCB_material
      }
    ]
  };

  var ctx = document.getElementById("general-recyclables2").getContext("2d");
  var myBar = new Chart(ctx, {
    type: "bar",
    data: barChartData,
    options: {
      title: {
        display: true,
        text: "Printed Circuit Board Processing"
      },
      tooltips: {
        mode: "label",
        callbacks: {
          label: function (tooltipItem, data) {
            var corporation = data.datasets[tooltipItem.datasetIndex].label;
            var valor =
              data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            var total = 0;
            for (var i = 0; i < data.datasets.length; i++)
              total += data.datasets[i].data[tooltipItem.index];
            if (tooltipItem.datasetIndex != data.datasets.length - 1) {
              return (
                corporation +
                " : KG" +
                valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
              );
            } else {
              return [
                corporation +
                  " :" +
                  valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"),
                "Total : " + total + " KG"
              ];
            }
          }
        }
      },
      responsive: true,
      scales: {
        xAxes: [
          {
            stacked: true
          }
        ],
        yAxes: [
          {
            stacked: true
          }
        ]
      }
    }
  });
</script>

0👍

try modify Date format issues，
check date Date.UTC()

Leave a comment