title: "TypeError: firstAxis.options.plotBands is undefined" while using highchart
body: <p>I am creating a bar chart as well as a gauge chart using highchart.js. and I need to refresh the data after certain time interval. My graphs are coming as required when I hit the URl but when I refresh it using</p>
  
  <pre><code> setInterval(function(){ 
          //code goes here that will be run every 5 seconds.     
          getDailyProduction();
          getEnergyProduction();
         // getOperationCapacity();
      }, 5000);
  </code></pre>
  
  <p>after few seconds I am getting "TypeError: firstAxis.options.plotBands is undefined" error. </p>
  
  <p>Below is the code I have written for bar graph: </p>
  
  <pre><code>createBarGraph = function (data, name, title){
      $(function () {
          var chart;
          $(document).ready(function() {
              chart = new Highcharts.Chart({
                  chart: {
                      renderTo: 'energyProductionGraph',
                      type: 'column'
                  },
                  title: {
                      text: 'Energy Production (WEEK)'
                  },
                  xAxis: {
                      title: {
                          text: 'X Axis Variables'
                      }
                  },
                  yAxis: {
                      min: 0,
                      title: {
                          text: 'Y Axis Variables'
                      }
                  },
                  legend: {
                      enabled: false
                  },
                  tooltip: {
                      formatter: function() {
                          return ''+
                          this.x +': '+ this.y +' mm';
                      }
                  },
                  credits: {
                      enabled: false
                  },
                  exporting: {
                      enabled: false
                  },
                  plotOptions: {
                      column: {
                          pointPadding: 0.2,
                          borderWidth: 0
                      }
                  },
                  series: [{
                      name: 'Energy Production',
                      color: '#81BEF7',
                      data: data
  
                  }]
              });
          });
  
      });
  }
  </code></pre>
  
  <p>Below is the code for my gauge graph</p>
  
  <pre><code>createGaugeGraph = function (data, name, title){
      $(function () {
          $(document).ready(function() {
              var chart = new Highcharts.Chart({
                  chart: {
                      renderTo: 'operatingCapacityGraph',
                      type: 'gauge',
                      alignTicks: false,
                      plotBackgroundColor: null,
                      plotBackgroundImage: null,
                      plotBorderWidth: 0,
                      plotShadow: false
                  },
  
                  title: {
                      text: 'Operating Capacity %'
                  },
  
                  pane: {
                      startAngle: -90,
                      endAngle: 90,
  
                      background: [{
                          backgroundColor: {
                              linearGradient: {
                                  x1: 0, 
                                  y1: 0, 
                                  x2: 0, 
                                  y2: 1
                              },
                              stops: [
                              [0, '#FFF'],
                              [1, '#333']
                              ]
                          },
                          borderWidth: 0,
                          outerRadius: '109%'
                      }, {
                          backgroundColor: {
                              linearGradient: {
                                  x1: 0, 
                                  y1: 0, 
                                  x2: 0, 
                                  y2: 1
                              },
                              stops: [
                              [0, '#333'],
                              [1, '#FFF']
                              ]
                          },
                          borderWidth: 1,
                          outerRadius: '107%'
                      }, {
                          backgroundColor: {
                              linearGradient: {
                                  x1: 0, 
                                  y1: 0, 
                                  x2: 0, 
                                  y2: 1
                              },
                              stops: [
                              [0, '#666'],
                              [1, '#0c0c0c']
                              ]
                          },
                          borderWidth: 1,
                          outerRadius: '107%'
                      }, {
                          backgroundColor: '#DDD',
                          borderWidth: 1,
                          outerRadius: '105%',
                          innerRadius: '104%'
                      }]
                  },            
                  plotOptions: {
                      gauge: {
                          dial: {
                              baseWidth: 4,
                              backgroundColor: '#C33',
                              borderColor: '#900',
                              borderWidth: 1,
                              rearLength: 20,
                              baseLength: 10,
                              radius: 80
                          }                
                      }
                  },
  
                  yAxis: [{
                      min: 0,
                      max: 100,
                      lineColor: '#fff',
                      tickColor: '#fff',
                      minorTickColor: '#fff',
                      minorTickPosition: 'inside',
                      tickLength: 10,
                      tickWidth: 4,
                      minorTickLength: 5,
                      offset: -2,
                      lineWidth: 2,
                      labels: {
                          distance: -25,
                          rotation: 0,
                          style: {
                              color: '#fff',
                              size: '120%',
                              fontWeight: 'bold'
                          }
                      },
                      endOnTick: false,
                      plotBands: [{
                          from: 0,
                          to: 100,
                          innerRadius: '40%',
                          outerRadius: '65%',
                          color: {
                              linearGradient: {
                                  x1: 0, 
                                  y1: 0, 
                                  x2: 0, 
                                  y2: 1
                              },
                              stops: [
                              [0, '#fff'],
                              [1, '#fff']
                              ]
                              } // white
                      }, 
                      {
                          from: 0,
                          to: 50,
                          innerRadius: '45%',
                          outerRadius: '60%',
                          color: '#000' // black
                      }]
                  }],
  
                  series: [{
                      name: 'Value',
                      data: [50],
                      dataLabels: {
                          formatter: function () {
                              var kmh = this.y;
                              return '&lt;span style="color:#339"&gt;'+ kmh + '%&lt;/span&gt;';
                          },
                          backgroundColor: {
                              linearGradient: {
                                  x1: 0,
                                  y1: 0,
                                  x2: 0,
                                  y2: 1
                              },
                              stops: [
                              [0, '#DDD'],
                              [1, '#FFF']
                              ]
                          },
                          offset: 10
                      },
                      tooltip: {
                          valueSuffix:' %'
                      }
                  }]
  
              }
  
          );
          });
      });
  }
  </code></pre>
  
  <p>Below is the file where I am calling these graph functions</p>
  
  <pre><code>$(document).ready(function() {
  
      getDailyProduction();
      getEnergyProduction();
    getOperationCapacity();
  
      // Put all your code here
      function getDailyProduction(){
  
          // setting vaiables for Daily prodution graph
          var data= [1,2,3,4,5,6,7,8,9,2,3,4,3,2,3,4,5,12,54,34];
          var title ='Daily Production (KW)';
          var name='Daily Production';
          createAreaGraph(data, name, title);
      }
      function getEnergyProduction(){
          // setting variables for Energy production
          var last7daysProduced = [1,2,3,4,5,6,7];
          var title1 ='Energy Production (KW)';
          var name1='Energy Production';
          createBarGraph(last7daysProduced, name1, title1);
      }
      function getOperationCapacity(){
          // setting variables for Operating Capacity
          var operatingCapacity = 62;
          var title2 ='Operating Capacity %';
          var name2='Operating Capacity';
          createGaugeGraph(operatingCapacity, name2, title2);
      }
  
  
  
      setInterval(function(){ 
          //code goes here that will be run every 5 seconds.     
          getDailyProduction();
          getEnergyProduction();
          getOperationCapacity();
      }, 5000);
  </code></pre>
  
  <p>and also I am including the required libraries in the following sequence</p>
  
  <pre><code>    &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;public/js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;public/js/highcharts.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;public/js/highcharts-more.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;public/js/exporting.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Please help me to get the solution. also let me know if any thing else is required</p>