title: Highcharts PHP JSON - correct data format
body: <p>Highcharts/PHP/JS newbie here. I am having trouble formatting the required data array ($data) to feed into Highcharts. The embedded php code outputs a datetime/decimal data array of the form</p>
  
  <pre><code>[1388680500000, 11215], [1388680800000, 11334], [1388681100000, 11487], [1388681400000, 11600], [1388681700000, 11641], [1388682000000, 11648], [1388682300000, 11692], [1388682600000, 11641], [1388682900000, 11715], [1388683200000, 11808], [1388683500000, 11845], [1388683800000, 11813], [1388684100000, 11771], [1388684400000, 11746], [1388684700000, 11808], [1388685000000, 11784], [1388685300000, 11727], [1388685600000, 11608], [1388685900000, 11648], [1388686200000, 11587], [1388686500000, 11555], [1388686800000, 11596], [1388687100000, 11541], [1388687400000, 11441], [1388687700000, 11393], [1388688000000, 11340], [1388688300000, 11152], [1388688600000, 11031], [1388688900000, 10920], [1388689200000, 10681], [1388689500000, 10221], [1388689800000, 9895]
  </code></pre>
  
  <p>I am currently manually copying this data (in []) into the series: data: field which successfully generates the chart (see below). I have tried to replace the data field with
  series: [{
  data: []
  however the chart is no longer created. (as per <a href="http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database" rel="nofollow">http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database</a>)</p>
  
  <p>I have also tried many iterations of json_encode($data) in the php and JS but to no avail. I would be very grateful to anyone who could show me the exact translation of of the php output into the Highcharts data field, preferably using JSON. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
      &lt;?php
          //the usual stuff 
          error_reporting(-1);
  
           $con = mysql_connect("localhost","root","");
  
          if (!$con) {
            die('Could not connect: ' . mysql_error());
          }
  
          mysql_select_db("test", $con);
  
          $result = mysql_query("SELECT unix_timestamp(DATETIMES), TEST FROM PT");
  
          $data = array();
  
          while ($row = mysql_fetch_array($result)) {  
          extract($row);
          $row[0]=1000*$row[0];
          $data[] = "[$row[0], $row[1]]";
          }
  
          mysql_close($con);
          echo join($data, ', ');
      ?&gt;
  
  
  
  &lt;script&gt;
  $(function() {
      Highcharts.setOptions({
          chart: {
              backgroundColor: 'rgba(255, 255, 255, .9)',
              borderWidth: 2,
              plotBackgroundColor: 'rgba(255, 255, 255, .9)',
              plotShadow: true,
              plotBorderWidth: 1
          }
      });
  
      var chart1 = new Highcharts.Chart({
          chart: {
              renderTo: 'container',
          },
  
          xAxis: {
              type: 'datetime'
          },
  
          series: [{
              data: [[1388680500000, 11215], [1388680800000, 11334], [1388681100000, 11487], [1388681400000, 11600], [1388681700000, 11641], [1388682000000, 11648], [1388682300000, 11692], [1388682600000, 11641], [1388682900000, 11715], [1388683200000, 11808], [1388683500000, 11845], [1388683800000, 11813], [1388684100000, 11771], [1388684400000, 11746], [1388684700000, 11808], [1388685000000, 11784], [1388685300000, 11727], [1388685600000, 11608], [1388685900000, 11648], [1388686200000, 11587], [1388686500000, 11555], [1388686800000, 11596], [1388687100000, 11541], [1388687400000, 11441], [1388687700000, 11393], [1388688000000, 11340], [1388688300000, 11152], [1388688600000, 11031], [1388688900000, 10920], [1388689200000, 10681], [1388689500000, 10221], [1388689800000, 9895]],
              pointStart: 0,
              pointInterval: 3600 * 1000 // one hour
          }]
      });
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="container" style="height: 300px"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>I have rejigged the script into the following format, however the chart no longer plots at all... I am sure that the JSON format is correct. Please help!</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;Highcharts Example&lt;/title&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              var options = {
                  chart: {
                      renderTo: 'container',
                      type: 'line',
                      marginRight: 130,
                      marginBottom: 25
                  },
                  title: {
                      text: 'test',
                      x: -20 //center
                  },
                  subtitle: {
                      text: '',
                      x: -20
                  },
                  xAxis: {
                      categories: []
                  },
                  yAxis: {
                      title: {
                          text: 'Amount'
                      },
                      plotLines: [{
                          value: 0,
                          width: 1,
                          color: '#808080'
                      }]
                  },
                  tooltip: {
                      formatter: function() {
                              return '&lt;b&gt;'+ this.series.name +'&lt;/b&gt;&lt;br/&gt;'+
                              this.x +': '+ this.y;
                      }
                  },
                  legend: {
                      layout: 'vertical',
                      align: 'right',
                      verticalAlign: 'top',
                      x: -10,
                      y: 100,
                      borderWidth: 0
                  },
                  series: []
              }
  
              $.getJSON("data.php", function(json) {
                  options.xAxis.categories = json['category'];
                  options.series[0].name = json['name'];
                  options.series[0].data = json['data'];
                  chart = new Highcharts.Chart(options);
              });
          });
          &lt;/script&gt;
          &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>