Highcharts doesn't display series with lots of data points - highcharts

I have a chart that I would like to display based on a date range from the user. This particular chart has a data point for every 15 minutes. So there can be a lot of data points for each series if a users selects a large date range. Here is a couple of examples:
623 data points in a series
1470 data points in a series
In the first example the chart does display. In the second example the chart does not display. There is a Highstock demo (52,000 points with data grouping) that works with a lot of data points. I have tried to change the above charts to a highstock chart and still have the same results.
What can I do to fix this?

This is due to the turbo threshold option:
"When a series contains a data array that is longer than this, only one
dimensional arrays of numbers, or two dimensional arrays with x and y
values are allowed. Also, only the first point is tested, and the rest
are assumed to be the same format. This saves expensive data checking
and indexing in long series."
It is set to 1000 points by default. Your chart is not rendering because each point in your series is an object and their number is greater than the threshold.
Here's a jfFiddle demonstrating your plot working with the threshold set to 2000.
Here's the modified section of code:
plotOptions: {
spline: {
turboThreshold: 2000,
...
Another solution would be to encode your series data in a 2-d array instead of having each point represented by and object with x-y properties.

a workaround for turboThreshhold is something like this if you generation your response with PHP:
if(count($responseObj) > 1000){
$modolo = round(count($responseObj) / 1000);
for($i = count($responseObj)-1; $i >= 0 ; $i--){
if(($i % $modolo) != 0){
unset ($responseObj[$i]);
}
}
$responseObj = array_merge($responseObj);
}

Related

Highchart EMA, Price & MACD plot

I'm looking to produce a chart like this with data here
I'm trying to play with this chart on codepen
The attached data file has the following values -
1) Date
2) Open, High, Low, AdjustedClose - Plot Candlestick
3) Volume - Plot Volume
4) EMA1 & EMA2 - Plot moving averages on candlestick chart
5) macd_1, macds_1 & macdh_1 - Plot first set of MACD
6) macd_2, macds_2 & macdh_2 - Plot second set of MACD
7) macd_3, macds_3 & macdh_3 - Plot third set of MACD
The moving averages & MACD need not be calculated via javascript. It's already in the JSON data.
Need an export menu on the chart & smoothed plot of the EMA
There are 3 sets of MACD with macd, macds & macdh (histtogram) values all of which need to be on their own panels & have different positive & negative zone colours
The chart title needs to be of some colour centred at the top of chart. when we move mouseover the chart, the OHLC values & date need to be displayed
There is another field in the data called "Entry_type". When the value is "B" (Buy) a green balloon needs to be displayed below the candle & when it is "S" (Sell), a red colour needs to be display above the candle
All the plots need to be on movable panels (movable so to speak in HTML terms). The idea here is if needed then I would need to be able to keep say 2 MACD panels one below the other on left-hand side & move the third one to the right-hand side so that the actual price chart has good amount of vertical space on the page to show data clearly.
Need to set "groupData" to true, which means MACD, EMA & Volume will also need to adjust to that.
I am new to javascript charting which is making my life really hard to get all of this working. Could I please request some help to implement these features?
All you need to do is to prepare the correct data format for each series and create a separate y-axis for each pane. I have prepared a simple example with your data here:
for (i; i < dataLength; i += 1) {
date = new Date(data[i].Date).getTime();
ohlc.push([
date, // the date
data[i].Open, // open
data[i].High, // high
data[i].Low, // low
data[i].Close // close
]);
volume.push([
date, // the date
data[i].Volume // the volume
]);
if (data[i].ema_1) {
ema1.push([date, data[i].ema_1]);
}
}
Live demo: https://codesandbox.io/s/highcharts-react-d-zn9oj?file=/demo.jsx

highcharts not to fill the width

I am using highcharts to draw a stock graph. It start with zero data, then add one data point per minute. after whole day, it fill with 240 data points.
The x axis is fix length, and designed for the whole 240 data points. When the data points have not grow to 240 yet, we want the corresponding part of chart of the missed data to be empty.
I've check the highcharts API, and cannot find options to do that. It looks like all the highcharts demo are filled the chart with data available.
thanks!
In short, you set xAxis.min and xAxis.max.
For example if you have two points in your data:
// January 1st 2015, 00:00 and 00:01
data : [[1420070400000, 3], [1420070460000, 7]]
Then you'd set the min and max to allow space for all the points that will eventually be added:
xAxis: {
min: 1420070400000,
max: 1420070400000 + 86400000 // 60 * 60 * 24 * 1000 added
}
As in this demonstration, which has two points and space for the entire day.

