Chapter 3. Sencha Charts Architecture

Ext JS 5.0 has introduced a new and powerful Sencha Charts package for data visualization. Though the old Ext JS Charts is still supported, it will be replaced eventually by Sencha Charts. Sencha Charts has evolved from Sencha Touch and due to this, it has built-in support for touch events which can be used by a user to interact with charts, in ways such as tap, pinch, and so on. Sencha Charts renders charts as SVG or HTML5 Canvas, where appropriate (for example, VML in IE8). However, we will limit our discussion to Canvas and SVG.

Charts are a great way to provide a quick overview of different KPIs, which makes it an essential part of any enterprise solution. While Sencha Charts comes with various built-in charts that can get us started with data visualization, to create a perfect decision-making solution for your customer, you will need to look beyond them. Also, when you have to do that, it is critically important to understand the extensible capabilities...

Architecture of Sencha Charts

Sencha Charts supports the following type of charts:

• Cartesian chart: This works with the cartesian coordinate system where we work with the x and y axes

• Polar chart: This works with the polar coordinate system where we work with angular axis (circle) and radial axis (towards radius)

• Spacefilling chart: This creates a chart that fills the complete area of the charts

The following screenshot shows examples of each type of chart that Sencha Charts offers:

The Sencha Charts package implements the different types of chart using the following major classes:

• Chart (Ext.chart.AbstractChart): This is a common class that implements the different types of charts, as described previously. Based on the type of chart, the class generates the axis. For example, for a cartesian chart, it generates the x and y axes, whereas for a pie chart, it will generate the pie using the polar coordinate system, and so on. The chart class manages the following common features across different...

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

A walkthrough of a polar chart – radar

The radar series is rendered using the polar chart as it works with the polar coordinate system. It uses the radial and angular axes to determine the position of a point. The following diagram depicts Radar where we have marked different areas, such as the axis, legend, series, and sprite:

In the preceding diagram, the Radar series is used with two axes:

• The numeric axis along the radius to show the browser usage data

• The category axis along the angular direction to show the month

The following diagram shows the different classes involved in the construction and initialization of a chart with the Radar series and the control flow:

This is similar to the CandleStick series that we saw earlier, except that in place of CartesianChart, PolarChart is used and in place of the CandleStick series (and related sprites), the Radar series' (and related sprites) classes are used.

When it comes to rendering a polar chart, again, the steps are consistent with that of a...

A walkthrough of a spacefilling chart – gauge

A spacefilling chart does not have an axis, and fills the chart area with the drawing. The following diagram shows a gauge series rendered inside a spacefilling chart:

A spacefilling chart does not do much. It relies on the series to provide the final set of sprites and renders them on the surface.

The following diagram depicts the construction and initialization process of a spacefilling chart with the Gauge series:

The following diagram shows the rendering process for a spacefilling chart:

Summary

This chapter was dedicated to Sencha Charts architecture where we saw the different classes that are part of the architecture, their responsibilities, and how they are connected to provide the required functionality. We validated the architecture by reviewing the implementation of all the three types of charts: cartesian, polar, and spacefilling.

With this architectural and design background, we will start creating different types of custom charts in the next chapters.