Chapter 11. Highcharts Events

In the previous chapter, we learned about the Highcharts API. In this chapter, we will go through Highcharts events handling. We will start the chapter by introducing the set of events supported by Highcharts. Then, we will build two web applications to cover most of the events; each one explores a different set of events. Although the applications are far from perfect and there is plenty of room for improvement, the sole purpose is to demonstrate how Highcharts events work. In this chapter, we will cover the following topics:

  • Launching an Ajax query with a chart load event
  • Activating the user interface with a chart redraw event
  • Selecting and unselecting a data point with the point select and unselect events
  • Zooming the selected area with the chart selection event
  • Hovering over a data point with the point mouseover and mouseout events
  • Using the chart click event to create plot lines
  • Launching a dialog with the series click event
  • Launching a pie chart with the series checkboxClick event
  • Editing the pie chart with the point click, update, and remove events

Introducing Highcharts events

By now, we have gone through most of the Highcharts configurations, but there is one area not yet covered: event handling. Highcharts offers a set of event options in several areas such as chart events, series events, and axis base events; they are triggered by API calls and user interactions with the chart.

Highcharts events can be specified through object configuration while creating a chart or through APIs that accept object configurations, such as Chart.addSeries, Axis.addPlotLine, and Axis.addPlotBand.

An event object is passed by an event handler that contains mouse information and specific action data related to the event action. For example, event.xAxis[0] and event.yAxis[0] are stored in the event parameter for the chart.events.click handler. Inside each event function, the 'this' keyword can be used and refers to a Highcharts component where the event function is based. For example, the 'this' keyword in chart.events.click refers to the chart object, and the 'this' keyword in plotOptions.series.events.click refers to the series object being clicked.

The following is a list of Highcharts events:

  • chart.events: addSeries, click, load, redraw, selection, drilldown, and drillup
  • plotOptions.<series-type>.events: click, checkboxClick, hide, mouseover, mouseout, show, afterAnimate, and legendItemClick

    Note

    Alternatively, we can specify event options specifically to a series in the series array, such as: series[ { events: click: function { ... }, .... } ].

  • plotOptions.<series-type>.point.events: click, mouseover, mouseout, remove, select, unselect, update, and legendItemClick

    Note

    We can define point events for a specific series, as follows: series[ { point : { events: { click: function() { ... } }, ... } ].

    As for defining events for a particular data point in a series, we can specify them as follows: series[ { data: [ { events: { click: function() { ... } } ], ... } ].

  • x/yAxis.events: setExtremes, and afterSetExtremes
  • x/yAxis.plotBands[x].events and x/yAxis.plotLines[x].events: click, mouseover, mousemove, and mouseout

The Highcharts online documentation provides a comprehensive reference and plenty of mini examples; you are strongly advised to refer to that. There is not much point in repeating the same exercise. Instead, we will build two slightly sizable examples to utilize most of the Highcharts events and demonstrate how these events can work together in an application. Since the complete example code is too long to list in this chapter, only the relevant parts are edited and shown.

The full demo and source code can be found at http://www.joekuan.org/Learning_Highcharts/Chapter_11/chart1.html.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.136.63