Show spaces X-Axis - Highstocks
I am having a problem getting my data to show gaps when sending data on the X axis. What should be thought of as a space in a line is simply concatenated into one line, for example in this img the data goes from 4am to 9am from- for going out of the internet, but there are no gaps in the line. 
This is the code for the example I have at the moment.
$.getJSON('mkjson.php?device=<?echo $device_name;?>&sensor=<?echo $sensor_name;?>&pin=<?echo $pin;?>&user=<?echo $_SESSION['user'];?>', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
credits : {
enabled : false
},
chart : {
renderTo : 'container',
zoomType: 'x'
},
rangeSelector : {
selected : 1
},
title : {
text : 'Device:<?echo $device_name;?>'
},
subtitle : {
text : 'Sensor:<?echo $sensor_name;?>'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%m-%d<br/>%l:%M:%S%p',
minute: '%m-%d<br/>%l:%M%p',
hour: '%m-%d<br/>%l:%M%p',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis : {
min: <?echo $yaxis_min;?>,
max: <?echo $yaxis_max;?>,
title : {
text : '<?echo $unit?>'
},
<?if(isset($alert1) ||isset ($alert2)){?>
plotLines: [{
color: '#FF0000',
width: 1,
value: <?echo $alert1;?>
}, {
color: '#FF0000',
width: 1,
value: <?echo $alert2;?>
}]
<?}?>
},
rangeSelector : {
buttons : [{
type : 'minute',
count : 10,
text : '10m'
}, {
type : 'hour',
count : 1,
text : '1H'
},
{
type : 'day',
count : 1,
text : '1D'
},
{
type : 'day',
count : 3,
text : '3D'
}],
selected : 3,
inputEnabled : false
},
series : [{
name : '<?echo $unit;?>',
data : data,
tooltip: {
valueDecimals: 2,
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}},
dataGrouping: {
enabled: true
}
}]
});
});
Also this is an example from highstocks in jsfiddle that I am trying to use to see how they were able to accomplish it.
source to share
To add spaces in Highcharts, you must indicate when the end ends. For this you need to use null
as a data point, for example:
series: [{
data: [{
x: Date.UTC(2012,1,1,4,0,0,0),
y: 24
},{
x: Date.UTC(2012,1,1,4,0,0,1), //to create a gap
y: null
},{
x: Date.UTC(2012,1,1,9,0,0,0), //new data comes
y: 24
}]
}]
source to share
plotOptions.series.gapSize is the correct answer.
Determines when to display a gap in the graph. A gap size of 5 means that if the distance between two points is more than five times the two nearest points, the graph will be split
For hourly time series, I use 6. When data stops for more than 6 hours.
plotOptions: {
series: {
gapSize: 6,
. . .
source to share
If you switch to a column plot (or maybe a scatter plot), you will see that individual data points are better and Highstock will not associate them with lines. Paweł stated that Highstock does not know that any data is missing - it is designed to seamlessly plug in the time series data that you provide it.
source to share