Chapter 10. Charts

 

This chapter covers

  • Learning the basics of Ext JS Charts
  • Deconstructing the Chart class hierarchy
  • Exploring the various Charts available in the framework
  • Implementing each of the Charts
  • Mixing a Chart series into a hybrid Chart
  • Customizing the look and feel of your hybrid Chart

Many of the applications that I’ve developed in the past have required data visualization. Whether it was the amount of space used for a particular disk volume or the value of a stock over time, the problems were exactly the same and ultimately amounted to a couple of major factors: which charting package will be used, and how much is it going to cost to integrate and ultimately manage?

All of this introduces risk to the application and adds support costs, which dissatisfies customers. Thankfully, this is all now behind us. Ext JS 3.0 provides a charting package that handles the four most commonly used charts—line, bar, column, and pie—thus mitigating the risk of using and supporting a third-party charting package and reducing support costs.

In this chapter, you’ll learn all about Ext.Charts. We’ll begin by exploring the anatomy of charts and discussing the various classes that compose the chart package. We’ll also visually explore the different types of charts available to you.

10.1. Defining the four charts

10.2. Charts deconstructed

10.3. Building a LineChart

10.4. Adding multiple Series

10.5. Constructing ColumnCharts

10.6. Constructing BarCharts

10.7. A slice of PieChart

10.8. Summary