HighCharts dynamic high/low extreme markers

I am wanting to display a marker on the highest and lowest point value in view along the y axis on a line series. I know how to add a marker manually but would like to add/remove them dynamically if a zoom/pan or anything else alters the visible high/low points is there a way to know this and the new high/low to add/remove the markers?
A previous SO question asked for similar advice with this mockup image: http://cl.ly/image/1f0m3l241e2S. The answer though is providing it with your data source, which wouldn't update via zoom/pan or streaming data.
I could potentially loop through the data source myself(2D Array), find the high/low and set them, doing the same on zoom/pan events if I can loop through only the zoomed section of the array. Though if I have dataGrouping set to true, the array of values I iterate over may not match up correctly?
You can do this by
1) using the getExtremes() method to get the high/low data points
2) using the afterSetExtremes() event to capture a zoom event and recalculate
A couple of potentially relevant posts:
Highcharts - Diagonal line X/Y axis
Highcharts moving average based on visible data only
You can set this up in a function, to loop through your data and look for a match to the high/low data points, and from them build a scatter series marking the high/low points on the chart.
An example that marks the points both on chart load and zoom:
http://jsfiddle.net/jlbriggs/475ax4eL/
function sample, gets the relevant x value at which to place the marker matching the high/low data point:
$.each(chart.series[0].data, function(i,point) {
if(point.y == maxData && point.x <= maxTime && point.x >= minTime) {
xMax = point.x;
}
if(point.y == minData && point.x <= maxTime && point.x >= minTime) {
console.log(point);
xMin = point.x;
}
});
{{UPDATE:
Important to note this issue:
https://github.com/highslide-software/highcharts.com/issues/985
If you are going to use column or area series, you will need to get the min and max from the series object instead of the getExtremes() method, because the chart internally sets the dataMin to 0 for those series types.
Easy enough to adapt the function accordingly.
And on a similar note, if you are going to use a boxplot, columnrange, or other similar series without an explicit y value, you will have to update accordingly as well.

Highcharts: minRange=1 creates -1 and 1 on a chart with one data point

I am playing with a chart with a one data point.
Here is the jsfiddle demo: http://jsfiddle.net/mddc/mfwyoj7j/7/
I notice that if I add
minRange: 1
-1 or 1 will show up on both sides of the data point on the X axis.
I am new to Highcharts. What does minRange=1 mean here? If it is useless, then it should not create any problems, right?
Is this a bug in Highcharts?
Thanks and regards.
See highcharts API doc here: http://api.highcharts.com/highstock#xAxis.minRange
minRange: the minimum range to display. The entire axis will not be allowed to
span over a smaller interval than this. For example, for a datetime
axis the main unit is milliseconds. If minRange is set to 3600000, you
can't zoom in more than to one hour.
So it is used to limit the zoom-in: you will not be able to zoom if the xAxis display less than 1

position ticks in par with data - highcharts

I have a 'datetime' chart which has one point per day. So my requirement is to have each date displayed on x-axis and value plotted for each date. So I have set the tickinterval as 1 day (24*3600*1000) as follows:
http://jsfiddle.net/vuf5e/1/
However, the x-axis seems to show only Aug28th and chart has two points on either side of it instead of showing one point for Aug27th and another one for Aug28th.
I tried using tickPositions and the chart appears as follows:
http://jsfiddle.net/vuf5e/2/
What is wrong here?
One of the numbers is wrong.
the second position in the tick is 137766608975 but then in the data is 1377666808975 which has a full digit more than the other.
You are in fact missing an 8 somewhere in the middle.
so basically the number on the second tick become smaller than the first one.
[...]
xAxis: {
type:'datetime' , tickPositions:[1377601929269, **137766608975**]
},
series:[{"yAxis":0,"name":"Device_INTERFACE_in_octets--.2","data":[[1377601929269,5.8583],[**1377666808975**,6.6278]]}]
});
});

Resources