title: How to display API received data as a Bar Chart?
body: <p>I can display my API data fine and I know how to display data in a bar chart format when using <code>PHP</code> to retrieve the data from a database. With these two in mind, I would like to apply the API data to the bar chart. However, I am unsure how to do this. I have tried to apply the <code>API</code> results to the graph but nothing worked so I am sorry but if anyone could apply this code for me, that would be great!</p>
  
  <p>I want to display the API as such:</p>
  
  <p>Year: 2017</p>
  
  <p>Estimated Pay: (Bar chart) with the price (estpay) still being there</p>
  
  <p>Here is the code that is used to display my API data </p>
  
  <pre><code>for (let i = 0; i &lt; data.series.length; i++) {
                              $("&lt;span&gt;", {
                                  class: "espYear",
                                  text: `Year: ${data.series[i].year}`
                              }).appendTo($data);
                              $("&lt;span&gt;", {
                                  class: "espPay",
                                  text: `Pay per week: £${data.series[i].estpay}`
                              }).appendTo($data);
                          }
  </code></pre>
  
  <p>This is my bar chart code that I used with PHP, but I want to apply the code above with this below.</p>
  
  <pre><code>var data = {
    "summary": [{
      "name": "Train:",
      "hits": &lt;?php echo $num_rows; ?&gt;
    }]
  };
  var element;
  for (element in data.summary) {
    var names = data.summary[element].name;
    var values2 = data.summary[element].hits;
  
    var node = document.createElement("tr");
    var subnode1 = document.createElement("td");
    var textnode1 = document.createTextNode(names);
    var subnode2 = document.createElement("td");
    var textnode2 = document.createTextNode(values2);
    var subnode3 = document.createElement("td");
    var subsubnode = document.createElement("canvas");
  
    subnode1.appendChild(textnode1);
    subnode2.appendChild(textnode2);
    subnode3.appendChild(subsubnode);
  
    var att = subsubnode.setAttribute("id", names);
    var att2 = subsubnode.setAttribute("width", "800");
    var att3 = subsubnode.setAttribute("height", "25");
  
    node.appendChild(subnode1);
    node.appendChild(subnode2);
    node.appendChild(subnode3);
    document.getElementById("chart").appendChild(node);
  
    var c = document.getElementById(names);
    var bar = c.getContext("2d");
    var length = values2;
    if (values2 &gt; 0) {
      if (length &gt; 100)
        length = 100;
      bar.fillStyle = "#ADD9EC"; //"blue";
    }
  
    bar.rect(1, 1, 10 * &lt;?php echo $num_rows; ?&gt;, 20);
    bar.fill();
    bar.stroke()
  
  }
  </code></pre>