Countdown to Ext JS 4: Drawing and Charting

February 09, 2011 | Jamie Avins

Native Drawing

It has always been hard to draw things in web applications. HTML is really not cut out for creating charts and other richly interactive imagery, but we really want that in our applications. Typically this need has been met with Adobe Flash, but this gave us two problems: we like writing code in JavaScript, and Flash isn’t available on all devices. Our solution to these problems is a pure-JavaScript drawing library that can create incredibly rich charting and graphics. It works everywhere — from IE6 to iOS — and will also be available as an add-on for Sencha Touch.

Powering all of this is Ext.draw, a brand new package for Ext JS 4 which normalizes drawing engine differences and provides a simple unified drawing API. Ext.draw works with SVG and VML, automatically using the best engine it can find on each browser. Everything is vector based, which means you can zoom it to any level and it still looks crisp. (We’re also planning Canvas support for a 4.x release.)

Let’s dive into some demos. The first one I want to show you is a resizeable Sencha logo created using Ext.draw. Try zooming in with your browser — even when zooming in, the Ext.draw components remain crisp. To get the logo into Ext.draw was easy — it was just an SVG export — Ext.draw understands it natively. Anything that can be exported as SVG can be rendered in Ext.draw, even tigers:

In this next example, you can drag the tiger around the screen, and try zooming to see the fine detail appear. This works on every browser.

The last example for Ext.draw is rotating text for all browsers. We’ve hooked up a simple example to show how easy it is. Ext.draw is awesome but it’s really just the appetizer. The main course is Ext.chart.

Incredible Charting

The brand new charting capabilities offered by Ext.draw are one of the most exciting parts of Ext JS 4. Our mission was clear: create the best JavaScript charting library in the world. We think we’ve done that and today we have 16 demos to share with you. Remember: this is pre-beta, but we hope you’ll like what you see. You can see all 16 examples on our demo page but I want to draw your attention to a few in particular.

The first two charts you probably think of are Lines and Bars. We have plenty of demos of those but let’s start with something brand new: area charts. Here’s a simple demo showing some random data. Try the Reload Data button to see it in action. Click the data titles in the legend to show and hide each series.

Ext.chart is integrated fully into the new data package so graphing your data is extremely easy. And of course, the charts are fully animated. In the following example, random data is added to the store every second along with an animation. The chart will scroll and the bottom axis will update once the line reaches the right side of the chart.

Another brand new chart is the Radar Chart, which comes in both filled and unfilled varieties. Again, it’s simple to get your data hooked up, and again, it’s fully animated:

We have the traditional charts, too: Lines, Bars, Columns, Pies, Scatter, even a mixture of them all.

All of these charting options and more come built in to Ext JS 4, but that’s not the only place you’ll be seeing them. I already mentioned that Charts will soon be offered as an add-on to Sencha Touch. What I didn’t tell you is that you’ll also be able to use charts even before you upgrade your apps to Ext JS 4.x. Ext JS 4 has brand new sandboxing which enables you to run it on the same page as previous Ext JS versions without conflict. This means you can start using the new charts with Ext JS 3 apps (once you get your 4.0 license), even if you don’t upgrade those apps straight away.

Theming and Customization

One of the most crucial requirements for Ext JS 4 was that it should be extremely easy to theme. This applies to Drawing and Charting just as much as it does to HTML-based components, so we set out to create the most customizable charting library we could. Almost every aspect of each chart can be tweaked to minute detail with a wide range of CSS-like settings. Changing colors, gradients, fonts and shadows is easy and can even be done after the chart has rendered. All aspects of a Chart’s look and feel can be rolled into a Chart Theme which makes it easy to share with all of the charts in your application. We’ll leave the topic of theming charts for another blog post.

But it’s not just appearance that can be customized — behavior can be customized as well. Because all of the shapes on the drawing surface are real Ext JS objects, it’s easy to add interactions when the user clicks or hovers the mouse over any part of your chart. And if you need a type of chart the framework doesn’t ship with, you can create a brand new Chart class building on the Ext.draw package, customizing it any way you want.

Try the Demos

All 19 of the drawing and charting demos are available online or to download as a zip file.

Today we just scratched the surface of what’s possible with the new Ext JS Drawing and Charting packages. We can’t wait to get more of these demos into your hands and see what you do with them. If you’d like to learn more about Drawing and Charting in Ext JS 4, take a look at my presentation from the Sencha Conference.