An Objective Walkthrough of Ext JS 5 Charts Architecture


Overview

In the Sencha Ext JS 5 Charts Architecture blog we discussed about Sencha Charts that lays down the foundation for this article. In this article, we would pick up an existing chart implementation and make use of the described architecture to understand its implementation. This shall help us –

  • understand how the architecture has been applied in a real implementation
  • get more practical understanding of the kind of encapsulation that different classes – axis, series, sprite, engine, etc. – provide
  • understand the sequence of class interactions that are required to create and render a chart
  • understand what it may take to implement a custom chart
  • understand how well the Sencha Charts can be used with Ext JS 5 as well as Sencha Touch

Walkthrough of an existing CandleStick Chart

Let us look at the Stock App that comes along with Sencha Touch Example and see how these classes have been used to achieve the desired behaviour. When you download and extract the Sencha Touch SDK, you would find the source code in examples/stockapp folder.

CandleStick Detail

Design

The Stock App has two charts:

  1. to show the CandleStick/OHLC
  2. to show the preview with a range mask to allow the user to resize the preview area

There are certain event handlings 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 would limit our focus on how CandleStick chart and the RangeMask custom sprites have been implemented.

The below diagram shows the classes that the involved in the application and their connectedness:

StockApp Design

In the above diagram, we have highlighted the classes that are responsible for showing the candlestick on the top and the preview area at the bottom, which shows two line series and a custom sprite – RangeMask – added to the overlay surface of the preview chart.

CandleStick series uses CandleStick sprite class to take care of the actual drawing.

CandleStick sprite’s renderAggregates method takes care of rendering the sprites based on the CandleStick/OHLC graph logic.

RangeMask extends Ext.draw.sprite.Sprite. The render method implements the logic to draw the rectangular areas along with handlers using which a user can change the preview area by dragging the handlers. This sprite is added to the overlay layer so that it appears on top of the series.

Sequence Diagram

Let us see what is the sequence of calls that are made across the main classes that we have listed earlier to achieve the desired output.

I have broken it into two parts:

  • Construction & initialisation
  • Rendering

Construction & Initialisation

In this stage the different classes are instantiated and initialised and they are prepared to enter into the rendering stage

Preview with RangeMask

Preview Construction

CandleStick

CandleStick Construction

Rendering

In this stage the actual visual output is produced that is visible on the screen

CandleStick & Preview Rendering

This completes our walkthrough.

Summary

I hope that this article would have helped you to understand the overall Sencha Charts architecture and see how it is applied to a real implementation. This shall prepare you, better, to start planning the implementation of your custom charts.

References

Co-founder of Walking Tree, Speaker, Sencha Trainer, Author of Sencha Charts Essentials, Sencha Touch Cookbook, Sencha MVC Architecture, and ADempiere Cookbook.

Tagged with: , , ,
Posted in Sencha ExtJS, Sencha Touch
2 comments on “An Objective Walkthrough of Ext JS 5 Charts Architecture
  1. Alok Ranjan says:

    I do see CandleStick charts available in ExtJS5. You may like to visit following URL:
    http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.chart.series.CandleStick

    If some chart is not available then like any Sencha Components, you can very well create your own charts.

    Cheers!

  2. Ludo says:

    Hi,

    Nice article !
    Is a similar stock chart available on ExtJS 5 ?
    If no, is it possible to use Touch code in ExtJS 5 ?

    Thanks,

    Ludo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: