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

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

Fundamentals 4

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

Walking Tree Consultancy Services Pvt. Ltd. Drawing options that we have... VML 1998 1999 2004 6

Walking Tree Consultancy Services Pvt. Ltd. So, to draw something like this... 7

Walking Tree Consultancy Services Pvt. Ltd. We will have to work with... • Element • Attribute • Event • DOM Manipulation • API 8

Walking Tree Consultancy Services Pvt. Ltd. As they are different... Canvas SVG 9

Walking Tree Consultancy Services Pvt. Ltd. And their outputs (using defaults) are different... 10

Walking Tree Consultancy Services Pvt. Ltd. It is... A Sencha package to create stunning visualizations for both web and mobile applications 12

Walking Tree Consultancy Services Pvt. Ltd. I give you Surface... Surface (Sencha Charts) VML SVG Canvas 13

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

Walking Tree Consultancy Services Pvt. Ltd. To use, we need... • Sencha Charts package • A browser/webview with drawing capability 15

Out-of-the-box Charts 16

Walking Tree Consultancy Services Pvt. Ltd. It has three chart types... 17

Walking Tree Consultancy Services Pvt. Ltd. Explore them... Sencha Charts Kitchen Sink 18

Walking Tree Consultancy Services Pvt. Ltd. Let us get the vocab right... 19

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

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

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

Architecture 23

Walking Tree Consultancy Services Pvt. Ltd. SVG HTML5 Canvas Chart Polar Cartesian Space Filling Draw (Container) Engine Surface Sprite Series Circle Rectangle Arc Text Path ……. Area Bar Pie ……. Radar Scatter Ellipse Image 24

Walking Tree Consultancy Services Pvt. Ltd. More detailed one... 25

Walking Tree Consultancy Services Pvt. Ltd. Surface has layers... Background Main Grid Series Axis Chart Overlay Events z-index lowest highest 26

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

Custom Cartesian Chart 28

Walking Tree Consultancy Services Pvt. Ltd. What if I have to create this..? 29

Walking Tree Consultancy Services Pvt. Ltd. Here is the design... 30

Custom Polar Chart 31

Walking Tree Consultancy Services Pvt. Ltd. What about this..? 32

Walking Tree Consultancy Services Pvt. Ltd. The design would be... 33

Custom SpaceFilling Chart 34

Walking Tree Consultancy Services Pvt. Ltd. And, this one..? 35

Walking Tree Consultancy Services Pvt. Ltd. This shall do... 36

Theming 37

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

Walking Tree Consultancy Services Pvt. Ltd. 39

Working with Touch Gestures 40

Walking Tree Consultancy Services Pvt. Ltd. Configs that drive... • interactions • gestures 41

Walking Tree Consultancy Services Pvt. Ltd. Built-in interactions are... • crosshair • crosszoom • itemhighlight • panzoom • rotate • rotatepie3d • iteminfo • itemedit 42

Walking Tree Consultancy Services Pvt. Ltd. Create custom interaction.. By extending Ext.chart.interactions.Abstract 43

Walking Tree Consultancy Services Pvt. Ltd. 45

Walking Tree Consultancy Services Pvt. Ltd. http://walkingtree.github.io/chartsly/ 46

Walking Tree Consultancy Services Pvt. Ltd. Be the Pro! Available on: • Amazon • Packt • Oreilly 47

Walking Tree Consultancy Services Pvt. Ltd. Be the Pro! Available on: • Amazon • Packt • Oreilly 48 50% Off Code: SENCON50

@findajit in.linkedin.com/in/ajitkumarazad 49

Great Data Visualization using Sencha Charts

Great Data Visualization using Sencha Charts

More Decks by Ajit Kumar

Other Decks in Technology

Featured

Transcript