title: Queried Data as Datapoints on Chart.js
body: <p>I am trying to plot chart using Chart.JS based on my data from database. Here number of Labels and their values will come directly from the query result. Here is my code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  window.onload = function () {
  &lt;?php
  function getValsOfCategoryLabels(){
      $yValsWithLabels = "";
      ......
      // some codes to make query on db and get result in $queryResult variable
      ......
      ......
  
      foreach($queryResult as $data){
          $x0 = $data0['name'];
          $total = $data0['total'];
          $yValsWithLabels = $yValsWithLabels. "{y: ".$total.", label: \"".$x0."\"}, ";
      }
  
      return $yValsWithLabels;
  }
  
  ?&gt;
  var categoryLabelsNdVals = [&lt;?php echo getValsOfCategoryLabels() ?&gt;];
  var hourlyCategoryBarChart = new CanvasJS.Chart("columnchartContainer",    {
  
    animationEnabled: true,
    axisX: {
    labelFontSize: 16
    },
    axisY: {
    title: "",
    labelFontSize: 13
    },
    legend: {
    verticalAlign: "bottom",
    horizontalAlign: "center",
    fontSize: 16
    },
    theme: "theme2",
    data: [
  
    {        
    type: "column",  
    showInLegend: true, 
    legendMarkerColor: "grey",
    legendText: "Name of Category",
    dataPoints: categoryLabelsNdVals
    }   
    ]
  });
  
  hourlyCategoryBarChart.render();
  </code></pre>
  
  <p>Now for the given datapoints (which is in "{y: Some_Value, label: Some_Name}" format) I am not getting any chart as output, unless I explicitly declare all the y-axis values and label names myself, which fails reflect database info. </p>
  
  <p>What is the right way to accomplish my objective?</p>