title: how to add dynamic data in a highchart?
body: <p>I have a Highchart that is receiving JSON data via AJAX and jQuery.  But my chart doesn't show the points until I hover the mouse over the chart.  Even then the points are all at the very top of the chart.  I don't think I'm adding my points to the series correctly.  Please tell me what I'm doing wrong in the jsonpcallback function.</p>
  
  <p>Thanks!</p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
      &lt;!-- Begin Chart options--&gt;
  
      // define the options
              var options = {
                              chart: {renderTo: 'container'},
                              title: {text: 'Brewery'},
                              subtitle: {text: ' '},
                              xAxis: {text: 'Time',type: 'datetime'},
                              yAxis: [{ // left y axis
                                          title: {text: 'Temperature (℉)'},
                                          labels: {align: 'left', x: 3, y: 16,
                                                  formatter: function() {
                                          return Highcharts.numberFormat(this.value, 0);}
                                      },
                                      showFirstLabel: false}, 
                                      { // right y axis
                                          linkedTo: 0, gridLineWidth: 0, opposite: true,
                                          title: {text: 'Temperature (℉)'},
                                                  labels: {align: 'right', x: -3, y: 16,
                                                      formatter: function() {
                                          return Highcharts.numberFormat(this.value, 0);}
                                      },
                                      showFirstLabel: false
                              }],
                              legend: {align: 'left', verticalAlign: 'top', y: 20,
                                      floating: true, borderWidth: 0},
                              tooltip: {shared: true, crosshairs: true},
                              plotOptions: {  series: {cursor: 'pointer',
                                                      point: {events: {
                                                      click: function() {
                                                      hs.htmlExpand(null, {
                                                      pageOrigin: {
                                                          x: this.pageX, 
                                                          y: this.pageY
                                                      },
                                                      headingText: this.series.name,
                                                      maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':&lt;br/&gt; '+ 
                                                      this.y +'(℉)',
                                                      width: 200});
                                                      }}},
                              marker: {lineWidth: 1}}},
                              series: [   {name: 'Hot Liqour Tank'},
                                          {name: 'MashTun'},
                                          {name: 'Brew Kettle'},
                                          {name: 'Post Chiller'},
                                          {name: 'Control Box'}
                                      ]
              };
      &lt;!-- End Chart Options --&gt;
      var chart;
      //after DOM is loaded setup timeout to call the ajax method
      $(document).ready(function() {
          //call function to render the chart and setup the options
          renderChart();
      });
  
      //this function requests the data
      function reqData(){
          $.ajax({
              url: "http://192.168.0.11/"+Math.random(),
              dataType: "jsonp",              
              jsonp: "callback",
              jsonpCallback: "jsonpcallback"
          });
      }
  
      function jsonpcallback(rtndata) { 
          for(var i = 0; i &lt; rtndata.length; i++){
              if(rtndata[i].sensor=="hlt")
              {
                  chart.series[0].addPoint([rtndata[i].time, rtndata[i].temp]);
              }
              else if(rtndata[i].sensor=="mt")
              {
                  chart.series[1].addPoint([rtndata[i].time, rtndata[i].temp]);
              }
              else if(rtndata[i].sensor=="bk")
              {
                  chart.series[2].addPoint([rtndata[i].time, rtndata[i].temp]);
              }
              else if(rtndata[i].sensor=="pc")
              {
                  chart.series[3].addPoint([rtndata[i].time, rtndata[i].temp]);
              }
              else if(rtndata[i].sensor=="box")
              {
                  chart.series[4].addPoint([rtndata[i].time, rtndata[i].temp]);
              }       
          }
      }
  
      function renderChart(){
          chart = new Highcharts.Chart(options);
      }
  
      //continually poll for data
      setInterval(reqData, 5000);
      &lt;/script&gt;
  </code></pre>