Here is the problem. I want to destroy the existing chart and replace with a new instance. As per doc, I need to call destroy() method and then create a new one. But even if I do so, the Highcharts array still keep the old reference (as undefined) and create the new chart with new index.
Below is the example code, also in fiddle. Just click on the button and you will see the chart index is increasing.
createChart();
function createChart(){
var options ={
chart: {
renderTo: 'container',
.................
.................
}
}
var chart = new Highcharts.Chart(options);
alert(chart.index)
}
function newChart(){
$("#container").highcharts().destroy();
createChart();
}
$("#button").click(function(){
newChart();
}
I would not suggest creating a high chart on click of a button. Instead you can simply add and remove series (opposed to create and destroy). You can use hide()/unhide() operations if you want to hide a serious temporarily. Hope this helps.
Related
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 want to add a reference series to my charts (i.e. a reference price). Axis.addPlotLine() does it, but I want to be able to toggle this series from the legend; a plain plotLine does not show up in the graph's legend.
Another reason why plotLine does not seem like a good solution is that it does not get accounted for by the viewport calculations. Which means that toggling other series might lead to the plotLine appearing outside the viewport due to zooming.
The simplest way to accomplish what I want would be, to add a dynamic series via chart.addSeries. But it's impossible to call this method from within a triggered addSeries event because chart.addSeries is set to null while in the event handler.
Tying in to the redraw event creates a whole lot of difficulties as well, because render() can't be called anymore.
How would you go about it?
Update:
As per the comment of Pawel Fus, I unsuccessfully tried the following:
[…]
events: {
load: function (event) {
foo = this;
},
addSeries: function(event) {
console.log(foo) // returns chart object as expected
console.log(foo.addSeries) // undefined
}
}
Solution is to store addSeries on load event, and use stored function when adding series. Live example: http://jsfiddle.net/3bQne/808/
events: {
load: function (event) {
foo = this.addSeries;
},
addSeries: function (event) {
if (iterator) {
iterator--;
foo.call(this, {
data: [100, 200, 100, 100, 200, 300]
});
}
}
},
Still you can stick with plotLine only.
If the position of the line is static that is the best way.
If the position is dynamic then you can still go with plotLine.
There are events for adding and removing plotLine on the fly.
API link
removePLotLine() : http://api.highcharts.com/highcharts#Axis.removePlotLine
addPlotLine() : http://api.highcharts.com/highcharts#Axis.addPlotLine
I hope this will help you.
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');
}
});
How to resize with the latest code. The examples now use
chart = $('#theChart').highcharts({
Instead of newing a HighStockChart
chart = new Highcharts.StockChart({
I am not sure if that new way assigning chart variable is working though AND chart.setSize is definitely no longer working. I use to have this resize code...
$(window).resize(function () {
var height = getHeight();
console.log('fit new div container size, width='+$("#theChart").width()+' height='+height+' windowH='+$(window).height());
chart.setSize($("#theChart").width(), height, false);
});
which breaks on calling setSize. The width of my chart automatically changes but the height no longer changes anymore. I tried setting the height on the div on resize but that did not work at all. How to dynamically change the chart size to fit in the window but have a min-height as well if collapsed to far.
(My zoom panel also completely broke as well...is there a good example for that as I now need to add that back).
thanks,
Dean
You can still call chart = new Highcharts.StockChart(options) to create charts.
However now $("#container").highcharts(options); returns jQuery object, not Highcharts chart. To get chart from created id use: $("#container").highcharts(); (empty highcharts())
At the newest version you can still use first construction:
http://jsfiddle.net/L6hpm/
chart = new Highcharts.StockChart({
chart:{
renderTo:'container'
},
I second solution you can use:
http://jsfiddle.net/NbHj9/
var chart = $('#container').highcharts();
chart.setSize(100,100);
Why not use this:
var chartOptions = {
chart: {
renderTo: '[id of div]',
},
xAxis:{
},
...
series:{
},
};
var chartName = new Highcharts.chart({chartsOptions});
This should definitely work for you....just use chartName.setOptions() to set the size