The new Charting package that is shipping with the latest Ext JS 4 Preview is fantastic and really does dwarf the previous releases offering (which was also very good). I’m going to outline a few of the key features that make it so good.
Flashy? Yes. Flash? No
First things first, no Flash. That’s right, beautiful, animated, colourful, shiny graphs without any nasty plugins needed. Ideal. It relies on the Ext.draw package which uses SVG, Canvas or VML depending on what your browser has to offer and draws them directly on the page.
Maximum Interactivity
People like clicking stuff, your boss definitely wants to be able to click a graph point and have that data jump straight into his brain or at the very least expand out into a nice summary window. Now you can keep him happy.
Every part of the chart is a regular Ext object so you can attach to events and add functionality just like you would with any other part of Ext.
Create any Chart Style
You can create your own chart types by extending the Cartseisan Series class (or one of its sub-classes). This means you can finally have that bar chart that renders 10 bananas in a row to represent the amount of lunch your pet monkeys are actually eating. Sure, its not going to be that easy but its possible!
Smooooth Curves
Like things to be gentle and smooth? You’re in luck! You can now render line graphs with smooth paths through each point. Unfortunately it’s VERY difficult and requires a lot of code…
smooth: true
Oh wait, nope, that’s all it takes.
Variety out the Box
The sheer number of built in chart types is huge. At the base level you have 7 different types:
- Bar
- Column
- Pie
- Scatter
- Radar
- Area
- Line
And each of these has a boat load of configuration options to make them pretty unique even to themselves. And, as I mentioned before, its easily expandable until your imagination explodes.
Resolution Independent
All the graphs are created as vector graphics so you can zoom until your heart’s content without losing quality.
Customise. Everything.
Each tiny aspect of an Ext JS 4 chart can have its look customised through nothing fancier that its config object. From things like the appearance of a Line Graph’s point markers to the style of a pie slice when it’s hovered over – it’s all there, ready for people to make the most hideous looking graphs since Excel c.1999.
Make friends with Ext 3
You can use it with Ext 3! Yes, you heard me right. You can have Ext JS 4′s charting package sitting right alongside your Ext 3.x application and everyone will play nicely and won’t fight.
Mobile Friendly
You can use them with Sencha Touch. Ok, not yet but that is the plan and the way they have been written means it will be easy and work across all WebKit browsers.
Make Your Life Easier
Let’s be honest, the power that this charting and drawing package provides is going to make us developers’ lives much easier and keep our bosses happier than ever. This can only be a good thing, but will undoubtedly result in their imaginations running wild and demanding more – I’m confident that the future releases and the community contributions won’t disappoint!
Let us know if you’ve been tinkering with Ext JS 4 and its charting package and have some more words of praise.
For more information on Ext JS 4′s Charting package check out the links below:
Ext JS 4 Charts and Drawing Demos
Introduction to Charting and Drawing blog post
Sencha Conference 2010 Charting Presentation
Sencha Conference 2010 Charting Slides
Menu Mobile