Reputation: 455
I'm working on updating a plugin to allow Highcharts to act as a Gantt chart. All works well except for when I set the extremes of the xaxis to a new start/end, and under certain circumstances, the charts are missing data in that range.
Some times, the charts will miss data for just a month month range, but when you change to two months, the data will magically appear that overlaps the two months. In the following example, I have it currently set to display all of the data between 5/1/2016 to 12/30/2016. When you change the start month to 6/1/2016, all of the data points are missing.
I believe that it revolves around the current date after more testing. However, I do not have any constraints when initializing HighCharts:
// THE CHART
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range study'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: '',
categories: ['1', '2', '3', '4', '5', '6', ,'7', '8']
},
series: [{
name: 'Project 1',
// pointPadding: 0,
// groupPadding: 0,
borderRadius: 5,
pointWidth: 10,
/*more data in jsfiddle*/
data: [{"label":"1","x":1462147200000,"x2":1464739200000,"y":1,"color":"#999"},{"label":"1","x":1464825600000,"x2":1467331200000,"y":1,"color":"#999"},{"label":"1","x":1467417600000,"x2":1470009600000,"y":1,"color":"#999"} ]
}]
});
At first I thought it would be a limitation constraint, but I'm able to display all data with no issues (remove default values from date inputs). Any thoughts? Please let me know if you need additional information.
Thanks in advance!
UPDATE
After further testing, it seems that data is still missing when using set extremes whether or not data is sorted, it's just not as extreme. I'm currently seeing missing data in the following instance:
I'm going to try and dig into HighCharts source to see what's going on, but my example above still reflects this issue.
Upvotes: 0
Views: 579
Reputation: 455
Turns out that I had to sort the data prior to initializing the chart.
Did this with following code:
data.sort(function(a, b) {
a = a.x2;
b = b.x2;
return a < b ? -1 : a > b ? 1 : 0;
});
Then passed data into the data attribute of the chart tantalizer. Updated jsfiddle to reflect this.
Upvotes: 1