title: Highcharts Error #15 with wrong data series displayed
body: <p>i'm getting weird behavior with my chart.
  Basically, it's a dynamically update from mysql db by jsonp callback. it's a 5 series data, one spline type and 4 column type.
  First of all, when i load the chart nothing is being shown.
  By second, if i select a range with the first or the last of the data series (specifically the today's data or the first day of the series) i get a wrong result with huge values in yaxis and the usual Highcharts #15 error.
  i've checked my json using the data series in this jsfiddle : <a href="http://jsfiddle.net/4knAX/2/" rel="nofollow noreferrer">http://jsfiddle.net/4knAX/2/</a> and everthing is fine (but the aftersetextremes function is disabled) .
  At last, when i select a range of hours, with php output of 15 minutes values, i get only daily values instead.
  i've regularly checked the json with jsfiddle and the php code my i cannot get any usable answer from them.
  there is my js code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;link rel="shortcut icon" href="./favicon.ico" &gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Telegestione Elektra&lt;/title&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;  
          &lt;script src="http://code.highcharts.com/stock/highstock.js"&gt;&lt;/script&gt;
          &lt;script src="./js/exporting.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
          $(function () {
          Highcharts.setOptions({
                              global: {
                                          useUTC: false
                                      }
                              });
          $.getJSON('grafico_nuovo.php?callback=?', function(data) {
                  data = [].concat(data, [[Date.UTC(2013, 7, 14, 19, 59), null, null, null, null,null]]);
                  val1 = [];val2 = [];val3 = [];val4 = [];val5 = [];
                  $.each(data, function (key, value)   {
                      val1.push([value[0], value[1]]);
                      val2.push([value[0], value[2]]);
                      val3.push([value[0], value[3]]);
                      val4.push([value[0], value[4]]);
                      val5.push([value[0], value[5]]);
                                                      });
      $('#container').highcharts('StockChart', {
          chart: {
              //type: 'spline',
              //zoomType: 'xy'
          },
  
          navigator: {
              adaptToUpdatedData: false,
              series: {
                  data: val1
              }
          },
  
          scrollbar: {
              liveRedraw: false
          },
  
          title: {
              text: 'AAPL history by the minute from 1998 to 2011'
          },
  
          subtitle: {
              text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
          },
  
           rangeSelector : {
                  buttons: [{
                      type: 'day',
                      count: 1,
                      text: '1d'
                  }, {
                      type: 'week',
                      count: 1,
                      text: '1w'
                  },{
                      type: 'month',
                      count: 1,
                      text: '1m'
                  },              {
                      type: 'year',
                      count: 1,
                      text: '1y'
                  }, {
                      type: 'all',
                      text: 'All'
                  }],
                  inputEnabled: true, // it supports only days
                  selected : 1 // day
              },
  
         xAxis: {         type:"datetime",                        
                                      minRange: 3600 * 1000, // an hour
                                      dateTimeLabelFormats: { minute: '%H:%M', day: '%A. %e/%m' },
                                      labels: {
                                      rotation: 330,
                                      y:20,
                                      staggerLines: 1,
                                                  },
                                      events : {
                                          afterSetExtremes : afterSetExtremes
                                              },              
                                      },
          yAxis: [{ // Primary yAxis
                                          labels: {
                                              format: '{value}°C',
                                              style: {
                                                  color: '#89A54E'
                                              }
                                          },
                                          title: {
                                              text: 'Temperature',
                                              style: {
                                                  color: '#89A54E'
                                              }
                                          }
                                      }, { // Secondary yAxis
                                          title: {
                                              text: 'Consumo',
                                              style: {
                                                  color: '#4572A7'
                                              }
                                          },
                                          labels: {
                                              format: '{value} Kw',
                                              style: {
                                                  color: '#4572A7'
                                              }
                                          },
                                          opposite: true
                                      }],
  
          series:[{           name:'Test',
                              type:'spline',
                              tooltip: {
                                              shared:true,
                                                  valueSuffix: ' °C',
                                                  valueDecimals: 2
                                                      },
                              yAxis: 0,
                              data:val1
                          },
                          {   name:'kwhg',
                              type:'column',
                              yAxis: 1,
                              tooltip: {
                                              shared:true,
                                                  valueSuffix: ' Kwh',
                                                  valueDecimals: 2
                                                      },
                              data:val2
                          },
                          {   name:'kwhc',
                              yAxis: 1,
                              type:'column',
                              tooltip: {
                                              shared:true,
                                                  valueSuffix: ' Kwh',
                                                  valueDecimals: 2
                                                      },
                              data:val3
                          },
                          {   name:'kwhi',
                              yAxis: 1,
                              type:'column',
                              tooltip: {
                                              shared:true,
                                                  valueSuffix: ' Kwh',
                                                  valueDecimals: 2
                                                      },
                              data:val4
                          },
                          {   name:'kwhfm',
                              yAxis: 1,
                              type:'column',
                              tooltip: {
                                              shared:true,
                                                  valueSuffix: ' Kwh',
                                                  valueDecimals: 2 
                                                      },
                              data:val5
                          },
                          ]
      }, function (chart) {
              chart.showLoading('Loading data from server2...');
              chart.series[0].setData(val1);
              chart.series[1].setData([]);
              chart.series[2].setData([]);
              chart.series[3].setData([]);
              chart.series[4].setData([]);    
              chart.hideLoading();
                          });
      });
  });
  function afterSetExtremes(e) {
  
              var currentExtremes = this.getExtremes(),
              range = e.max - e.min,          
              chart = $('#container').highcharts();
              chart.showLoading('Loading data from server3...');  
              //chart.xAxis[0].setExtremes(Date.UTC(2014, 0, 2), Date.UTC(2014, 0, 8));
              $.getJSON('grafico_nuovo.php?start='+ Math.round(e.min) +
                          '&amp;end='+ Math.round(e.max) +'&amp;callback=?', function(data)   {
                  chart.series[0].setData([]);
                  chart.series[1].setData([]);
                  chart.series[2].setData([]);
                  chart.series[3].setData([]);
                  chart.series[4].setData([]);
                  $.each(data, function(key,value)    {
                      val1.push([value[0], value[1]]);
                      val2.push([value[0], value[2]]);
                      val3.push([value[0], value[3]]);
                      val4.push([value[0], value[4]]);
                      val5.push([value[0], value[5]]);
                                                      });
                              chart.series[0].setData(val1);
                              chart.series[1].setData(val2);
                              chart.series[2].setData(val3);
                              chart.series[3].setData(val4);
                              chart.series[4].setData(val5);
                              chart.hideLoading();    });
                              };
  &lt;/script&gt;
          &lt;/head&gt;
      &lt;body&gt;
  &lt;div id="container" style="min-width: 210px; height: 550px; margin: 0 auto; background: url(./img/257.gif);background-repeat:no-repeat;background-position:center"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my php too:</p>
  
  <pre><code>&lt;?php
  /**
  * This file loads content from four different data tables depending on the required time range.
  * The stockquotes table containts 1.7 million data points. Since we are loading OHLC data and
  * MySQL has no concept of first and last in a data group, we have extracted groups by hours, days
  * and months into separate tables. If we were to load a line series with average data, we wouldn't
  * have to do this.
  *
  * @param callback {String} The name of the JSONP callback to pad the JSON within
  * @param start {Integer} The starting point in JS time
  * @param end {Integer} The ending point in JS time
  */
  
  // get the parameters
  
  $callback = $_GET['callback'];
  if (!preg_match('/^[a-zA-Z0-9_]+$/', $callback)) {
          die('Invalid callback name');
  }
  
  $start = $_GET['start'];
  if ($start &amp;&amp; !preg_match('/^[0-9]+$/', $start)) {
          die("Invalid start parameter: $start");
  }
  if (!$start) $start = (time() - (365 * 24 * 60 * 60)) * 1000;
  $end = $_GET['end'];
  if ($end &amp;&amp; !preg_match('/^[0-9]+$/', $end)) {
          die("Invalid end parameter: $end");
  }
  if (!$end) $end = time() * 1000;
  
  // connect to MySQL
  $link = mysqli_connect('localhost:3306', 'root', 'elektra','telegestione');
  // set UTC+1 time
  mysql_query("SET time_zone = '+01:00'");
  
  // set some utility variables
  $range = $end - $start;
  //$startTime = gmstrftime('%Y-%m-%d %H:%M:%S', $start / 1000);
  $startTime= date('Y-m-d H:i:s', strtotime(gmstrftime('%Y-%m-%d %H:%M:%S', $start / 1000)));
  //$endTime = gmstrftime('%Y-%m-%d %H:%M:%S', $end / 1000);
  $endTime= date('Y-m-d H:i:s', strtotime(gmstrftime('%Y-%m-%d %H:%M:%S', $end / 1000) ));
  
  // find the right table
  // two days range loads minute data
  if ($range &lt; 3 * 24 * 3600 * 1000) {
          if (!$link)     {
                          die('Could not connect: ' . mysqli_error());};  
                          //echo "minute data2" ;
              $result = mysqli_query($link," select 1000*unix_timestamp(q1.time) as time, (q1.kwg) as kwhg, (q1.kwc) as kwhc, (q1.kwi) as kwhi, (q1.kwfm) as kwhfm, (q2.test) as test from 
              (select dataora as time, kwg, kwc, kwi, kwfm from misure where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' ) as q1 
                  JOIN 
              (select dataora, (Test) as test from temperature where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' ) as q2 
                  ON q1.time=q2.dataora");
  
   //one week range loads hourly data
  } elseif ($range &lt; 7 * 24 * 3600 * 1000) {
          if (!$link)     {
              die('Could not connect: ' . mysqli_error());};  
              //echo "hourly data1" ;
      $result = mysqli_query($link,"select 1000*unix_timestamp(q1.time) as time, q1.kwhg, q1.kwhc, q1.kwhi, q1.kwhfm, q2.test from (
  SELECT
        (t1.dt) AS time,(case
       when t1.value&gt;t2.value AND t2.value&gt;0
            then abs(t1.value - t2.value)
       when t1.value&gt;t2.value AND t2.value=0
            then t2.value
            else t1.value END)kwhg, 
       (case
       when t1.value1&gt;t2.value1 AND t2.value1&gt;0
            then abs(t1.value1 - t2.value1)
       when t1.value1&gt;t2.value1 AND t2.value1=0
            then t2.value1
       when t1.value1=t2.value1 AND t1.value1&gt;0 
          then abs(t1.value1 - t2.value1)
        else 0 END) kwhc, 
        (case
       when t1.value2&gt;t2.value2 AND t2.value2&gt;0
            then abs(t1.value2 - t2.value2)
       when t1.value2&gt;t2.value2 AND t2.value2=0
            then t2.value2
       when t1.value2=t2.value2 AND t1.value2&gt;0 
          then abs(t1.value2 - t2.value2)
        else 0 END)kwhi,
      (case
       when t1.value3&gt;t2.value3 AND t2.value3&gt;0
            then abs(t1.value3 - t2.value3)
       when t1.value3&gt;t2.value3 AND t2.value3=0
            then t2.value3
       when t1.value3=t2.value3 AND t1.value3&gt;0 
          then abs(t1.value3 - t2.value3)
        else 0 END) kwhfm
      FROM 
          (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dt),hour(dt)) t1
          JOIN
          (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dt),hour(dt)) t2
          on t1.dt = t2.dt + interval 1 hour) as q1
  JOIN
      (select dataora, AVG(Test) as test from temperature where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dataora),hour(dataora))  as q2
      ON q1.time=q2.dataora");
  
  // one month range loads hourly data
  } elseif ($range &lt; 31 * 24 * 3600 * 1000) {
          if (!$link)     {
              die('Could not connect: ' . mysqli_error());};  
              //echo "hourly data2" ;
      $result = mysqli_query($link,"select 1000*unix_timestamp(q1.time) as time, q1.kwhg, q1.kwhc, q1.kwhi, q1.kwhfm, q2.test from (
  SELECT
        (t1.dt) AS time,(case
       when t1.value&gt;t2.value AND t2.value&gt;0
            then abs(t1.value - t2.value)
       when t1.value&gt;t2.value AND t2.value=0
            then t2.value
            else t1.value END)kwhg, 
       (case
       when t1.value1&gt;t2.value1 AND t2.value1&gt;0
            then abs(t1.value1 - t2.value1)
       when t1.value1&gt;t2.value1 AND t2.value1=0
            then t2.value1
       when t1.value1=t2.value1 AND t1.value1&gt;0 
          then abs(t1.value1 - t2.value1)
        else 0 END) kwhc, 
        (case
       when t1.value2&gt;t2.value2 AND t2.value2&gt;0
            then abs(t1.value2 - t2.value2)
       when t1.value2&gt;t2.value2 AND t2.value2=0
            then t2.value2
       when t1.value2=t2.value2 AND t1.value2&gt;0 
          then abs(t1.value2 - t2.value2)
        else 0 END)kwhi,
      (case
       when t1.value3&gt;t2.value3 AND t2.value3&gt;0
            then abs(t1.value3 - t2.value3)
       when t1.value3&gt;t2.value3 AND t2.value3=0
            then t2.value3
       when t1.value3=t2.value3 AND t1.value3&gt;0 
          then abs(t1.value3 - t2.value3)
        else 0 END) kwhfm
      FROM 
          (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dt),hour(dt)) t1
          JOIN
          (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dt),hour(dt)) t2
          on t1.dt = t2.dt + interval 1 hour) as q1
  JOIN
      (select dataora, AVG(Test) as test from temperature where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dataora),hour(dataora))  as q2
      ON q1.time=q2.dataora");
  
  // one year range loads daily data
  } elseif ($range &lt; 15 * 31 * 24 * 3600 * 1000) {
          if (!$link)     {
              die('Could not connect: ' . mysqli_error());};  
              //echo "daily data2" ;
      $result = mysqli_query($link,"select  1000*unix_timestamp(q1.time) as time, q1.kwhg, q1.kwhc, q1.kwhi, q1.kwhfm, q2.test from (
  SELECT
        (t1.dt) AS time,(case
       when t1.value&gt;t2.value AND t2.value&gt;0
            then abs(t1.value - t2.value)
       when t1.value&gt;t2.value AND t2.value=0
            then t2.value
            else t1.value END)kwhg, 
       (case
       when t1.value1&gt;t2.value1 AND t2.value1&gt;0
            then abs(t1.value1 - t2.value1)
       when t1.value1&gt;t2.value1 AND t2.value1=0
            then t2.value1
       when t1.value1=t2.value1 AND t1.value1&gt;0 
          then abs(t1.value1 - t2.value1)
        else 0 END) kwhc, 
        (case
       when t1.value2&gt;t2.value2 AND t2.value2&gt;0
            then abs(t1.value2 - t2.value2)
       when t1.value2&gt;t2.value2 AND t2.value2=0
            then t2.value2
       when t1.value2=t2.value2 AND t1.value2&gt;0 
          then abs(t1.value2 - t2.value2)
        else 0 END)kwhi,
      (case
       when t1.value3&gt;t2.value3 AND t2.value3&gt;0
            then abs(t1.value3 - t2.value3)
       when t1.value3&gt;t2.value3 AND t2.value3=0
            then t2.value3
       when t1.value3=t2.value3 AND t1.value3&gt;0 
          then abs(t1.value3 - t2.value3)
        else 0 END) kwhfm
      FROM 
          (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dt)) t1
          JOIN
          (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dt)) t2
          on t1.dt = t2.dt + interval 1 day) as q1
  JOIN
      (select dataora, AVG(Test) as test from temperature where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dataora))  as q2
      ON q1.time=q2.dataora");
  
  // greater range loads monthly data
  } else {
          if (!$link)     {
              die('Could not connect: ' . mysqli_error());};
                  //echo "monthly data2" ;
      $result = mysqli_query($link,"select 1000*unix_timestamp(q1.time) as time, q1.kwhg, q1.kwhc, q1.kwhi, q1.kwhfm, q2.test from (
  SELECT
        (t1.dt) AS time,(case
       when t1.value&gt;t2.value AND t2.value&gt;0
            then abs(t1.value - t2.value)
       when t1.value&gt;t2.value AND t2.value=0
            then t2.value
            else t1.value END)kwhg, 
       (case
       when t1.value1&gt;t2.value1 AND t2.value1&gt;0
            then abs(t1.value1 - t2.value1)
       when t1.value1&gt;t2.value1 AND t2.value1=0
            then t2.value1
       when t1.value1=t2.value1 AND t1.value1&gt;0 
          then abs(t1.value1 - t2.value1)
        else 0 END) kwhc, 
        (case
       when t1.value2&gt;t2.value2 AND t2.value2&gt;0
            then abs(t1.value2 - t2.value2)
       when t1.value2&gt;t2.value2 AND t2.value2=0
            then t2.value2
       when t1.value2=t2.value2 AND t1.value2&gt;0 
          then abs(t1.value2 - t2.value2)
        else 0 END)kwhi,
      (case
       when t1.value3&gt;t2.value3 AND t2.value3&gt;0
            then abs(t1.value3 - t2.value3)
       when t1.value3&gt;t2.value3 AND t2.value3=0
            then t2.value3
       when t1.value3=t2.value3 AND t1.value3&gt;0 
          then abs(t1.value3 - t2.value3)
        else 0 END) kwhfm
      FROM 
          (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dt),hour(dt)) t1
          JOIN
          (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dt),hour(dt)) t2
          on t1.dt = t2.dt + interval 1 month) as q1
  JOIN
      (select dataora, AVG(Test) as test from temperature where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dataora),hour(dataora))  as q2
      ON q1.time=q2.dataora");
  };
          $rowst = array();
          while ($row = mysqli_fetch_assoc($result)) {
              extract($row);
              $rowst[] = "[$time,$test,$kwhg,$kwhc,$kwhi,$kwhfm]";
                                                      }
  // print it
  header('Content-Type: text/javascript');
  echo "/* console.log(' range = $range, start = $start, end = $end, startTime = $startTime, endTime = $endTime '); */";
  echo $callback ."([\n" . join(",\n", $rowst) ."\n]);";
  
  ?&gt;
  </code></pre>
  
  <p>i cannot understand why jsfiddle show me the correct charts, but my browser cannot do the same thing with the same code.
  Thanks in advance
  ps: this is my test page: 79.28.203.203/telegestione/grafico_nuovo.html and this is the chart resulted from my code<img src="https://i.stack.imgur.com/Jl0yA.png" alt="enter image description here">
  and with column series: <img src="https://i.stack.imgur.com/6DdlY.png" alt="enter image description here"></p>