title: how do i take a generated value and insert into a graph?
body: <p>Hi I'm new to web designing and some of my jargon may be wrong. I'm trying to create a graph for lectures that shows the average rating each lecture gets. I have already calculated the average for each of the 18 lectures. Now I want to take the value for each one and insert it as the value in the graph.</p>
  
  <p>Here is how I query and output my lectures:</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;?php
      ini_set('display_errors', 1);
      include ('connection.php');
      $queryLecture = "SELECT DISTINCT lectureID FROM LectureReview ORDER BY lectureID";
      $resultLecture = $mysqli-&gt;query($queryLecture);
  
      while ($rowLecture = $resultLecture-&gt;fetch_assoc()) {
          echo "&lt;div class=\"row\"&gt;";
          echo "&lt;div class=\"box\"&gt;Lecture{$rowLecture['lectureID']}:&lt;/div&gt;";
          $lectureID = $rowLecture['lectureID'];
  
          $mysqli2 = new mysqli($hostname, $username, $password, $database);
          $stmt = $mysqli2-&gt;prepare("SELECT AVG( lectureReview ) AS lectureAvg FROM LectureReview WHERE lectureID = ?");
  
          $stmt-&gt;bind_param('i', $lectureID);
          $stmt-&gt;execute(); 
          $stmt-&gt;bind_result($lectureAvg); 
          $stmt-&gt;fetch();
  
          echo "&lt;div class=\"box\"&gt;Average Lecture Rating: {$lectureAvg}&lt;/div&gt;";
          echo "&lt;/div&gt;";
      }
  ?&gt;
  </code></pre>
  
  <p>Then, <code>OnLoad</code> I do this:</p>
  
  <pre class="lang-js prettyprint-override"><code>var chart = new CanvasJS.Chart("chartContainer", {
      theme: "theme1",
      title:{
          text: "Average Lecture Score"              
      },
      animationEnabled: true,   
      data: [              
          {
              // Change type to "bar", "area", "spline", "pie",etc.
              type: "column",
              dataPoints: [
                  { label: "Lecture 1", y: 4.5 },
                  { label: "Lecture 2", y: 4.5 },
                  { label: "Lecture 3", y: 5.0 },
                  { label: "Lecture 4", y: 5.0 },
                  { label: "Lecture 5", y: 5.0 },
                  { label: "Lecture 6", y: 5.0 },
                  { label: "Lecture 7", y: 5.0 },
                  { label: "Lecture 8", y: 5.0 },
                  { label: "Lecture 9", y: 5.0 },
                  { label: "Lecture 10", y: 5.0 },
                  { label: "Lecture 11", y: 5.0 },
                  { label: "Lecture 12", y: 5.0 },
                  { label: "Lecture 13", y: 5.0 },
                  { label: "Lecture 14", y: 5.0 },
                  { label: "Lecture 15", y: 5.0 },
                  { label: "Lecture 16", y: 5.0 },
                  { label: "Lecture 17", y: 5.0 },
                  { label: "Lecture 18", y: 5.0 },
              ]
          }
      ]
  });
  chart.render();
  </code></pre>
  
  <p>And my target container:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="chartContainer"
      style="height: 300px; width: 90%; position: absolute; padding-top:50px;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/4WkjN.png" rel="nofollow">At the moment it looks like this</a></p>
  
  <p>How can I use the values from the database for the CanvasJS graph?</p>