Having an issue where we're trying to show a gap in data when nulls are present in the data set with dataGrouping enabled on the Highstock chart.
If the data set is small, like in the images below, leaving dataGrouping disabled isn't an issue.
The problem comes in when we have a very large data set, 2 days worth of data x 4 series = 690,000+ data points; the data takes forever to load.
If we leave dataGrouping enabled, then the gap in the data disappears.
Is it possible to get keep dataGrouping enabled but also show the gap for nulls?
The problem is caused by your data - all of the null values are strings:
200: (2) [1569876448000, "null"]
201: (2) [1569876449000, "null"]
202: (2) [1569876450000, "null"]
203: (2) [1569876451000, "null"]
204: (2) [1569876452000, "null"]
205: (2) [1569876453000, "null"]
206: (2) [1569876454000, "null"]
207: (2) [1569876455000, "null"]
208: (2) [1569876456000, "null"]
209: (2) [1569876457000, "null"]
210: (2) [1569876458000, "null"]
211: (2) [1569876459000, "null"]
As a solution you should change the format or parse the data in the complete function:
data: {
csvURL: '...',
complete: function(options) {
options.series.forEach(function(s) {
s.data.forEach(function(p) {
if (p[1] === 'null') {
p[1] = null;
}
});
});
},
enablePolling: false
}
Live demo: https://jsfiddle.net/BlackLabel/c0xd5j62/
API Reference: https://api.highcharts.com/highcharts/data.complete
Try using broken-axis module, see http://jsfiddle.net/awrydgs7/
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>
Related
dashboard layout
I am using thingsboard CE. I have the dashboard layout shown in the image and want to overlay a polygon on each rectangular switch. However, I want the color of each polygon to change depending on the value of the respective variable. The value of each variable can either be one or zero. If the value is zero, that specific rectangle should be red else it should be green. Data is received as follows:
state1: 1
state2: 0
state3: 1
state4: 1
state5: 1
Telemetry is sent from an arduino uno
{
var state1 = dsData[dsIndex]['state1'];
if (state1 == 1) {
return "red";
} else {
return "green";
}
}
Since you didn't specify, I will assume that you are storing your "state" string on Device attribute level because that's some logical way to go if you don't have some complex situation.
You can't have that telemetry on one Device, and also you can't have it on Device level.
So, first of all, in rule chain you need to split every state into it's own. For that take a blue script and make a message like this:
[
{
msg: msgOfState1,
metadata: metadataOfState1,
msgType: POST_ATTRIBUTES_REQUEST
},{
msg: msgOfState2,
metadata: metadataOfState2,
msgType: POST_ATTRIBUTES_REQUEST
},
]
After that you need to save every state value as individual Asset (because polygons can be only assigned to Assets). For that, use "Create Relation" node in rule chain to essentially make originator change to Asset and then put a "Save attributes" after it). 1 State = 1 Asset!
Once you do that, you will be able to draw a polygon on that image and also make a color change with dependence of that state variable.
This is a bit complex if you just started with it, so fell free to ask related questions.
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;
},
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
Just struggling a bit with the numeric notations in Highcharts.
I didn't like the default version with "k" for "thousands". So, while trying to change that, I stumbled over some inconsistencies (in my view; but perhaps/probably just a "I don't see the whole picture"-thing).
So, why does the zero value get the "k" extension too:
That doesn't make sense. There are no "0k", as there are no "0px" in HTML/CSS programming. It just should be "0".
Logically in that case, when I change the units to "thousands" or " 000"
Highcharts.setOptions({
lang: {
numericSymbols: [" 000", " 000 000"]
}
});
it looks like this:
Clearly: same thing, same false display.
So, I guess there is a solution to this, a work-around, or a misunderstanding. Can you help me? Thanks for any hints!
Here is a fiddle.
0px and 0 are both the same in CSS. 0k seems fine as well when it is consistent with other values, but I guess you can see it differently.
To change this display you could label.formatter like:
labels: {
formatter: function(){
return this.value === 0 ? 0 : this.axis.defaultLabelFormatter.call(this);
}
}
This will print "0" for 0 and same as without this code for the rest.
Working example: http://jsfiddle.net/yup311dv/
You can just pass null to the numericSymbols for the chart to display the full numbers:
Highcharts.setOptions({
lang: {
numericSymbols: null
}
});
Updated Fiddle
I'm trying to use Highstock with numbers that are close to the maximum number (http://www.w3schools.com/jsref/jsref_max_value.asp) but I get error in highstock: Error: Invalid value for attribute d="M 0 -Infinity.
Here is an example:
$('#container').highcharts('StockChart', {
series : [{
data : [1.7976931348623157e+20,
1.7976931348623157e+30,
1.7976931348623157e+50,
1.7976931348623157e+100,
1.7976931348623157e+120,
1.7976931348623157e+150,
1.7976931348623157e+170,
1.7976931348623157e+200,
1.7976931348623157e+230,
1.7976931348623157e+260,
1.7976931348623157e+300,
1.7976931348623157e+308]
}]
});
Also you can see it at jsfiddle: http://jsfiddle.net/s6gscza2/2/
I guest the Highstock should show the maximum number or I'm missing some settings.
It means that you have too much digits, because javascrpt function toFixed() is limited to 20 digits.
I've get a problem using a bubble chart and specifying min and max values on the x axis. In this example, no points are plotted:
$('#container').highcharts({
chart: {
type: 'bubble'
},
title: {
text: 'Highcharts bubbles problem'
},
xAxis: {
min:20,
max:80
},
yAxis: {
min:-80,
max:80
},
series: [{
data: [ {"x":23,"y":22,"z":200}, {"x":43,"y":12,"z":100} ]
}]
});
As you can see in the jsfiddle http://jsfiddle.net/6Qhh3/, the chart doesn't plot any bubbles.
If you remove the min parameter from the x axis, it works If you change it to a scatter chart, it also works. It only seems to fail if it's a bubble chart AND you specify a min on the xAxis.
Am I missing something, or is this a bug in v3.0Beta?
UPDATE: I am getting a console error: 'radii is undefined' on line 1905 of highcharts-more.js
UPDATE: I've emailed this to highcharts support.
UPDATE: Confirmed as a bug by highcharts support.
Indeed it looks like a bug, so I've reported it to our devs https://github.com/highslide-software/highcharts.com/issues/1578
Confirmed as a bug in v3.0Beta by highcharts support.