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
});
Related
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;
Basically I want to do simple thing - save to user cookie chart xAxis.min and xAsis.max when user uses the Navigator, so that next time I could show him chart on the same selected period.
Is there some kind of onChange event or I have to read chart's parameters in setInterval?
You can use the xAxis.events.afterSetExtremes (API) or xAxis.events.setExtremes event. From your requirements I would assume that afterSetExtremes is sufficient.
If you want to only capture changes through the navigator you need to check
if(event.trigger == 'navigator'), otherwise you can just look at general changes.
Here is a JFiddle Highstock demo that shows the use of setExtremes event and what event.trigger values you can get.
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 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();