title: Data from mysql to php to javascript and html for use with chartist
body: <p>I have a little project going to log temperatures and such to a MySQL database, and I'd like to provide for accessing that info from anywhere.
  My initial crude attempt worked pretty well (simply a PHP file getting the MySQL data into an HTML table)</p>
  
  <p>Now I'd like to use some pretty graphs in this project and I've failed despite many many many hours of googling.</p>
  
  <p>Here's the PHP and js/HTML files.
  (edit: removed all the mysql stuff to focus on the php->js connection)
  this is the php file.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;?php
  $phpvar = ( {labels: ['One', 'Two', 'Three'], series: [[8, 13, 21]] });
  
  $jsvar = json_encode($phpvar);
  ?&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Next, the js/HTML page where I'm trying to pull the data from the PHP script in so that it can be displayed using chartist...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta content="text/html;charset=utf-8" http-equiv="Content-Type"&gt;
  &lt;meta content="utf-8" http-equiv="encoding"&gt;
  &lt;! include chartist&gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"&gt;
  &lt;script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"&gt;&lt;/script&gt;
  &lt;! include ajax jquery &gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="ct-chart ct-double-octave" id="chart1"&gt;&lt;/div&gt;
  
  &lt;div id="testdiv"&gt; 
  &lt;/div&gt;  
  
  &lt;script type="text/javascript"&gt;   
  
      $.getJSON('stackphp.php', function(data) {
         var jsvar = JSON.parse(data);
         console.log(jsvar);
  
  
  
    var sample= {
      labels: ['One', 'Two', 'Three'],
      series: [
        [8, 13, 21],
        [1, 2, 3]
      ]
    }
  
  
  var chart = new Chartist.Bar('.ct-chart', sample);
  
  
  &lt;/script&gt;  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>@T.Shah... Interestingly, this code does display a sample graph sucessfully...IF if remove the three lines 1    $.getJSON('stackphp.php', function(data) {
         var jsvar = JSON.parse(data);
         console.log(jsvar);`</p>
  
  <p>Leaveing those three line in however, breaks the whole page... even thought the jsvar variable isn't used in the chartist function. Not sure why that is.</p>
  
  <p>This project is making it clear to me how little I've actually dabbled in web code before. If I can get a fingertip's worth of grip on what I'm missing, I'll pound away at this as much as needed.
  Many thanks.</p>