Chapter 10. Drawing and charting
This chapter covers
- Drawing in the browser with Ext.draw
- Understanding shapes and surface
- Creating sample drawings
- Using Ext charts and charting themes
- Configuring legends
Visual data representation is considered to be one of the most effective user experience mechanisms. Charts in particular are valuable eye candy for any decision maker, which is why chart-rich dashboards are often the front-facing features of software presentations.
Web applications are also prone to the same trends. But plug-in-less charting support has only just begun to see the day of light, with Sencha acting as a trendsetter in the movement.
Compared to its predecessor, Ext JS 4 has a vast number of upgraded components. The charting package has not only been upgraded but also completely rewritten. No longer does it require Flash or any other external dependencies to render awesome charts. Powered by the Ext.draw package, Ext JS 4 features new chart types, such as Scatter, Gauge, and Radar. In this chapter you’ll learn how to implement the available chart types.
Because the goal of Ext JS charts is to no longer rely on Flash to display awesome graphics, the Sencha team has come up with an API dedicated to drawing that enables lines and shapes to be drawn directly within a browser. For you to understand how charts work, we’ll first take a deep dive into the new Ext.draw package and learn how charts are drawn.