O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Sencha Charts Essentials

Book Description

Create stunning charts and visualizations for both web and mobile applications

In Detail

Sencha Charts is a new and powerful library used to create rich and beautiful charts for your Sencha Touch and Ext JS applications. With built-in HTML5, Sencha Charts is optimized for performance and fully supportive of gestures and touch devices to make visualizing data effortless.

First, you will get to grips with charting fundamentals using multiple tools and then engage with the Sencha Charts architecture.

You will then learn how to use out-of-the-box charts, and then create your own custom cartesian, polar, and spacefilling charts to visualize your own data.

Finally, you will see how Sencha Charts compares with other charting libraries for all your data expression needs.

What You Will Learn

  • Set up and configure Sencha Charts and understand its extensibility capabilities
  • Create interactive HTML5 charts that are portable across the Web and touch/mobile
  • Deliver rich, professional, and engaging visualizations of complex, customized data including financial data, infographics, and so on
  • Understand the basic building blocks and the overall architecture of Sencha Charts
  • Get to grips with SVG and Canvas APIs to draw basic geometrical shapes
  • Create different types of charts, such as cartesian, polar, and spacefilling, in your application using out-of-box charts from Sencha Charts
  • Compare Sencha Charts with other charting libraries/SDKs

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Sencha Charts Essentials
    1. Table of Contents
    2. Sencha Charts Essentials
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Fundamentals of Sencha Charts
      1. Introducing the sample chart
        1. Canvas and SVG
        2. Preparation
          1. Creating a line
          2. Creating an axis
          3. Creating an axis label
          4. Creating a bar
          5. Creating a marker on the bar
        3. Creating a chart
          1. Axes
          2. Axis label
          3. Bar chart with a marker
          4. Creating an area chart with line stroking
          5. Creating an area chart with fill
          6. Crosshair lines
      2. Sencha Charts Surface API
        1. Axes
        2. Axis label, bars, and markers
        3. Area chart
        4. Creating the crosshair
      3. Summary
    9. 2. Working with Out-of-the-box Charts
      1. Types of charts
      2. Anatomy of a chart
      3. Creating a cartesian chart
      4. Creating a polar chart
      5. Creating a spacefilling chart
      6. Theming your chart
      7. Engaging users with gestures
      8. Summary
    10. 3. Sencha Charts Architecture
      1. Architecture of Sencha Charts
      2. A walkthrough of an existing CandleStick chart
        1. Design of the Stock App
        2. The sequence diagram
          1. Construction and Initialization
            1. Preview with RangeMask
            2. CandleStick
          2. Rendering
      3. A walkthrough of a polar chart – radar
      4. A walkthrough of a spacefilling chart – gauge
      5. Summary
    11. 4. Creating a Custom Cartesian Chart
      1. Creating a new financial chart
        1. What is this chart all about?
        2. Structuring the MACD chart design
        3. Implementing a MACD chart
          1. SCE.sprite.MACD
          2. SCE.series.MACD
          3. SCE.chart.MACD
        4. Using MACD in an application
      2. Summary
    12. 5. Creating a Custom Polar Chart
      1. Creating a Market Clock
        1. What is this chart all about?
        2. Structuring the design
        3. Implementing the Market Clock
          1. SCE.store.MarketTimings
          2. SCE.sprite.MarketClock
          3. SCE.series.MarketClock
          4. SCE.chart.MarketClock
          5. SCE.view.main.Main
        4. Adding legend support
          1. Displaying the legend
          2. Controlling the sprite visibility
          3. Centering the sectors
          4. Limiting the sector within the clock
      2. Summary
    13. 6. Creating a Custom Spacefilling Chart
      1. Creating a periodic table
        1. What is this chart all about?
        2. Structuring the design
        3. Implementing the periodic table
          1. SCE.store.PTElements
          2. SCE.model.PTElement
          3. SCE.sprite.PeriodicTableElement
          4. SCE.series.PeriodicTable
          5. SCE.view.main.Main
        4. Standardizing the color selection
        5. Working with store updates
        6. Resizing
      2. Summary
    14. 7. Theming
      1. Getting ready
      2. Styling using configs
        1. Chart
          1. Framing
          2. Coloring the background
            1. Image
            2. Gradient
            3. Color
          3. Changing the color of the series
          4. Creating room at the sides
        2. Axis
          1. Displaying grid lines
          2. Styling an axis line
          3. Styling axis labels
          4. Displaying a custom label
        3. Series
          1. Animating a series
          2. Using our own color
          3. Highlighting
          4. Styling a series sprite
          5. Styling the marker
          6. Customizing the rendering logic
        4. Sprite
        5. Legend
      3. Theming using a custom theme
      4. Theming using SASS and CSS
      5. Summary
    15. 8. Working with Touch Gestures
      1. Interacting with interactions
      2. Using built-in interactions
      3. Creating custom interactions
        1. Displaying a trend line
        2. Annotating a chart
        3. Displaying more details of a series item
      4. Summary
    16. 9. Comparison with Other JavaScript Charting Libraries
      1. Google Charts
      2. FusionCharts
      3. amCharts
      4. HighCharts
      5. Summary
    17. Index