Question

Here is a picture with my problem. After the chart is drawn the xAxxis is exactly 1 one to late ( if it is 12:20 -> in the chart it is 11:20 ) … but when i zoom in the chart and after reset zoom it is normal!

What could be the problem ?

Here is a picture with the problem

var chart;
// draw chart
$(function(){   
   $.getJSON('data.php?name=<?php echo $name; ?>&mysqltablename=<?php echo       $mysqltablename; ?>&datatabletyp=<?php echo $datatabletyp ?>', 
   function(data) {  
   chart = new Highcharts.Chart
   ({
  chart: { renderTo: '<?php echo $tabname; ?>', zoomType: 'x',  type: 'line', width:800 },   
  credits: { enabled: false   },
  plotOptions: {  series: { marker : { enabled: false, states: {  hover: { enabled: true  }  }   } }   },
  xAxis: { type: 'datetime' },                             
  title: { text:' '     },   
  yAxis: { title: { text: ''  } },
  legend: { enabled: false },
  series: [{ name: '<?php echo $tabname; ?>', data: data }], 
  tooltip: { valueDecimals: 2 } ,
   });
   Highcharts.setOptions({ global: { useUTC: false } });
   Highcharts.numberFormat(this.y, 2, '.', ',');
});
});

Answer 1

I had a similar problem with HighCharts.

The Axis Extremes are guessed on the first load so you will have to set the Extremes of the Chart and redraw.

This should work:

var chart = new Highcharts.Chart(opts, function(chart) {
    if (min && max) {
        chart.xAxis[0].setExtremes(min, max, true, true);
    }
});

http://api.highcharts.com/highcharts#Axis.setExtremes%28%29

Also you should setOptions before creating the chart

Edit: Now that I think about it that could be the real problem:

The Chart is created with useUTC = true and because of that the Dateformatting is off one hour. On the Zoom the Chart is redrawn and gets the updated Settings.
So be sure to move your global settings to the top 🙂

http://api.highcharts.com/highcharts#Highcharts.setOptions%28%29