1

Adapted from the README.md file in https://github.com/tevye/HighchartsXAxisSpecificationProblem:

Three example Highstocks HTML files, one working, one broken by making the data timestamps irregular, and the last shows a failed attempt to fix are in the github repository.

Background

The working version is a slightly modified version of the example Emerson entered for help with a javascript console error 15 (Sorting Scatter Highstock Chart with Multiple Series). Ignoring the console error, we want to the Highstocks navigator on a scatter plot with irregular data timestamps. The working version included in the repository has a large 2D-array 'points' with regular time intervals. The xaxis declaration has a 'data' definition mapping values from 'points'.

data: points.map(function(point) {
  return [point[2]];
}),

The only changes in the broken version is a set of arbitrary deletes from the 'points' array to force the timestamps to be sufficiently irregular to break the date inference provided by Highcharts. (If you delete just a few lines from the working copy's 'points' 2D-array, it still works. Delete a few and it still works...which is cool).

In the repository's screen grab 'broken_badTickArray.html.png', you can see the dates are Dec 31, 1969 to Jan 1, 1970 and the tick array data is indecipherable.

The attempted fix (version uploaded only 'representative' of several tries) Starting with the broken version, several attempts were made to overcome the erroneous date range problem. The screen grab 'works_goodTickArray.html.png' shows that Highcharts boiled down the large number of timestamps to a small set of midnight day boundaries. In the attempted fix version, the following code generators an explicit set of timestamps that are then given as the value for the x-axis data.

var xtd = [];
var apr222017 = 1492819200000;
var may162017 = 1494892800000;
var x = 0;
do {
    xtd[x] = apr222017 + (x * 86400000);
    x++
} while ((apr222017 + (x * 86400000)) < may162017);

When that didn't work, attempted to set 'floor' and 'ceiling'...

// ...
data: xtd,
floor: apr222017,
ceiling: may162017,
// ...

Having no luck with that added...

min: apr222017,
max: may162017,

which didn't help. Nor did removng the floor and ceiling definitions and going only with min/max.

Adding the following also failed:

tickPositioner: function() {
    return xtd;
},
tevye
  • 47
  • 6
  • Honestly, I'm confused :) What exactly do you want to achieve? Just to be on the same page: `x` values should be timestamps, to correctly connect to navigator and range selector. What you refer as "broken" is exactly as it should be displayed with a given dataset. Maybe you want to use two separate sets, one to display "y" and one to display "x" (where "x" is actually "y")? Like this: http://jsfiddle.net/BlackLabel/rg225j2w/2/ Or maybe you want to display data as bubble-series? Demo: http://jsfiddle.net/BlackLabel/rg225j2w/3/ – Paweł Fus Jan 24 '18 at 13:57

1 Answers1

2

It's failing when the number of data points are less than 1001.

What seems to be happening here is that "turbo" mode kicks in by default at 1000 entries and seems to be interpreting the data correctly once in that mode.

set turboThreshold to 1 for "axis 0"

{
xAxis: 0,
turboThreshold: 1,
//min:0,
//max: 100,
data: points.map(function(point) {
  return [point[0]];//, point[1]];
}),
showInNavigator: true,
enableMouseTracking: false,
color: '#FF0000',
showInLegend: false
}

],

StackOverflow Question

Referenced within the issues space for highcharts / albeit not an issue

Emerson
  • 270
  • 2
  • 4
  • 11
  • Adding 'turboThreshold: 1' to attemptToFixFailed.html in several different combinations with 'data | floor/ceiling | min/max' still failed. : ( – tevye Jan 24 '18 at 12:55
  • Sorry, playing with the wrong file on github. Your additional functions and changes from "works.html" are breaking it. The "works.html" actually breaks when you reduce the number of data points to 1000 - unless you add the turboThreshold: 1 parameter mentioned above. – Emerson Jan 24 '18 at 15:27