title: Draw Highcharts dynamically by data from web service and add new points periodically
body: <p>I want to draw a highchart line chart with data from webservice that called by ajax.</p>
  
  <p>First i want to initialize my chart with new data received from ajax call.</p>
  
  <p>Chart could have many series (without any limit in cuont).</p>
  
  <p>My purpose is to <strong>first initialize</strong> my chart with new data from ajax call 
  and after drawing new chart my <strong>ajax function called peridically every 2 second</strong>s and <strong>if new data contains point received from webservice , dynamically add to chart</strong></p>
  
  <p>This is my html container : </p>
  
  <pre><code>&lt;div&gt;
      &lt;div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my script :</p>
  
  <pre><code>&lt;script&gt;
  
      var sensor_name;
      var my_chart;
      var chart_options = new Object();
      var FLAG_INITIALIZATION_DONE = 0;
  
      $(document).ready(function () {
          Highcharts.setOptions({
              global: {
                  useUTC: false
              }
          });
          drawChart();
      });
  
      function drawChart() {
  
          chart_options.chart = new Object();
          chart_options.chart.type = "spline";
          chart_options.chart.animation = Highcharts.svg;
          chart_options.chart.marginRight = 10;
          chart_options.chart.renderTo = 'container';
          chart_options.chart.events = new Object();
          chart_options.chart.ignoreHiddenSeries = false;
  
          chart_options.chart.events.load = loadChartData();
  
          chart_options.title = new Object();
          chart_options.title.text = "";
  
          chart_options.xAxis = new Object();
          chart_options.xAxis.type = 'datetime';
          chart_options.xAxis.tickPixelInterval = 150;
  
          chart_options.yAxis = new Object();
          chart_options.yAxis.title = new Object();
          chart_options.yAxis.title.text = "sensor";
  
          chart_options.tooltip = new Object();
          chart_options.tooltip.formatter = function () {
              return '&lt;b&gt;' + this.series.name + '&lt;/b&gt;&lt;br/&gt;' +
                      Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '&lt;br/&gt;' +
                      Highcharts.numberFormat(this.y, 2);
          };
  
          chart_options.legend = new Object();
          chart_options.legend.enabled = false;
  
          chart_options.exporting = new Object();
          chart_options.exporting.enabled = true;
  
          chart_options.series = new Array();
  
          my_chart = new Highcharts.Chart(chart_options);
  
      }
  
      function loadChartData() {
          $.ajax({
              url: 'http://localhost/luci/test2.php',
              dataType: "json",
              cache: false,
              success: function (response) {
                  var chart_data = response.chart_data;
                  if (FLAG_INITIALIZATION_DONE == 0) {
                      FLAG_INITIALIZATION_DONE = 1;
                      my_chart.setTitle({text: response.sensor_name});
                      $.each(chart_data, function (key, value) {
                          var curr = [];
                          curr.push(value.data[0]);
                          curr.push(value.data[1]);
                          console.log(curr);
                          my_chart.addSeries({
                              name: value.name,
                              data: curr
                          }, false);
                      });
                  } else {
                      $.each(chart_data, function (key, value) {
                          my_chart.series[key].addPoint([value.data[0], value.data[1]], true, true);
                      });
                  }
  
                  setTimeout(loadChartData, 4000);
  
              }, error: function (xhr, status, error) {
  
                  console.log("error");
  
              }, complete: function (xhr, status) {
  
                  console.log("complete");
  
              }
          });
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And the data that received from ajax call is like this :</p>
  
  <pre><code>{"sensor_name":"Temperature","chart_data":[{"name":"MSDM0","data":[1475605462,8]},{"name":"MSDM1","data":[1475605462,20]},{"name":"MSDM2","data":[1475605462,63]},{"name":"MSDM3","data":[1475605462,6]},{"name":"MSDM4","data":[1475605462,88]}]}
  </code></pre>