Portfolio history example

This application basically extends from 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, selection

• plotOptions.series.points.events: mouseOver, mouseOut, select, unselect

• xAxis/yAxis.plotLines.events: mouseover, 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, which shows the entire historic price movement and points to when company shares are bought and sold. The top chart is the detail chart, which zooms in to the finer details when a selected area is made in the bottom graph.

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