title: How to add multiple series dynamically and update its data dynamically
body: <p>my task is to add series dynamically  and keep updating their data, which is received by ajax calls.
  i know series can be added dynamically by declaring highchart funciton global. and using series.addseries() function , and also data can be updated by using settimout request to ajax call and updating points by using series.addpoint() function. </p>
  
  <p>i have done both the work separably. but when i combine both the technique, data is not added to highchart. i have done lot of research on this, and i am not finding reason for not adding the data. infact script hang the browser. 
  i have checked the series object, which show x-data and y-data are processed. only difference i find is isDirty field and isDirtydata field are set to true. dont know the reason.
  here is the full code</p>
  
  <pre><code>var serverUrl = 'http://'+window.location.hostname+':8000'
  Highcharts.setOptions({
      global: {
          useUTC: false
      }
  });
  data={}
  $(document).ready(function(){
  
      $(function () {
          console.log("highcharts")
           $('#first').highcharts({
                chart: {
                    type: 'spline',
                    //marginRight: 150,
                    marginBottom: 5,
                    events: {
                        load: requestData(data)
                            }
                },
                title: {
                    text: 'Server Monitroting Tool'
                },
                subtitle: {
                    text:  'Cpu usage, Memory Usage,Disk Usage,Mongo Usage'
                },
                xAxis: {
                type: 'datetime',
                categories: ['TIME'],
                      dateTimeLabelFormats : {
                      hour: '%I %p',
                      minute: '%I:%M %p'
                  }
                },
                yAxis:{
                    showEmpty:false
                },
  
                    legend:
                    {
                      backgroundColor: '#F5F5F5',
                      layout: 'horizontal',
                      floating: true,
                      align: 'left',
                      verticalAlign: 'bottom',
                      x: 60,
                      y: 9,
                      shadow: false,
                      border: 0,
                      borderRadius: 0,
                      borderWidth: 0
                },
                series: {}
            });
            });
       from_date=new Date().getTime()-60000;
  
      function requestData(data)
      {
          if(!data)
          {
              console.log("default ")
          }
          else
          {
          console.log("requesting")
          $.ajax({
              url:serverUrl+'/api/fetch_params/',
              type:'GET',
              data:data,
              success:function(response)
              {
               console.log("in success")
              //data = {'type':TypeOfParameter,'hostname':hostname,'sub-type':sub_type,'param':sub_type_parameter,'from-date':from_date}
              var id=data['sub-type']+data['param']
              var series = chart.get(id)
              shift = series.data.length &gt; 100; // shift if the series is longer than 300 (drop oldest point)
  
              response= $.parseJSON(response)
              var x=data['sub-type']
              all_data=response.response.data[x]
  
      //                console.log(new Date(from_date),'latest timestamp')
                  console.log(series)
              console.log("data",all_data)
  
              from_date=all_data[all_data.length-1][0]
  //            console.log(from_date)
  //                series.isDirty=false
  //                series.isDirtyData=false
              for (var i = 0; i &lt; all_data.length; i++)
              {
                  series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
              }
              console.log("series object",series)
      //                    chart.redraw();
                  console.log(" parameter",data)
                  data['from-date']=from_date
  
              console.log("data",series.data)
      //                console.log(chart)
              setTimeout(requestData(data), 10000);
              console.log("out of success")
              },
  
              cache:false,
              error:function()
              {
                  console.log("err")
  
              }
          });
          }
  
      }
  
      $.ajax({
          url:serverUrl+'/api/fetch_all_servers/',
          type:'GET',
          success:function(response){
              response = $.parseJSON(response)
              sd = response.response.all_servers
              $('input[name=select_menue]').optionTree(sd)
          },
          error:function(){
              console.log('error')
          }
      });
  
      $('.param-button').live('click',function(e){
          e.stopPropagation()
      })
  
      $('param-select').live('hover',function(){
         $(this).find('.type-select').show()
      });
  
      $('.final_value').live('change',function(){
          select_name = 'select_menue_'
          param_list = []
          var param=$('select[name="'+select_name+'"] option:selected').attr('value')
          while(param){
              param_list.push(param)
              select_name += '_'
              var param=$('select[name="'+select_name+'"] option:selected').attr('value')
          }
          console.log(param_list,"param_list")
          from_date=new Date().getTime()-300000  //5 minute data
          hostname=param_list[0]
          TypeOfParameter= param_list[1]
          sub_type_parameter=param_list[param_list.length-1]
          data = {'type':TypeOfParameter,'hostname':hostname,'param':sub_type_parameter,'from-date':from_date}
          var sub_type;
          if(param_list.length==4){
              sub_type=param_list[2]
              data['sub-type'] = sub_type
          }
          else
          {
              sub_type=sub_type_parameter
          }
  //        console.log(hostname,TypeOfParameter,sub_type,sub_type_parameter)
  
         data = {'type':TypeOfParameter,'hostname':hostname,'sub-type':sub_type,'param':sub_type_parameter,'from-date':from_date}
         requestData(data)
  
          $('#loadingmessage').show();  // show the loading message.
  
  
          chart = $('#first').highcharts();
  
          if(TypeOfParameter=='cpu')
          {
              console.log("adding axis")
               chart.addAxis({ // Primary yAxis
  
  
                            id:'Cpu_axis'+sub_type_parameter,
                            labels: {
                                formatter: function() {
                                    return this.value;
                                },
                                style: {
                                    color: '#89A54E'
                                    }
                            },
                            title: {
                                text: "core "+ sub_type+ " "+sub_type_parameter,
                                style: {
                                    color: '#89A54E'
                                }
                            },
  
              lineWidth: 1,
              lineColor: '#08F'
  
                        });
  
  
  
           console.log("adding series")
          chart.addSeries({
              id:sub_type+sub_type_parameter,
              name: "core "+sub_type+" "+sub_type_parameter,
              data :[],
  
              tooltip : {
                  valueSuffix: ' %'
                      },
                   yAxis:'Cpu_axis'+sub_type_parameter
                  })
              console.log("series out")
  
  
          }
          if(TypeOfParameter=='memory')
          {
              chart.addAxis    ({
              id:'memory'+sub_type_parameter,
              labels:{
                       formatter: function() {
                                    return this.value +'%';
                                },
                        style: {
                            color: '#89C54F'
                            }
                      },
  
              title: {
                  text:sub_type+" "+sub_type_parameter
              },
              lineWidth: .5,
              lineColor: '#08F',
              opposite: true
          });
          chart.addSeries({
              id:sub_type+sub_type_parameter,
              name: sub_type+'memory usage',
              data: [],
              tooltip: {
          valueSuffix: '%'
                  },
            yAxis:'memory'+sub_type_parameter
          });
          }
  
       if(TypeOfParameter=='disk')
          {
              chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'second',
                  defaultSeriesType: 'spline',
                  events: {
                      load: requestData
                  }
              },
              title: {
  
                  text: 'disk Usage'
              },
              xAxis: {
                  type: 'datetime',
                  tickPixelInterval: 150,
                  maxZoom: 20 * 1000
              },
              yAxis: {
                  minPadding: 0.2,
                  maxPadding: 0.2,
                  title: {
                      text: 'disk',
                      margin: 80
                  }
              },
              series: [{
                  id:sub_type+sub_type_parameter,
                  name: 'disk',
                  data: []
              }]
  });
          }
       if(TypeOfParameter=='db')
          {
              chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'second',
                  defaultSeriesType: 'spline',
                  events: {
                      load: requestData
                  }
              },
              title: {
                  text: 'mongo Usage'
              },
              xAxis: {
                  type: 'datetime',
                  tickPixelInterval: 150,
                  maxZoom: 20 * 1000
              },
              yAxis: {
                  minPadding: 0.2,
                  maxPadding: 0.2,
                  title: {
                      text: 'mmongo',
                      margin: 80
                  }
              },
              series: [{
                  id:sub_type+sub_type_parameter,
                  name: 'mongo',
                  data: []
              }]
  });
          }
       if(TypeOfParameter=='redis')
          {
              chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'second',
                  defaultSeriesType: 'spline',
                  events: {
                      load: requestData
                  }
              },
              title: {
                  text: 'redis Usage'
              },
              xAxis: {
                  type: 'datetime',
                  tickPixelInterval: 150,
                  maxZoom: 20 * 1000
              },
              yAxis: {
                  minPadding: 0.2,
                  maxPadding: 0.2,
                  title: {
                      text: 'redis',
                      margin: 80
                  }
              },
              series: [{
                  id:sub_type+sub_type_parameter,
                  name: 'redis',
                  data: []
              }]
      });
                      }
                  $('#loadingmessage').hide(); // hide the loading message
  
  
  
  
          }
              )
              });
  </code></pre>
  
  <p>i am stuck on this problem for quite a while. and still not able to figure out the solution.
  here is the full code <a href="http://jsfiddle.net/shivnarayans/L8nxN/" rel="nofollow">link</a>
  someone please please help. feeling frustrated ..:-(</p>