I'm working on a site where I use Highcharts quite heavily for presenting data in charts. I want to user to be able to "zoom" each chart into a modal window for better readability.
I know how to manipulate the chart with its API, but I'm not quite sure how I can clone the chart and refer to the new chart with an variable?
I've done alot of searching, and all I've found is how to open in modal window with Highcharts own modal library, but I'm using a modal library called Lightview.
I'm working on a site where I use Highcharts quite heavily for presenting data in charts. I want to user to be able to "zoom" each chart into a modal window for better readability.
I know how to manipulate the chart with its API, but I'm not quite sure how I can clone the chart and refer to the new chart with an variable?
I've done alot of searching, and all I've found is how to open in modal window with Highcharts own modal library, but I'm using a modal library called Lightview.
Share Improve this question asked Apr 1, 2012 at 18:41 rebellionrebellion 6,74012 gold badges50 silver badges81 bronze badges3 Answers
Reset to default 12I have got this working using jQuery modal panel.
On click of original chart I am calling a javascript function popupGraph which will create a new highchart by merging the options of the existing highchart. On close event of modalPanel I am destroying the highchart that we have created for popup.
Hope this helps..
Code for actual chart that I show in small size.
trackingChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: loadChart,
click: function() {
popUpGraph(this);
}
}
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
},
legend: {
layout: 'horizontal',
backgroundColor: '#FFFFFF',
align: 'center',
verticalAlign: 'bottom',
x: 10,
y: 0,
floating: false,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' points';
}
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
}
},
exporting: {
enabled: false
},
series: [{
data: []
}, {
data: []
}]
});
Code for function opening modal panel
function dummy() {}
function popUpGraph(existingChart) {
var options = existingChart.options;
var popupChart = new Highcharts.Chart(Highcharts.merge(options, {
chart: {
renderTo: 'popup_chart',
height:300,
width:700,
zoomType: 'x',
events: {
load: dummy,
click: dummy
}
}
}));
$( "#dialog").dialog({
autoOpen: false,
height: 350,
width: 750,
modal: true,
show:'blind',
close: function(event, ui) { popupChart.destroy(); }
});
$("#dialog").dialog("open");
}
You can get the new range by the selection event and then get the respective position from the chart serie. See my example. http://jsfiddle/ricardolohmann/sZMFh/ So, if you want to show it inside the lightbox you have to change the following code:
chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'container2'
},
series: newSeries
});
To this one, and set the container2 display to none
Lightview.show({ url: 'container2', type: 'inline' });
Further to Santhosh's answer, I added this at the end of popupGraph function to get data loaded up:
$.each(existingChart.series, function (prop, val) {
popupChart.series[prop].setData(val.options.data);
popupChart.series[prop].update(val.options);
});