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...

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...

Portfolio history example

This application extends the historical stock chart in the previous chapter with an additional investment portfolio feature. The frontend is implemented with jQuery and jQuery UI, and the following events are covered in this example:

• chart.events: click, load, redraw, and selection

• plotOptions.series.points.events: mouseover, mouseout, select, and unselect

• xAxis/yAxis.plotLines.events: mouseover and click

The following is the startup screen of the demo, with the components labeled:

The application contains a pair of time series charts. The bottom chart is the top-level graph that shows the entire historic price movement and points to when company shares are bought and sold. The top chart is the detail chart that zooms in to the finer details when a selected area is made in the bottom graph.

As soon as the web application is loaded in a browser, both charts are created. The top-level chart is configured with a load event that automatically requests a stock historic price...

Stock growth chart example

Our next example (for the online demo, see http://joekuan.org/Learning_Highcharts/Chapter_11/chart2.html) is to demonstrate the following events:

• chart.events: addSeries

• plotOptions.series.events: click, checkboxClick, and legendItemClick

• plotOptions.series.point.events: update and remove

Suppose that we want to draft a long-term investment portfolio based on past stock growth performance as a reference. The demo contains a chart started with two series, Portfolio and Average growth, and a form to input stock symbols. Basically, we enter a stock symbol in this demo, and then a line series of stock growth is inserted into the chart.

So we can plot multiple stock yield trends and tweak their proportion in our portfolio to observe how the Average and Portfolio lines perform. The following screenshot shows the initial screen:

Plotting averaging series from displayed stock series

Let's query for two stocks and click on the Average legend to enable the series:

As expected, the...

Summary

In this chapter, we covered the last part of Highcharts configuration: events handling. We built two share portfolio applications using jQuery and jQuery UI to demonstrate most of the Highcharts events.

In the next chapter, we will bring Highcharts to mobile devices with jQuery Mobile.