I built a line chart with more than 50 series: fiddle
Now I want to highlight one series by button click (opacity: 1). When I highlight another series, the first one should get its original opacity of 0.1 again.
With only two series I can achieve this by doing this:
$('#func1').click(function () {
var chart = $('#Weltweit').highcharts();
chart.series[3].update({opacity: 0.1});
chart.series[4].update({opacity: 1});
});
$('#func2').click(function () {
var chart = $('#Weltweit').highcharts();
chart.series[3].update({opacity: 1});
chart.series[4].update({opacity: 0.1});
});
But I cannot do this with 50 series because it takes too long to calculate. Is there a way to cancel the previous update before doing a new one?
Use the update method with redraw parameter set to false and redraw chart after loop:
chart.series.forEach(function(s) {
s.update({
...
}, false);
});
chart.redraw();
Live demo: http://jsfiddle.net/BlackLabel/3a9bfjgd/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#update
https://api.highcharts.com/class-reference/Highcharts.Chart#redraw
You can read here, similar with your problem: https://api.highcharts.com/highcharts/series.line.point.events.select
Related
I have a Highchart Stock chart that shows EMA's using Stock chart indicator.
I do not want to use the rangefinder, as the chart should always show 100 candlesticks.
The EMA's work, but need to have extra candlesticks so that the first ones have EMA's. The API returns 100 candlesticks, but the first candlesticks do not have EMA's.
So, what is a good way to either:
Hide the first 50 candlesticks or
Only show the last 100 candlesticks?
I gather this might be done with the range selector, but not sure how to do it programatically.
You need to use setExtremes method. You can call it for example in load event:
chart: {
events: {
load: function() {
const points = this.series[0].points;
const min = points[points.length - 101].x;
this.xAxis[0].setExtremes(min, null, true, false);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/62djn43u/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I have more than one chart in one page, all of them uses same data but in different chart types.
I would like to change all of their time with only one navigator on the top. like using it as a datepicker input, how can i achieve that?
Use afterSetExtremes event callback function and apply the same extremes on the rest charts:
xAxis: {
events: {
afterSetExtremes: function(e) {
var min = e.userMin,
max = e.userMax;
chart1.xAxis[0].setExtremes(min, max, true, false);
chart2.xAxis[0].setExtremes(min, max, true, false);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/8gc9qwsp/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
https://api.highcharts.com/highstock/xAxis.events.afterSetExtremes
I am trying to get a simple axis update to work through a button on highstocks, with the plan of "hiding" a data series/yaxis out of view when you hit a button, and then reducing the chart's height by that amount. For the life of me I just cannot get the button to work. If I manually put the setting of "top: -300" into the second y axis it works. Where is this going wrong?
jsfiddle:
http://jsfiddle.net/abbike18/Ww5Tg/3/
var chart = $('#container').highcharts();
$('#hide').click(function() {
chart.yAxis[1].update({
top: -300
});
chart.setSize(chartHeight = chartHeight -100);
});
First of all, you create variable chart before chart is initialized. Move that line inside the button, will be better. Second, you didn't created chartHeight variable anywhere. Last thing, is to redraw chart only once (in setChart function), so disable redraw for yAxis.update().
See working demo: http://jsfiddle.net/Ww5Tg/4/
And code:
var chartHeight = 500;
$('#hide').click(function() {
var chart = $('#container').highcharts();
chart.yAxis[1].update({
top: -300
}, false);
chartHeight -= 100;
chart.setSize(null, chartHeight);
});
I have a pie chart and need to slice out some point (for examle, second slice in jsfiddle example) by clicking a buttom. How can I do it?
I've tried some updating, but it doesn't work
$('#button').click(function() {
var Chart2 = $('container').highcharts();
Chart2.options.series[0].data[1].sliced = true;
Chart2.options.series[0].data[1].selected = true;
Chart2.redraw();
})
jsfiddle example
The method you need is 'select' on the point object. This is on series, but not in options as you tried:
$('#button').click(function() {
chart.series[0].data[1].select();
})
e.g.
http://jsfiddle.net/JWFm5/
You can also use slice() function.
http://jsfiddle.net/wu3jY/2/
$('#button').click(function() {
chart.series[0].data[0].slice();
});
I have like 50 different series, so by default, I have them hidden, so the user simply clicks on the ones he wants to see.
Sometimes, one wants to show all, or hide all, quickly. I cannot figure out how to toggle all on/off. Is this possible at all? I assume so, but cannot figure out a way to do it.
Hide each series using series.setVisible(false, false), reference. - After all series will be hidden call chart.redraw() to redraw chart only once.
this solution is based on http://jsfiddle.net/pGuEv/
var chart = $('#chart-container').highcharts();
var $hide_show_all_button = $('#hide_show_all_series_button');
$hide_show_all_button.click(function() {
var series = chart.series[0];
if (series.visible) {
$(chart.series).each(function(){
this.setVisible(false, false);
});
chart.redraw();
$hide_show_all_button.html('show all');
} else {
$(chart.series).each(function(){
this.setVisible(true, false);
});
chart.redraw();
$hide_show_all_button.html('hide all');
}
});