title: tring to get data into chart.js from Javascript or PHP
body: <p>I have been trying to do this for a while now. I am running a query on a database and trying to get the ressulting data into chartjs pie chart.</p>
  
  <p>my table is as follows:</p>
  
  <pre><code>Delaytype| Delayhours
  </code></pre>
  
  <p>The delay type has an exact amout of categories. </p>
  
  <p>My PHP to get this data is as follows and works: </p>
  
  <pre><code>&lt;?php 
  include "config.php" //database etc
  
  
  If (mysqli_connect_errno($con))
  {
  echo 'failed';
  }
  else
  { 
  $result = mysqli_($con, "SELECT Dealaytype, COUNT(1) as cnt FROM delays
  GROUP BY Delaytype; ");
  
  while($row = mysqli_fetch_array($result))
  {
  
  
  echo $row['delaytype']; //type of delay / works
  echo $row['cnt']; // hours for that type of delay./ works
  
  }
  </code></pre>
  
  <p>All the outputs work. </p>
  
  <p>I have been echoing the above into a table with the id myTable.</p>
  
  <p>I can access this table with Javascript via rows and cells and output value
  . I cant seem to get the value into the pieData variable. The table will always be the same in the way of cells and rows so will work everytime.</p>
  
  <p>the chart.js script is as follows: </p>
  
  <pre><code>&lt;canvas id='buy'&gt;&lt;/canvas&gt;
  
   var pieData = [ 
   {
  value : my hours from php for delaytype 1 or my value from javascript,
          from mytable echoed by PHP.
  color : "some color"
  },
  {
  value : my hours from php for delaytype 2,
  color : "some color"
  }
  ];
  
  
  var pieOptions = { 
  segmentShowStroke : false,
  animateScale : true
  };
  var countries = document.getElementById("buy").getContext("2d");
  
  new Chart(countries).Pie(pieData, pieOptions);
  </code></pre>
  
  <p>The chart works with sample data in it only fails when I try to incorperate my own data.</p>
  
  <pre><code>previous to this I tried outputting the JSON with PHP trying to get this into the pieData . IS THIS POSSIBLE WITH 
  
  USING json_encode ? I looked at another question in relation to this but could not get this to work 
  </code></pre>
  
  <p>any help with this will be much appreciated.</p>
  
  <pre><code>hello Sean heres my current code cut from ide:
  
  &lt;!doctype html&gt;
  &lt;?php
  
  ?&gt;
      &lt;head&gt;
  
          &lt;script src="chartjs/Chart.js-master/Chart.js"&gt;&lt;/script&gt;
          &lt;script src="chartjs/Chart.js-master/Chart.min.js"&gt;&lt;/script&gt;
          &lt;script src="chartjs/Chart.js-master/package.json"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
  
  
      &lt;body&gt;
          &lt;?php
      include "config.php";
  
  // Check connection
  if (mysqli_connect_errno($con))
  {
  echo "Failed to connect to DataBase: " . mysqli_connect_error();
  }
  else
  {
  
  
    $result = mysqli_query($con, "SELECT Delaytype, COUNT(1) as cnt FROM    
  delays GROUP BY Delaytype; ");
  echo "&lt;table id='mytable'&gt;&lt;th&gt;Delay Type&lt;/th&gt;&lt;th&gt;Delay Hours&lt;/th&gt;";
  $pieData = array();
  
  while($row = mysqli_fetch_array($result))
  {   
     // $point =  $row['Delaytype'];
      $pieData[] = array('value' =&gt;$row['cnt'], 'color' =&gt;'#878BB6 ');
  
  echo "&lt;tr&gt;&lt;td&gt;".$row['Delaytype']. "&lt;/td&gt;&lt;td&gt;" .$row['cnt']."&lt;/td&gt;&lt;/tr&gt; ";
  
  
  
    // $chart_data = array();
   // $chart_data[0]["value"] = 
   //echo "".$row['Delaytype'].",";
   //echo '"'.$row['Delaytype'].'",';
    //  $point = array($row['Delaytype'], $row['cnt']);
      //array_push($data_points,$point);        
  }
  
  // echo json_encode($data_points, JSON_NUMERIC_CHECK);
  
  }
  
  
  
  
      ?&gt;
       &lt;div id="myballs"&gt;&lt;/div&gt;
      &lt;button onclick="myFunction()"&gt;try this&lt;/button&gt;
        &lt;canvas id="buy" width="600" height="400"&gt;&lt;/canvas&gt;
      &lt;!-- line chart canvas element--&gt; 
  
  
      &lt;script&gt;
          var y = document.getElementById('mytable').rows[1].cells            
  [1].innerHTML;
          function myFunction(){
            var x = document.getElementById('myballs');
             var y = document.getElementById('mytable').rows[1].cells 
  [1].innerHTML;
             var p = document.getElementById('mytable').rows[2].cells 
  [1].innerHTML;
  
             //var c = y + p;
  x.innerHTML = (y * 1) + (p * 1);       
          }
  
  
  
          &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>         var pieData = &lt;?php echo" ".json_encode($pieData).""; ?&gt;;
  
  
  
         // [
           //   {
             //     value: 20 ,
               //   color:"#878BB6"
  
           //},
             // {
               //   value : 40,
                 // color : "#4ACAB4"
  
             // },
              //{
                //  value : 10,
                  //color : "#FF8153"
  
             // },
              //{
                //  value : 30,
                  //color : "#FFEA88"
  
              //}
         // ];
          // pie chart options
          var pieOptions = {
               segmentShowStroke : false,
               animateScale : true
          };
          // get pie chart canvas
          var countries= document.getElementById("buy").getContext("2d");
          // draw pie chart
          new Chart(countries).Pie(pieData, pieOptions);
  
      &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  &lt;?php
  mysqli_close($con);     
  </code></pre>
  
  <p>The javascript table stuff was me geting value etc. With this set up I get only a portion of the chart even though my values add up to more than 100 which is required for the chart to render correctly.        </p>
  
  <p>I have gotm rid of the duplicate JSON. </p>
  
  <p>currently I have when I echo my JSON </p>
  
  <pre><code>[{"value":"21","Color":"#878BB6"},{"value":"99","Color":"#878BB6"}],
  </code></pre>
  
  <p>this seems correct. Could the speech marks break my chart?  </p>
  
  <p>It seems that the speech marks around the number for value breaks the chart.</p>
  
  <p>so "value": "21" //21 needs to not be in speech marks and it works</p>