Chartjs-How to set php data to chart.js for creating graph?

by

0đź‘Ť

Unfortunately I don’t know much about php. But since you haven’t received an answer yet, I can explain the part related to Chart.js.

Given your data already present in an array, which I named jsonData, you can use the Array.map() method to extract labels and data as follows:

labels: jsonData.map(o => o.month),
datasets: [{
  label: "Records per Month",
  data: jsonData.map(o => o.records),

Please have a look at your amended and runnable code below:

const jsonData = [
    {"records":"3","month":"Jan"},
    {"records":"6","month":"Feb"},
    {"records":"2","month":"Mar"},
];

new Chart(document.getElementById("bar-chart-data"), {
  type: 'bar',
  data: {
    labels: jsonData.map(o => o.month),
    datasets: [{
      label: "Records per Month",
      data: jsonData.map(o => o.records),
      backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)"],
      borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)"],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        ticks: {
          stepSize: 10,
          beginAtZero: true,
        },
      }]
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="bar-chart-data" height="90"></canvas>

Leave a comment