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