Create Custom Charts using Sencha Charts

//find the x co-ordintate of the point of intersection
osx = tx + (((x-tx)*(ty-osy))/(ty-y));

ctx.beginPath();
ctx.moveTo(osx, osy);

osStart = true;
osEnd = false;
}

//detect if the os ends
if (ty <= y && ty <= osy && y >= osy) {
osx = x – (((y-osy)*(x-tx))/(y-ty));
ctx.lineTo(osx, osy);

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:

var obLevel = attr.overboughtLevel * yy + dy;
var osLevel = attr.oversoldLevel * yy + dy;
var midLevel = -50 * yy + dy;

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:

//Draw overbought, oversold and -50 mark lines
me.drawYLine(ctx, xLen, obLevel);
me.drawYLine(ctx, xLen, osLevel);
me.drawYLine(ctx, xLen, midLevel, true);

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

//Draw oversold areas
me.drawOverSold(ctx, list, osLevel);

//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:

//draw stroke
me.drawStroke(surface, ctx, start, end, list, rect[1] – pixel);
ctx.stroke();

drawYLine

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

drawYLine: function(ctx, length, y, dashed) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(length, y);
ctx.closePath();

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:

constructor: function (config) {

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:

getDefaultSpriteConfig: function () {
var me = this,
parentStyleConfig = me.callParent(arguments);

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

Ext.define(“CustomSenchaCharts.chart.WilliamPctR”, {
extend: ‘Ext.chart.CartesianChart’,
requires: [‘CustomSenchaCharts.series.WilliamPctR’, ‘CustomSenchaCharts.sprite.WilliamPctR’],
xtype: ‘williampctrchart’,

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.

How can we 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:

{
xclass: ‘CustomSenchaCharts.chart.WilliamPctR’,
height: 250,
docked: ‘bottom’,
insetPadding: 0,
background: ‘white’,
series: [
{
store: ‘Apple’,
type: ‘williampctr’,
xField: ‘date’,
yField: ‘pctr’,
highField: “high”,
lowField: “low”,
closeField: “close”,
overboughtLevel: -20,
oversoldLevel: -80,
lookBackPeriod: 14, //in days
style: {
stroke: ‘rgba(237,123,43,0.75)’,
fill: ‘rgba(237,123,43,0.1)’,
miterLimit: 1
}
}
],
axes: [
{
type: ‘numeric’,
position: ‘left’,
style: {
axisLine: false
}
},
{
type: ‘time’,
position: ‘bottom’,
fields: [‘date’],
style: {
strokeStyle: ‘#666’,
estStepSize: 150
},
dateFormat: ‘Y’,
segmenter: {
type: ‘time’,
step: {
unit: ‘y’,
step: 1
}
},
label: {
fontSize: 10,
fillStyle: ‘#666’
}
}
] }

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

Are you ready to get started building amazing web charts?

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. Find out more about Ext JS!

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