Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts - fire legendItemClick event

I want to fire the same event that it's fired when you select an item legend but from an external html button. Is it possible?

I've created a jsfiddle to show it: http://jsfiddle.net/YcJF8/1/ .

$('#container').highcharts({
                    chart : {
                        type : 'spline',
                    },

                    xAxis : {
                        categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },

                    series : [{
                        data : [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],

                    }],

                    plotOptions : {
                        series : {

                        cursor : 'pointer',
                    }
                },
});

$('#button').click(function() {
        alert("Fire legenditemclick event");
});

In this jsfiddle, I have a button and I want that when I click the button it fires an event or something that chart detects and acts like item legend (series 1) was clicked.

Thank you very much

like image 245
A.Vila Avatar asked Jul 03 '13 13:07

A.Vila


People also ask

What is plotOptions in Highcharts?

The plotOptions is a wrapper object for config objects for each series type. The config objects for each series can also be overridden for each series item as given in the series array. Configuration options for the series are given in three levels. Options for all series in a chart are given in the plotOptions.

How can I tell if Highcharts are loaded?

To determine that chart is fully loaded you can use load event, because load event is invoked when all elements are drown (API reference https://api.highcharts.com/highcharts/chart.events.load). However when you are using series animation this runs in a timeout, then load event is invoked before animation will finish.

What is legend in Highcharts?

The legend is a box containing a symbol and name for each series item or point item in the chart. Each series (or points in case of pie charts) is represented by a symbol and its name in the legend. It is possible to override the symbol creator function and create custom legend symbols.

Is Highcharts an API?

If you are a developer who would like to create hosted charts programmatically, then the Highcharts Cloud API might be for you.


1 Answers

Just use:

$($('.highcharts-legend-item')[0]).click()

Where the 0 is the index of the series you wish to 'click'.

Update fiddle.

EDITS

  • highcharts-legend-item is the class of each entry in the legend. I discovered this by inpecting the legend using chrome developer tools.
  • the $('.highcharts-legend-item') is a jquery selector to return an array of all elements of that class. I select the first one by index and the $() it to convert it into a jquery object
  • The .click is this: http://api.jquery.com/click/
like image 94
Mark Avatar answered Sep 22 '22 19:09

Mark