Highcharts Export server: v2.0.24
Running as local server: highcharts-export-server --enableServer 1 --logLevel 4
I have a lot of x-axis data points representing a ping's success status, every minute all day.
If I POST about 15 hours worth of data to be exported as a line chart, the generated chart is correct.
Post data example:
{"infile":{"time":{"timezone":"Africa/Johannesburg"},"chart":{"type":"line","exporting":{"enabled":false},"width":2000},"title":{"text":"Utilities Availability"},"navigation":{"buttonOptions":{"enabled":false}},"xAxis":{"type":"datetime","dateTimeLabelFormats":{ "millisecond": "%Y-%m-%d<br/>%H:%M:%S", "second": "%Y-%m-%d<br/>%H:%M:%S", "minute": "%Y-%m-%d<br/>%H:%M", "hour": "%Y-%m-%d<br/>%H:%M", "day": "%Y<br/>%m-%d", "month": "%Y-%m", "year": "%Y" }},"yAxis":{"allowDecimals":false,"min":0,"tickInterval":1,"title":{"text":"Status"}},"series":[{"name":"/Breede Valley Utility","color":"#2f7ed8","data":[{"x":1574589619091,"y":1},{"x":1574589634425,"y":0},...
If I send more than 15 hours worth of data, I end up with a blank chart.
I wonder if there is too much data to be plotted on the x axis as the generated chart has a max width of 2000px? I tried to fiddle with width and scale but I am not sure that will solve the issue.
Working chart:
Blank chart:
On my web version of this chart, both the smaller and larger data sets work fine. I am using x zoom to allow the user to see more details.
If anyone can suggest something else to try, I would appreciate it.
This problem might not be related to export server but rather to error #12 (https://www.highcharts.com/errors/12/). In a nutshell, there is a limitation set by default for data which contains points in an object ({x: xValue, y: yValue}) format. It is controlled by the turboThreshold option (which is set to 1000 in case of line series). Take a look at the example below. Try to set a higher turboThreshold (or disable it) and then try to export your chart.
API Reference:
https://api.highcharts.com/highcharts/series.line.turboThreshold
Example:
https://jsfiddle.net/BlackLabel/j6pwo0ye/
Related
Current implementation:
Desired implementation:
If you look carefully there is a vertical line connecting threshold with the first point of my displayed chart. Any ideas how to implement it ? What I thought was to get the threshold price (got it)and find a way to insert it a starting point, but I struggle a bit (since i use unix timestamp).Thanks in advance !
I parse the data from Monday to Friday, but I only display Intraday's data (let's say I am o Friday now). So the threshold will be the closing price from Thursday.
You are right. Inserting a starting point seems to be the best solution for that. You can do it as below:
const threshold = 10;
const data = [
[20, 11],
...
];
data.unshift([data[0][0], threshold]);
Highcharts.chart('container', {
series: [{
type: 'area',
threshold,
data
}]
});
Live demo: http://jsfiddle.net/BlackLabel/7ynzhmuv/
API Reference: https://api.highcharts.com/highcharts/series.area.threshold
I want to use https://api.highcharts.com/highstock/plotOptions.series.dataGrouping.dateTimeLabelFormats
to specify the tooltips for my datagroupings. But when I group a timeseries of 1-minute data in 15 minutes, I have data points of 00:00, 00:01, ..., 00:14 that will be grouped.
My label is now 00:00-00:14, but it makes more sense to display this as 00:00-00:15. How can I achieve this customization of the format of these timegroups?
Thank you for more information and clarification for the case. It is impossible to change it from the API options because in the core code this 1 minute is subtracted from the end value.
if (xDateFormatEnd) {
formattedKey += time.dateFormat(xDateFormatEnd, labelConfig.key + currentDataGrouping.totalRange - 1);
}
Reassigning this method without this subtracting works as you expect: https://jsfiddle.net/BlackLabel/ba6qe9o4/
I have a drill down report, which has to show the issues for the selected range of date say 2014 to 2015 till date. More than 4000 issues filed. The report got rendered, but when i drilldown not thing is show(Empty page).
Unable to test with jsfiddle.
What is the max data points that we can show in the drill down?
turbo threshold should be set(by default it is 1000): http://api.highcharts.com/highcharts#
plotOptions.series.turboThreshold
plotOptions:{
column:{
borderWidth:0
},
series:{
turboThreshold:5000
}
},
updated fiddle
I'm trying use epoch time dates in my series data. The array looks like this:
data:[ [1324857600,205.4],[1324771200,208.7],[1324684800,205.4]. . .]
The points display fine, but the date labels on the x-axis and tooltip are all set to 16 Jan 1970 (the beginning of epoch time!).
If I do a bunch of string-fu I can produce an array that looks like this:
data:[ [Date.UTC(2011, 11, 26),247.7],[Date.UTC(2011, 11, 25),245.5] . . .]
When I do it this way the date labels on the x-axis are correct.
I've tried using the dateTimeLabelFormat option and it formats the date correctly - it's just that when I try to use millisecond values all I get is 16 Jan 70.
Any ideas? I'd rather work with milliseconds than jump through all the hoops to produce "Date.UTC(2011, 11, 26)."
Thanks!
Found the answer on the Highsoft forum.
I need to multiply the epoch time values by 1000 to get the proper millisecond values for Highcharts.
Works great!
I'm working with google annotated time line graphs: http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html
My question is: I would like to limit the X-axis to show just a range of hours between 5:00 and 21:00. Today I'm showing already per hour but I would like to limit the range and not show 24 hours. Is it possible?
Can't you just set the zoomStartTime and zoomEndTime to configure the part of the x axis that is shown?
Something like the following might do it, ie set the start and end date/times and also turn off the range and zoom functions.
annotatedtimeline.draw(data, {
'displayRangeSelector' : false,
'displayZoomButtons': false,
'zoomStartTime': new Date(2009, 1 ,2),
'zoomEndTime': new Date(2009, 1 ,5)});
Just a thought after looking here.