great data visualization using sencha charts

Great Data Visualization using Sencha Charts

Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.

CTO & Co-Founder@

Ajit Kumar

2


● Fundamentals● Out-of-box Charts● Architecture● Creating a custom Cartesian Chart● Creating a custom Polar Chart● Creating a custom SpaceFilling Chart● Theming● Working with Touch Gestures● Where do we go from here?

Agenda

3

Fundamentals

4


For a chart, we need...

● A way to describe/program a chart● A browser/webview to render the chart

5


Drawing options that we have...

VML1998

19992004

6


So, to draw something like this...

7


We will have to work with...

● Element● Attribute● Event● DOM Manipulation● API

8


As they are different...

Canvas SVG

9


And their outputs (using defaults) are different...

10


It is...

A Sencha package to create stunning visualizations for both web and mobile applications

12


I give you Surface...

Surface(Sencha Charts)

VML SVG Canvas

13


It offers...

● Sprites (e.g. circle, line, etc.)● Abstracted drawing surface● Soft events

And

● A consistent programming model

14


To use, we need...

● Sencha Charts package● A browser/webview with drawing capability

15

Out-of-the-box Charts

16


It has three chart types...

17


Explore them...

Sencha Charts Kitchen Sink

18

http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/?charts=true





Let us get the vocab right...

19


Cartesian

Ext.define(‘SCE.view.main.Main’, {extend: ‘Ext.container.Container’,xtype: ‘app-main’,layout: {

type: ‘fit’},items: [{

xtype: ‘cartesian’,…store: {},axes: [],series: [],sprites: [],interactions: []

}]});

20


Polar



xtype: ‘polar’,…store: {},axes: [],series: [],interactions: []

}]});

21


SpaceFilling



xtype: ‘spacefilling’,…store: {},series: [],interactions: []

}]});

22

Architecture

23


SVG HTML5 Canvas

Chart

Polar Cartesian Space Filling

Draw (Container)

Engine

Surface

Sprite

SeriesCircle Rectangle

Arc

Text Path

…….

Area Bar

Pie …….

Radar

Scatter

Ellipse Image

24


More detailed one...

25


Surface has layers...

Background

Main

Grid

Series

Axis

Chart

Overlay

Events

z-index

lowest

highest

26


Main classes are...

● Ext.chart.AbstractChart● Ext.series.Series● Ext.chart.series.sprite.Series● Ext.draw.Component● Ext.draw.Surface

27

Custom Cartesian Chart

28


What if I have to create this..?

29


Here is the design...

30

Custom Polar Chart

31


What about this..?

32


The design would be...

33

Custom SpaceFilling Chart

34


And, this one..?

35


This shall do...

36

Theming

37


Theming

We can theme:

● Chart and its background● Axes● Series● Markers● Legends● Tooltips● Labels

Using

● Configs● A custom chart theme● SASS

38

Working with Touch Gestures

40


Configs that drive...

● interactions● gestures

41


Built-in interactions are...

● crosshair● crosszoom● itemhighlight● panzoom● rotate● rotatepie3d● iteminfo● itemedit

42


Create custom interaction..

By extending Ext.chart.interactions.Abstract

43


http://walkingtree.github.io/chartsly/46

http://walkingtree.github.io/chartsly/

http://walkingtree.github.io/chartsly/


Be the Pro!

Available on:

● Amazon● Packt● Oreilly

47

http://www.amazon.com/Sencha-Charts-Essentials-Ajit-Kumar/dp/1785289764/ref=sr_1_1?ie=UTF8&qid=1444891119&sr=8-1&keywords=sencha+charts

http://www.amazon.com/Sencha-Charts-Essentials-Ajit-Kumar/dp/1785289764/ref=sr_1_1?ie=UTF8&qid=1444891119&sr=8-1&keywords=sencha+charts

https://www.packtpub.com/web-development/sencha-charts-essentials

https://www.packtpub.com/web-development/sencha-charts-essentials

http://shop.oreilly.com/product/9781785289767.do

http://shop.oreilly.com/product/9781785289767.do

@findajit

in.linkedin.com/in/ajitkumarazad

48

great data visualization using sencha charts

Data & Analytics