title: How to load data from JSON to Highchart?
body: <p>my <strong><em><code>Json</code></em></strong> looks like this:</p>
  
  <pre><code>[{"1332879360000.0": 300.0, "1332797760000.0": 353.0,
  
  "1332799320000.0": 358.0, "1332879780000.0": 302.0, 
  
  "1332800160000.0": 359.0, "1332880200000.0": 299.0, 
  
  "1332880620000.0": 298.0, "1332881040000.0": 301.0, 
  
  "1332881460000.0": 402.0, "1332880020000.0": 330.0, 
  
  "1332882300000.0": 466.0, "1332796620000.0": 519.0, 
  
  "1332800520000.0": 447.0, "1332797460000.0": 359.0, 
  
  "1332801000000.0": 442.0}]
  </code></pre>
  
  <p>And I want to show those data in Highchart, with X-axis is date format,</p>
  
  <p><code>("1332801000000.0" in JSON)</code> and Y-axis is data <code>(300.0 in JSON)</code>,</p>
  
  <p>just like a point.</p>
  
  <p>I notice there is a demo in Highchart.com, and it is run live data. I copy that, but I don't want to show lively. Just show those points at once,and make up a chart. Any solution? I'm not very familiar with JavaScript. But I think this may use the same method.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var chart; // global
  
      /**
       * Request data from the server, add it to the graph and set a timeout to request again
       */
      function requestData() {
          $.ajax({
              url: '/get_data', 
              success: function(point) {
                  var series = chart.series[0],
                      shift = series.data.length &gt; 20; // shift if the series is longer than 20
  
                  // add the point
                  chart.series[0].addPoint(eval(point), true, shift);
  
  
                  // call it again after one second
                  setTimeout(requestData, 5000);  
              },
              cache: false
          });
      }
  
      $(document).ready(function() {
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'test',
                  defaultSeriesType: 'spline',
                  events: {
                      load: requestData
                  }
              },
              title: {
                  text: 'Live random data'
              },
              xAxis: {
                  type: 'datetime',
                  tickPixelInterval: 150,
                  maxZoom: 20 * 1000
              },
              yAxis: {
                  minPadding: 0.2,
                  maxPadding: 0.2,
                  title: {
                      text: 'Value',
                      margin: 80
                  }
              },
              series: [{
                  name: 'Random data',
                  data: []
              }]
          });
  
  
  
      });
      &lt;/script&gt;
  </code></pre>