Sencha Charts Essentials电子书

Sencha Charts Essentials

Table of Contents

Sencha Charts Essentials

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Fundamentals of Sencha Charts

Introducing the sample chart

Canvas and SVG

Preparation

Creating a line

Creating an axis

Creating an axis label

Creating a bar

Creating a marker on the bar

Creating a chart

Axes

Axis label

Bar chart with a marker

Creating an area chart with line stroking

Creating an area chart with fill

Crosshair lines

Sencha Charts Surface API

Axes

Axis label, bars, and markers

Area chart

Creating the crosshair

Summary

2. Working with Out-of-the-box Charts

Types of charts

Anatomy of a chart

Creating a cartesian chart

Creating a polar chart

Creating a spacefilling chart

Theming your chart

Engaging users with gestures

Summary

3. Sencha Charts Architecture

Architecture of Sencha Charts

A walkthrough of an existing CandleStick chart

Design of the Stock App

The sequence diagram

Construction and Initialization

Preview with RangeMask

CandleStick

Rendering

A walkthrough of a polar chart – radar

A walkthrough of a spacefilling chart – gauge

Summary

4. Creating a Custom Cartesian Chart

Creating a new financial chart

What is this chart all about?

Structuring the MACD chart design

Implementing a MACD chart

SCE.sprite.MACD

SCE.series.MACD

SCE.chart.MACD

Using MACD in an application

Summary

5. Creating a Custom Polar Chart

Creating a Market Clock

What is this chart all about?

Structuring the design

Implementing the Market Clock

SCE.store.MarketTimings

SCE.sprite.MarketClock

SCE.series.MarketClock

SCE.chart.MarketClock

SCE.view.main.Main

Adding legend support

Displaying the legend

Controlling the sprite visibility

Centering the sectors

Limiting the sector within the clock

Summary

6. Creating a Custom Spacefilling Chart

Creating a periodic table

What is this chart all about?

Structuring the design

Implementing the periodic table

SCE.store.PTElements

SCE.model.PTElement

SCE.sprite.PeriodicTableElement

SCE.series.PeriodicTable

SCE.view.main.Main

Standardizing the color selection

Working with store updates

Resizing

Summary

7. Theming

Getting ready

Styling using configs

Chart

Framing

Coloring the background

Image

Gradient

Color

Changing the color of the series

Creating room at the sides

Axis

Displaying grid lines

Styling an axis line

Styling axis labels

Displaying a custom label

Series

Animating a series

Using our own color

Highlighting

Styling a series sprite

Styling the marker

Customizing the rendering logic

Sprite

Legend

Theming using a custom theme

Theming using SASS and CSS

Summary

8. Working with Touch Gestures

Interacting with interactions

Using built-in interactions

Creating custom interactions

Displaying a trend line

Annotating a chart

Displaying more details of a series item

Summary

9. Comparison with Other JavaScript Charting Libraries

Google Charts

FusionCharts

amCharts

HighCharts

Summary

Index