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');
}
});
Related
Whenever the user "mouse out" my chart, I would like a tooltip to automatically appear above one point and stay visible until the mouse returns above the chart.
series: {
events: {
mouseOut: function() {
chart.series[0].data.refresh(0);
}
}
The code above works, but the tooltip disappear after a second or two. I want it to stay visible.
Thanks!
This reassigning of the reset function should help to achieve wanted result.
Demo: https://jsfiddle.net/BlackLabel/pu9g2dft/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
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
I am just starting out with Highstock and I want to provide our users with the option of toggling the connection of the null data points via a button. Here is how I have tried to solve it: jsFiddle
// create the chart
var chart = new Highcharts.StockChart({
[...]
plotOptions : {
series : {
connectNulls : false // default
}
},
[...]
});
// Toggle connect nulls
var connectNulls = true;
$('#connectNulls').click(function() {
chart.plotOptions.series.connectNulls = connectNulls;
connectNulls = !connectNulls;
});
But it has no impact on the graph. All the examples I've found so far concerning toggling on chart configuration are doing dynamic manipulation on the series via the update method, but for the connectNulls I guess this is not possible.
I can always repaint the graph from scratch but I want to avoid this if possible. Say if one user has zoomed into the graph, repainting would cause the zoom to be lost.
Any suggestions?
You can use series.update() and then modify this param.
http://jsfiddle.net/vsmn60gL/3/
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 implemented a wicked-chart which shows 4 series in the legend. Now I want to handle the series click event in legend and update some values outside the wicked highchart.
To be specific, I want to implement exactly like this jsfiddle but in java wicked-chart.
plotOptions:
{
series: {
events: {
legendItemClick: function(event) {
//Do something here
return false;
}
}
I did search all the methods of PlotOptions class but could get something similar to highcharts legendItemClick event.
My solution was not to find alternative for legendItemClick in wicket-charts as they do not have one. Instead I did this:
In your page html, give id="chart". Doing this highcharts shall fix your id to "chartVar" instead of changing it at each run.
<div wicket:id="chart" id="chart"></div>
In your javascript, define your series click using .highcharts-legend-item as below.
var onSeriesClick = function() {
var that = this;
for (var i=0;i<chartVar.series.length;i++)
{
$(".highcharts-legend-item:contains(" + chartVar.series[i].name + ")").click(function(){
// your legend click logic goes here
});
}
}