Set start and end of graph points dynamically - highcharts

Question

I am using highcharts and in which I have by default today entire day data.
I would like to set start and end points dynamically.
$(document).ready(function() {
$.ajax({
type:'POST',
dataType: 'JSON',
url: "http://localhost/data.php",
success: function(response) {
var pointstart=response.start_date;
console.info(response.start_date+" "+response.end_date);
$('#graph').highcharts({
chart: {
type: 'spline',
zoomType: 'x'
},
xAxis: {
type: 'datetime',
setExtremes: (response.start_date,response.end_date),
tickInterval: 3600 * 1000,
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
series:[{
pointStart : pointstart,
pointInterval : 3600 * 1000,
name: 'cc',
data: response.data
}]
});
},
cache: false
});
});
Problem: I am not able to see graph from 00:00:00 to 23:59:59. I have per minute single record. Above graph showing me data from 12:48:01 to 23:59:01.
I am using this test data.
Note: In some cases, I have multiple months data so values should need to set up dynamically based on ajax response start_date and end_date. By
Test data: http://dpaste.com/2QQQX49

Answer 1

You can set xAxis extremes using min and max properties (Check here https://api.highcharts.com/highcharts/xAxis.min, https://api.highcharts.com/highcharts/xAxis.max). By default they are undefined and value is automatically calculated. That's why your chart is rendered from 12:48:01 to 23:59:01 - appropriately to your data.
Online example: https://jsfiddle.net/wchmiel/sL13nhfq/
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000,
max: response.end_date,
min: response.start_date,
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
}
Another approach is to use setExtremes method on xAxis object (https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes). You can make it for e.g when load event occur:
Online example: https://jsfiddle.net/wchmiel/e42sx7pk/
chart: {
type: 'spline',
zoomType: 'x',
events: {
load: function() {
var chart = this;
chart.xAxis[0].setExtremes(response.start_date, response.end_date);
}
}
}