A walkthrough of an existing CandleStick chart
Let's look at the Stock App that comes along with Sencha Touch SDK and see how these classes have been used to achieve the desired behavior. When you download and extract the Sencha Touch SDK, you will find the source code in the examples/stockapp folder.
The following diagram depicts the Stock App output where we have highlighted the chart-related items:
Design of the Stock App
The Stock App has two charts for the following purposes:
- To show the CandleStick/OHLC chart
- To show the preview with a range mask to allow the user to resize the preview area
There is a certain event handling mechanism put in place to sync the CandleStick chart with the preview area that is visible to the user by dragging the handlers on the RangeMask. We will limit our focus on how the CandleStick chart and the RangeMask custom sprites are implemented.
The following diagram shows the classes that are involved in the application and how they are connected:
In the preceding...
