Plot data on pie chart using database in canvasjs

Question

I am using canvasjs I want to plot data from database into pie chart. I am able to get data from DB and pass it to an array.

array_push($dataPointskWh, array("label"=>$pr['name'],"y"=>$cr['sum_kwh_diff']));

JS

<script>
  var arry_kwh = [];
  arry_kwh = <?php echo json_encode($dataPointskWh, JSON_NUMERIC_CHECK); ?>;
  console.log(arry_kwh);

var chart = new CanvasJS.Chart("chartContainer2", {
        animationEnabled: true,
        title: {
            text: "Last Month Floor Wise kWh"
        },
        data: [{
            type: "pie",
            //startAngle: 240,
            //showInLegend: true,
            yValueFormatString: "##0.00\" kWh\"",
            indexLabel: "{label} {y}",
            dataPoints: [
              // here I want to add the data points
            ]
        }]
    });
    chart.render();

The console.log(array_kwh) gives me

0:
label: "Floor-1"
y: 1297

1:
label: "Floor-2"
y: 7.7

How can I plot them? Also, the data would increase so I want to plot in that way.

Answer 1

You need to add your label and y data which you get from arry_kwh to some array and passed this array to your dataPoints to plot the values in graph.

Demo Code :

 //your data var arry_kwh =[{ "label": "Floor-1", "y": 1297 },{ "label": "Floor-2", "y": 780}]; var dataPoints =[]; //loop through the array and add value to dataPoints array $.each(arry_kwh, function(key, value){ dataPoints.push({ y:value.y, indexLabel: value.label}); }); var chart = new CanvasJS.Chart("chartContainer2", { animationEnabled: true, title: { text: "Last Month Floor Wise kWh" }, data: [{ type: "pie", yValueFormatString: "##0.00\" kWh\"", dataPoints:dataPoints //passing values }] }); chart.render();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer2" style="height: 300px; width: 100%;"></div>