Great data visualization using Sencha Charts
-
Upload
ajit-kumar -
Category
Data & Analytics
-
view
556 -
download
0
Transcript of 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
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
● 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
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
For a chart, we need...
● A way to describe/program a chart● A browser/webview to render the chart
5
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Drawing options that we have...
VML1998
19992004
6
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
So, to draw something like this...
7
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
We will have to work with...
● Element● Attribute● Event● DOM Manipulation● API
8
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
As they are different...
Canvas SVG
9
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
And their outputs (using defaults) are different...
10
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
It is...
A Sencha package to create stunning visualizations for both web and mobile applications
12
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
I give you Surface...
Surface(Sencha Charts)
VML SVG Canvas
13
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
It offers...
● Sprites (e.g. circle, line, etc.)● Abstracted drawing surface● Soft events
And
● A consistent programming model
14
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
To use, we need...
● Sencha Charts package● A browser/webview with drawing capability
15
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
It has three chart types...
17
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Explore them...
Sencha Charts Kitchen Sink
18
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Let us get the vocab right...
19
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Polar
Ext.define(‘SCE.view.main.Main’, {extend: ‘Ext.container.Container’,xtype: ‘app-main’,layout: {
type: ‘fit’},items: [{
xtype: ‘polar’,…store: {},axes: [],series: [],interactions: []
}]});
21
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
SpaceFilling
Ext.define(‘SCE.view.main.Main’, {extend: ‘Ext.container.Container’,xtype: ‘app-main’,layout: {
type: ‘fit’},items: [{
xtype: ‘spacefilling’,…store: {},series: [],interactions: []
}]});
22
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
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
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
More detailed one...
25
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Surface has layers...
Background
Main
Grid
Series
Axis
Chart
Overlay
Events
z-index
lowest
highest
26
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Main classes are...
● Ext.chart.AbstractChart● Ext.series.Series● Ext.chart.series.sprite.Series● Ext.draw.Component● Ext.draw.Surface
27
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
What if I have to create this..?
29
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Here is the design...
30
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
What about this..?
32
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
The design would be...
33
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
And, this one..?
35
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
This shall do...
36
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Theming
We can theme:
● Chart and its background● Axes● Series● Markers● Legends● Tooltips● Labels
Using
● Configs● A custom chart theme● SASS
38
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.39
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Configs that drive...
● interactions● gestures
41
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Built-in interactions are...
● crosshair● crosszoom● itemhighlight● panzoom● rotate● rotatepie3d● iteminfo● itemedit
42
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Create custom interaction..
By extending Ext.chart.interactions.Abstract
43
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.45
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
http://walkingtree.github.io/chartsly/46
Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.
Be the Pro!
Available on:
● Amazon● Packt● Oreilly
47