Create Custom Charts using Sencha Charts

ctx.closePath();
ctx.fill();
osStart = false;
osEnd = true;
}

//keep drawing the line
if (y <= osy) { //if start was not detected - open start if (!osStart) { ctx.beginPath(); ctx.moveTo(x, osy); ctx.lineTo(x, y); osStart = true; } ctx.lineTo(x, y); } tx = x, ty = y; } //if end is not detected if (!osEnd) { // console.log('closing!!'); ctx.lineTo(x, osy); ctx.closePath(); ctx.fill(); } }

renderAggregates

This method is called during the rendering of the series, and it takes care of drawing all the sprites for a series. We need to override this method, so we can:

• draw horizontal lines at -80, -50, and -20 levels
• draw line series
• draw and fill overbought and oversold areas

To render the sprites for William %R, first, we transform the overboughtLevel and oversoldLevel to the co-ordinate system that the framework uses:

ctx contains the reference to the underlying rendering engine — Canvas or SVG.

After the coordinates have been transformed, we draw the horizontal lines — solid for -80 and -20 and dashed for -50:

Then, we call the drawOverSold and drawOverbought methods to draw and fill the areas by passing the transformed values to them:

//Draw overbaught areas
me.drawOverBought(ctx, list, obLevel);

Finally, we draw the path with a stroke by calling drawStroke, which is an existing method on Ext.chart.series.sprite.Line class:

drawYLine

A private method that draws a horizontal line — dashed or solid — for the given y.

var linedash;
if (dashed) {
if (ctx.getLineDash) {
lineDash = ctx.getLineDash();
ctx.setLineDash([3]);
} else {
lineDash = ctx.lineDash;
ctx.lineDash = [3];
}
}
ctx.stroke();
if (dashed) {
if (ctx.setLineDash) {
ctx.setLineDash(lineDash);
} else {
ctx.lineDash = lineDash;
}
}

Now, with the sprite class in place, let’s move on to our next class — CustomSenchaCharts.series.WilliamPctR — where we will implement the series related logic.

CustomSenchaCharts.series.WilliamPctR

The series class accepts the store and following specific parameters:

• overboughtLevel
• oversoldLevel
• lookBackPeriod

The store contains the low, high and close fields that this series class uses to calculate the %R value based on the lookBackPeriod — defaults to 14 days.

The following constructor code calculates %R and sets it on the records on the passed store:

var me = this;

var st = Ext.data.StoreManager.lookup(config.store);
var recs = st.getRange();
var highs = Ext.Array.pluck(Ext.Array.pluck(recs, “data”), config.highField);
var lows = Ext.Array.pluck(Ext.Array.pluck(recs, “data”), config.lowField);

var lpPeriod = config.lookBackPeriod – 1;

st.each(function (item, index, length) {
if (index < lpPeriod) { item["pctr"] = ""; return; } //get highest high of last 14 days var maxHigh = Ext.Array.max(Ext.Array.slice(highs, index - lpPeriod, index + 1)); //get lowest low of last 14 days var minHigh = Ext.Array.min(Ext.Array.slice(lows, index - lpPeriod, index + 1)); //calculate %R and set it on the record var pctr = ((maxHigh - item.data[config.closeField])/(maxHigh - minHigh)) * -100 item.data.pctr = pctr; }); this.callParent(arguments); }

Now that we have updated the records with their %R value, there is one more method that we need to implement — actually, override — which is called at the time of rendering the WilliamPctR sprite to get the configuration for the sprite. We need to implement it, so we can pass the overboughtLevel, oversoldLevel, and lookBackPeriod parameters to the sprite, which it uses to draw and fill different sprites:

return Ext.apply(parentStyleConfig, {
overboughtLevel: me.config.overboughtLevel,
oversoldLevel: me.config.oversoldLevel,
lookBackPeriod: me.config.lookBackPeriod
});
}

Now, we are left with one last class — CustomSenchaCharts.chart.WilliamPctR — the chart that lets us create a William %R chart in an application.

CustomSenchaCharts.chart.WilliamPctR

The chart class extends the CartesianChart, where it expects a numeric type axis to be specified by the caller. It uses the specified numeric axis to draw the %R values. The class sets the following William %R related additional axis configs in its iinitConfig method, which is called at the time on the class initialization:

• fields – the field that would be rendered on the numeric axis; it is set to ‘pctr’ – %R
• minimum – minimum value to be shown on the axis; it is set to -100
• maximum – maximum value to be shown on the axis; it is set to 0 as %R oscillates between 0 and -100

initConfig: function(config) {

var series = config.series[0];
var obLevel = series.overboughtLevel;
var osLevel = series.oversoldLevel;

Ext.Array.each(config.axes, function(axis, index, recs) {
if (axis.type === ‘numeric’) {
Ext.apply(axis, {
fields: [‘pctr’],
maximum: 0,
minimum: -100,
renderer: function (value, layoutContext, lastValue) {
if (value == osLevel || value == -50 || value == obLevel){
return value;
} else {
return “”;
}
}
});
}
});

this.callParent(arguments);
}
});

We’re almost done except for one final step where we will use the above chart in an application and see it in action.

See it in Action

In the previous section, we defined a WilliamPctR chart with ‘williampctrchart’ xtype. Let’s see how we can use it in our sample application.

To use the above chart in an application, we can either instantiate it using Ext.create call or use the xtype. For example, here is the code showing the configuration to add this chart to an Ext JS container as one of its items:

The following shows the William %R output:

You may download the complete code from GitHub. Note: this code was written using the current version of Ext JS (5.0.1).

Summary

In this article, we discussed how to create a custom stock chart based on the Cartesian coordinate system by implementing a custom chart, series and a sprite. We then saw how to use the custom stock chart in an Ext JS 5 application. We hope this article has helped you understand the overall structure of the Sencha Charts package, important classes, their responsibilities, interactions and how you can create a custom chart.

References

• Ext JS Charts Kitchen Sink
• Sencha Charts Kitchen Sink
• Sencha Ext JS 5.0.0 Docs
• Ext Charts Upgrade Guide
• William %R
• Code on GitHub