title: PHP how to include a pie-chart
body: <p>I am working on a report and it is very static. I was asked to change some of the numbers into a pie-chart or cool graph. So been looking at canvasjs but cannot figure it out. </p>
  
  <p>The code I work with simple </p>
  
  <pre><code>&lt;tr&gt;&lt;td&gt;&lt;?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?&gt;&lt;/td&gt;&lt;td&gt;[pagespeed.average.desktop] / 100&lt;/td&gt;&lt;/tr&gt;
                              [/remove-if-empty]
  </code></pre>
  
  <p>The output is very basic</p>
  
  <p>Average Pagespeed 39 / 100</p>
  
  <p>I want to learn how to transform this into a pie-chart and spice it up a little. If just know how it fits together, I can figure this out for the other values I think. </p>
  
  <p>Can someone guide me? </p>
  
  <p>This is my attempt : I am new to coding as you can see</p>
  
  <pre><code>&lt;tr&gt;&lt;td&gt;&lt;?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?&gt;&lt;/td&gt;&lt;td&gt;[pagespeed.average.desktop] / 100&lt;/td&gt;&lt;/tr&gt;
  
                                      &lt;?php
                                      $dataPoints = array( 
                                          array("label"=&gt;"Speed", "y"=&gt;[pagespeed.average.desktop]),
                                          array("label"=&gt;"Optimal", "y"=&gt;100),
                                          )
  
                                      ?&gt;
                                      &lt;!DOCTYPE HTML&gt;
                                      &lt;html&gt;
                                      &lt;head&gt;
                                      &lt;script&gt;
                                      window.onload = function() {
  
  
                                      var chart = new CanvasJS.Chart("chartContainer", {
                                          animationEnabled: true,
                                          title: {
                                              text: "Page Speed"
                                          },
                                          subtitles: [{
                                              text: "November 2017"
                                          }],
                                          data: [{
                                              type: "pie",
                                              yValueFormatString: "#,##0.00\"%\"",
                                              indexLabel: "{label} ({y})",
                                              dataPoints: &lt;?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?&gt;
                                          }]
                                      });
                                      chart.render();
  
                                      }
                                      &lt;/script&gt;
                                      &lt;/head&gt;
                                      &lt;body&gt;
                                      &lt;div id="chartContainer" style="height: 370px; width: 100%;"&gt;&lt;/div&gt;
                                      &lt;script src="https://canvasjs.com/assets/script/canvasjs.min.js"&gt;&lt;/script&gt;
                              [/remove-if-empty]
  </code></pre>