Chapter 4. Creating a Custom Cartesian Chart

With the launch of Ext JS 5, Sencha introduced a new and more powerful Sencha Charts package, which has built-in support for touch events. This means you can use touch gestures to interact with the charts. Sencha Charts has been built with performance in mind and will render charts as SVG or HTML5 Canvas, where appropriate (or VML in IE8). You can refer to the Ext JS 5 Charts Kitchen Sink to test drive and learn more about Sencha Charts.

In this chapter, you will learn how to create custom cartesian charts using the new Sencha Charts packages:

• Create a custom sprite

• Create a custom series

• Create a custom chart

• Use the newly created custom chart in an application

• Demonstrate how to create a new financial chart with the MACD (Moving Average Convergence/Divergence Oscillator) indicator.

Creating a new financial chart

In this section, you will see how to create a custom stock chart—MACD—that is a momentum oscillator offering trend following and momentum. It fluctuates above and below the zero level.

Note

You can read more about this at http://en.wikipedia.org/wiki/MACD.

What is this chart all about?

Let's derive the technical requirements for the MACD chart, which we will use as a foundation to implement our custom chart.

For the MACD chart, based on the stock data that contains open, high, low, and close values for different time instances, the following values need to be calculated:

• 12-day Exponential Moving Average (EMA)

• 26-day EMA

Once the preceding values are calculated, the MACD-related values will be calculated for a record, by applying the following formulae:

• MACD line = 12-day EMA - 26-day EMA

• Signal line = 9-day EMA of MACD line

• MACD histogram = MACD - Signal line

After the MACD line, signal line, and histogram values have been calculated, we need to draw a chart between...

Summary

In this article, we discussed how to create a custom stock chart based on the cartesian coordinate system. We implemented a custom chart, series, and a sprite for a MACD indicator that is commonly used by Stock analysts. The implementation demonstrated Sencha Charts' important classes, their responsibilities, interactions, and how you can create a custom chart. Subsequently, you learned how to use the newly created cartesian custom stock chart in an Ext JS 5 application.

Next, we will see how to create a custom polar chart and use it in our application.