Book Image

Sencha Charts Essentials

By : Ajit Kumar
Book Image

Sencha Charts Essentials

By: Ajit Kumar

Overview of this book

Table of Contents (16 chapters)
Sencha Charts Essentials
About the Author
About the Reviewers

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