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 re

Answer 1

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 2

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

Answer 3

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