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
Related
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;
I want to make a chart with 4 series' and show only 1 or 2 of them at the same time. The user can choose, which series he wants to see. This works fine with series.show and series.hide, but the baseSeries, set in "navigator", doesn't change.
Is there a way to change it dynamically?
Navigator series is based on first series data, as a result is not updated. In case when you would like to update navigator series, you need to use setData() on series[1] object.
http://jsfiddle.net/sbochan/HwuRr/
chart.series[1].setData([5,2,1,2,4,6,10]);
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();
Is it possible to get the value of the visibility of a series? I know how to change it. But is there anything like series.getVisibility()?
There's a read-only property on the series object named visible that you can use for that.
series.visible
Assuming that chart is your chart var.
chart.series[0].visible, gets the first serie visibility.
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
});