I have a highchart displaying multiple series, each contains 100+ data points
I have a UI containing a checkbox for each series that when clicked calls the series.hide() or series.show() to toggle the hide/show of each line
My problem is that the hide and show are extremely slow such that I cant check one checkbox whilst processing from a previous is taking place
Does anyone know how to handle this?
Thanks
Rather than calling hide() for each series, call setVisible(false, false);. This second parameter is the redraw parameter, and you can avoid causing a redraw (which is slow) for each series.
Then, after you're done changing visibilities, call chart.redraw() once.
http://api.highcharts.com/highcharts#Series.setVisible
as answered in:
Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?
highcharts draw each time a show or hide is called;
disabling and enabling the redraw function worked for me;
var _redraw = this.chart.redraw;
this.chart.redraw = function(){};
//do work
this.chart.redraw = _redraw;
this.chart.redraw();
How about adding visible: false for the series that are hidden before calling Highcharts.chart()?
Please see references: 1. Highcharts API and 2. Demo
In my case, above approach showed the best performance comparing to the followings:
series.hide()
setVisible(false, false)
setVisible(false, true) or setVisible(false, false); redraw();
Related
What I wanna do: I have a basic line chart which is initialy load with an array of data (series: [...]) which creates me lets say x lines. I will also render x checkboxes above the chart. On click on one of the checkboxes the corresponding line should disappear or appear. Therefor I am listening to the click event and then I want to add or remove a line.
The problem: I can not figure out how to replace the whole series with a new one. What I have found is the setData() method, but that only works on an item of the data array. I also found the methods addSeries() which will add an item. And remove() which will remove a specific item. The problem is, I dont know which item is which. What I would like is to hide a line or show them, but have the full x lines in the data series all the time. I think.
I also found the method update() which will let me pass a new configuration object to the chart, but its not working if i pass the option 'series: newData (array)'.
I am either looking for an option to pass the full data array at the beginning and then hide or show a line, or, to overwrite the full series data at any given them with a new array.
Hopefully thats understandable and someone can point out what I am missing! Thanks!
I have found a solution. I would load the whole data array in the beginning and show or hide certain series for the initial display with the option visible:false.
On click of the checkboxes I need to find the right series and then there are the methods show() and hide() to manipulate that visible property on runtime.
chart.series[myIndex].show();
chart.series[myIndex].hide();
You can use setVisible method for series and bind checkboxes with the series:
var checkboxes = document.getElementById('checkboxes').children;
for (var i = 0; i < checkboxes.length; i++) {
(function(i) {
checkboxes[i].addEventListener('change', function() {
chart.series[i].setVisible(this.checked);
});
})(i);
}
Live demo: http://jsfiddle.net/BlackLabel/ur31g4j5/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setVisible
I have a highstock graph with flags that initially is correctly set.
See on Figure 1:
The graph's data is loaded dynamically when the vertical scroll bar is changed. The only thing that changes is the series data with the function
function afterSetExtremes(e) {
var new_data_to_be_loaded = getNewDataToBeLoaded();
chart.series[0].setData(new_data_to_be_loaded);
}
The new series data is loaded correctly but the flags is incorreclty re-arranged, se the Figure 2:
So what's wrong on the setting, since the chart.series[0].setData just set the series not the previous flags added?
Almost a solution:
I found that setdata(data, false), setting the animation/redraw to false solve the problem of wrong flag positioning.
Take a look at that: http://jsfiddle.net/b6b63nwy/10/
But this did raise another problem: the series tooltip does not appear anymore. Is this a highstocks bug?
The answer:
http://forum.highcharts.com/highstock-usage/bug-series-tooltip-doesn-t-render-when-use-series-setdata-t37593/
=====================================================================
If you take a look at the Series.setData section in the official API, you will find that the second argument is a Boolean property which tells if redraw the chart. Instead of setData, try to use Series.update() function.
API Reference:
http://api.highcharts.com/highcharts/Series.setData
http://api.highcharts.com/highstock/Series.update
Question asked because I spent a while trying to solve this and the answer isn't easily Google-able:
If I've manually set the size of a chart how do I make it go back to how it was before I did so?
(Question left deliberately ambiguous as I have found two distinct answers).
You might want to do one of 2 things:
Go back to the previous fixed size.
Go back to the size being variable according the size of the containing element.
For #1, you can collect (and thus store for later resetting) the current size of the chart BEFORE you call the setSize() by calling chart.chartHeight or chart.chartWidth (where var chart = $('#chart-container').highcharts();), then just call setSize() again with the original values.
For #2, after you've called setSize() post-print, the chart will no-longer auto-size itself if the window changes. You can fix that by using the 'hack' detailed here: Is modifying chart.hasUserSize a bad idea after calling Chart.setSize()?
Which consists of setting chart.hasUserSize = false;
you can see my test example of Highchart here: Chart test
When you click the "Reload chart" button, it reloads the chart with random numbers. But as you can see, the chart disappears for a very short time and reappears again. My question is: can I reload the chart more smoothly, without it disappearing for a very short time?
For me, using Chrome on OS X, it doesn't hiccup at all--the old chart is immediately replaced with a new one which then takes some time to animate into full view. So if it's the animation time you object to, I suggest simply setting the animate property of the chart to false to avoid that.
If that's still not good enough (e.g. other browsers might be slower), you can first turn off animation then use the Highcharts API to adjust the data and redraw the chart without recreating it at all. This may be more invasive, however, so it's worth starting with the first approach.
I originally asked this question on the Highcharts forum a few days ago but received no answer so let me ask it here:
I want to have a chart where I can toggle the 'reversed' property of the Y-axis after the chart has been initialized and then see the chart redrawn. My first thought was to put something like the following code inside of an event handler (say in response to a button click), but it doesn't seem to do anything.
chart.yAxis[0].reversed = !chart.yAxis[0].reversed;
chart.redraw();
I don't think it's possible (see this forum post).
In particular, the last response on that post concludes with this:
I would suggest a workflow for your gui that updates a structure that keeps the options and then creates a new chart based on the options. The api we have has more of a focus on changing the data that is displayed than changing how the data is displayed.
So you might have to create two charts (one for each axis direction), only display one of them at a time, and toggle between them at runtime.
Update:
The accepted answer on this duplicate question suggests it is possible by doing this:
chart.yAxis[0].update({
reversed: !reversed
});