title: Develop a line graph from JSON data
body: <p>Hi there I am quite new to PHP/JSON and building graphs with them, I am trying to build a graph using data I collect from my MYSQL database which is collecting data from multiple sensors but in this case a live temperature sensor. I am at a point where where I have the data echo in JSON format on a PHP page but am having trouble actually producing the graph. I feel like am running around in circles trying to complete it so im either delving into something much to complex for my knowledge or I am missing something obvious, any help will be much appreciated .</p>
  
  <p>Here is the JSON format I am producing from a PHP file called <code>data.php</code>:</p>
  
  <pre><code> [{ "time": "04:14:39", "temperature": 15.3 }]
  </code></pre>
  
  <p>BELOW IS THE CODE I HAVE BEEN USING FROM AMCHARTS</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;amCharts tutorial: Loading external data&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- prerequisites --&gt;
  &lt;link rel="stylesheet" href="http://www.amcharts.com/lib/style.css" type="text/css"&gt;
  &lt;script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;!-- cutom functions --&gt;
  &lt;script&gt;
  AmCharts.loadJSON = function(url) {
  if (window.XMLHttpRequest) {
  
  var request = new XMLHttpRequest();
  } else {
  
  var request = new ActiveXObject('Microsoft.XMLHTTP');
  } 
  
  
  request.open('GET', url, false);
  request.send();
  
  
  return eval(request.responseText);
  };
  &lt;/script&gt;
  
  &lt;div id="chartdiv" style="width: 600px; height: 300px;"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  
  var chart;
  
  
  
  AmCharts.ready(function() {
  
  
  
  var chartData = AmCharts.loadJSON('data.php');
  
  chart = new AmCharts.AmSerialChart();
  chart.pathToImages = "http://www.amcharts.com/lib/images/";
  chart.dataProvider = chartData;
  chart.categoryField = "time";
  
  
  var graph1 = new AmCharts.AmGraph();
  graph1.valueField = "temperature";
  graph1.bullet = "round";
  graph1.bulletBorderColor = "#FFFFFF";
  graph1.bulletBorderThickness = 2;
  graph1.lineThickness = 2;
  graph1.lineAlpha = 0.5;
  chart.addGraph(graph1);
  
  chart.categoryAxis.parseDates = true;
  chart.write("chartdiv");
  });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>