Open Highcharts in modal window

Question

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.

Answer 1

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.net/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' });

Answer 2

I 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");

}

Answer 3

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);
        });