title: Highcharts : Change spline chart color dynamically
body: <p>I am using Highcharts spline chart to plot data dynamically from MySQL DB. </p>
  
  <p>Graph displays response time of websites which considers http status code of websites too.</p>
  
  <p>Whenever http status code are 500, 404, 400 (for example) display graph in red and when http status code changes to anything else (say 200) display in blue. </p>
  
  <p>Graph starts with 10 minutes past data from DB, fetches data every minute through AJAX call and plot dynamically. </p>
  
  <pre><code>Graph color changes to red but continues plotting with the same colour even when it gets status code not in http_code_arr[].
  
  &lt;script&gt;
  
  function requestData() 
  {
      $.ajax({
          url: 'get_hourly_data.php',
          type: "GET",
          datatype: "json",
          data: 'site_id=' + site_id,
          success: function(data) 
          {   console.log(data); (Posted below)
              var http_code_arr = [500,404,400];
              for($i=0;$i&lt;data.length;$i++)
              {
                           // Change color of chart to red whenever http_code (data[$i][2]) is mentioned in http_code_arr[]. 
              if(jQuery.inArray(data[$i][2], http_code_arr) &gt; -1)
              {
  
                  chart.series[0].setData(data);
                  chart.series[0].color = "#FF0000";
                  chart.series[0].graph.attr({ stroke: '#FF0000' });
              }
              else
              {
                  chart.series[0].setData(data); 
                  chart.series[0].color = "#3BBEE3";
                      chart.series[0].graph.attr({ stroke: '#3BBEE3' });
              }
              }       
  
          },  
           cache: false       
          });
      }   
  
      $(document).ready(function() {
          Highcharts.setOptions({
              global: {
                  useUTC: false
              }
          });
      chart = new Highcharts.Chart({
           chart: {
              renderTo: 'graph',
              type: 'spline',
              events: {
                  load: requestData
              }
           },
           title: {
              text: 'Monitoring'
           },
           xAxis: {
              type: 'datetime',
                  tickPixelInterval: 150,
                  maxZoom: 20 * 1000
           },
           yAxis: {
              minPadding: 0.2,
                  maxPadding: 0.2,
                  title: {
                      text: 'Response time (ms)',
                      margin: 80
                  }
           },
           series: [{
              name: 'Time',
              data: [],
           }]
        });
        });
      &lt;/script&gt;
  
  Return json value from get_hourly_data.php:
  
  [[1359008687000,0.32605385780334,200],[1359008691000,0.31433510780334,200],[1359008694000,0.30737400054932,200],[1359008707000,0.30876302719116,200]]
  
  consoloe.log(data):
  
  [Array[3] 0: 1359009380000
  1: 0.3274929523468
  2: 404
  length: 3
  __proto__: Array[0]
  , 
  Array[3]
  0: 1359009383000
  1: 0.31776595115662
  2: 200
  length: 3
  __proto__: Array[0]
  , 
  Array[3]
  0: 1359009385000
  1: 0.30725002288818
  2: 404
  length: 3
  __proto__: Array[0]
  , 
  Array[3]
  0: 1359009388000
  1: 0.3050639629364
  2: 200
  length: 3
  __proto__: Array[0]
  ] 
  
  
  
  Could anyone please give me a hand?
  </code></pre>