Data visualization has always been an integral part of an application, because of its power to quickly disseminate information. It is no different for an application developed using Sencha Ext JS or Sencha Touch frameworks. Recently, with the launch of Ext JS 5, Sencha has created a separate charting package—Sencha Charts—to add charting capability to an application. The beauty is that the same Sencha Charts library works inside desktop applications that run Ext JS, as well as in touch- or mobile-based applications that run Sencha Touch.

There are two ways to draw in a browser—Scalable Vector Graphics (SVG) and Canvas API. Though VML also exists for older IE browsers, we have excluded it for brevity. All the JavaScript charting libraries use SVG and Canvas API to offer charting capability to their users—for rendering as well as interactions. Understanding them will provide the foundation that is needed to understand Sencha Charts and its capabilities, and more importantly, reasons to use it.

SVG and Canvas are supported by browsers to render graphics. SVG was introduced in 1999 to render vector graphics, which can scale up or down, based on the screen resolution, without any visual distortion, as compared to raster one. SVG works similar to XML where you work with elements, attributes, and styles. SVG is a retained mode graphics model that is persisted in browser memory and we can manipulate it through code. This manipulation leads to automatic re-rendering where the user sees the updated drawing.

Canvas was a new specification brought to us by Apple in 2004. It follows an immediate mode graphics model, where it renders the drawing and forgets it. It does not have a built-in scene graph that SVG has, where it retains the graphics in memory and allows its manipulation. So, to recreate the same drawing, you will have to call the APIs to redraw it on the canvas.

In this chapter, we will do the following: