CODEWITHSUNDEEP
highcharts
Harsha M V
Harsha M V

Reputation: 54949

Highcharts Load Charts on click

I am building a Dashboard and it has around 4 graphs on a row and on click of any graph i want to update another graph which is bigger in size to display the graph so that its visible to the user to analyze.

any idea how to Redraw the map on click on a button.

enter image description here

Upvotes: 1

Views: 2116

Answers (1)

Jashwant
Jashwant

Reputation: 29005

I did the similar thing on my project.

You can add one button zoom/popup, clicking on which would open a new big chart and disable the exporting buttons in this new chart.

Here's the full code.

function callback($this) {
    var img = $this.renderer.image('images/zoom_icon.png', $this.chartWidth - 40, 5, 40, 12);
    img.add();
    img.css({
        'cursor': 'pointer'
    });
    img.attr({
        'title': 'Pop out chart'
    });
    img.on('click', function () {
        var params = {
            chart: {
                spacingLeft: 100,
                spacingRight: 100,
                renderTo: 'myChart'
            },
            title: {
                text: 'title'
            },
            exporting: {
                buttons: {
                    exportButton: {
                        enabled: false
                    },
                    printButton: {
                        enabled: false
                    }

                }
            }

        }

        new Highcharts.Chart(params, function (chart) {});
    })

}


new Highcharts.Chart(charts.params, callback);

// where charts.params is object which contains options for chart

Upvotes: 4

Related Questions