Sencha Inc. | HTML5 Apps

Blog

Countdown to Ext JS 4: Drawing and Charting

February 09, 2011 | Jamie Avins

Native Drawing

Ext JS 4: Drawing & ChartsIt 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.)

Resizable Sencha Logo Component

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:

Draggable Tiger Component

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.

Area Chart

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.

Live Updated Chart - Animated

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:

Radar Charts

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.

Bar Series, Line Series, Pie Chart, Scatter Series

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.

There are 70 responses. Add yours.

Jay Garcia

4 years ago

I am *so* looking forward to getting rid of flash!  This is just one more dent in the armor!!

Jarred Nicholls

4 years ago

Mind blowing.

Andrea Cammarata

4 years ago

Absolutely awesome!

Animal

4 years ago

Superb job by the graphics team!

Jay Robinson

4 years ago

Beautiful graphics from beautiful code. Awesome work!

Americo Savinon

4 years ago

This is pretty amazing!

James Hughes

4 years ago

Very nice work though the charts take forever to render on the iPhone 4 and the animations a very choppy.  Guess thats one of the reasons for the “pre-beta” label.  But yeah good work so far guys.

James Hughes

4 years ago

Also can’t get any of the demos to display at all in IE6 - just get an “Object does not support….” error.

Mitchell Simoens

4 years ago

Love that it works with Ext Core too! Awesome job! Tested on iPad too, renders a little slow… would need a “Rendering…” message

Jamie Avins

4 years ago

@James Hughes Charting will be optimized for mobile devices in a forthcoming AddOn to Sencha Touch.  I’m not having any issues in IE6 though, maybe it is something in your environment?

Stuart

4 years ago

Will anything like the SpaceTree from InfoVis be included in ExtJS 4?

Tane Piper

4 years ago

Cannot wait to get my hands on this stuff.  Between this and the new Model stuff in 4, ExtJS will be hard to beat for data-heavy, real time interfaces

Jamie Avins

4 years ago

@Stuart - It shouldn’t be difficult, but we’ll want it to all hook into the new TreeStore.  We have a lot of exciting plans for additions after Ext JS 4 Charts and Touch Charts smile

Piet Crombach Netherlands

4 years ago

Wow! I tried a lot to learn ExtJS. Today I was proud about me. Solved a lot of problems in my app. Step by step I learn to handle such a complex framework. Now ExtJS 4.0 is coming. Although I have to learn a lot again I look forward to this release. At least with ExtJS ( and Sencha-touch of course) we can concentrate to JavaScript, CSS and, in my case, PHP. I love the idea to be able create everything for all OS and all devices with only ExtJS.
Great job!!!

Piet Crombach

4 years ago

I have used Infovis in the past to create some graph. I converted this module to Infovis 2.0
I have some problems now. I somewhere read about Infovis is now part of Sencha? How can I get help? Will Infovis be fully integrated in ExtJS and Sencha-touch?? I hope so.

Jacky

4 years ago

Will it be possible to handle chart bar click to drilldown to another chart?  Interactive charts will be super awesome.

Jamie Avins

4 years ago

@Jacky - Very simple to do, all the charts have standard Ext JS event support and we’ve added some methods to help with returning the chart item you are currently hovering over.

oppertunity

4 years ago

the demo does not work on chrome 8 (no chart are showing)

Mitchell Simoens

4 years ago

@oppertunity Does on chrome 9

hafizan

4 years ago

When you scroll/moved mouser cursor to image,can we see the figure.For now i dont see..

oppertunity

4 years ago

@Mitchell i’m not sure how many user is still using the old version of chrome.
i think extjs must working on the not-too-old browser
(Chrome 8 is newer than IE8 but IE8 is no have this problem)

jaranza

4 years ago

Congrats Sencha Team !!!

Jamie Avins

4 years ago

Nicolas and I used Chrome 7-9 almost exclusively to develop a lot of the SVG and chart portions of the code (not sure which Dmitry uses).  I’ll try these exact sample in Chrome 8 again once I get it to the lab, but there’s no reason it shouldn’t be working in Chrome 8.

Dan Gallo

4 years ago

Very nice!  The examples look impressive!

benyouto

4 years ago

Nice job.
Will it possible to make advanced stock charts like candelsticks or like google charts :
http://www.google.com/finance?q=INDEXDJX:.DJI

Nick

4 years ago

Great Ext.draw package. Awesome work guys!

Dmitriy Pashkevich

4 years ago

How about rotating a text that remains selectable?

P.S. Will there be an introduction to the new Fx package?

Kbaatar

4 years ago

Awesome, will try it to my next project certainly!

Nils Dehl

4 years ago

Nice Work!! really looking forward to play around with it!

siva

4 years ago

good job by Sencha…..Ext.Draw system is very excellent…i’m eagerly waiting for EXT4….

mrq

4 years ago

Are there plans to have the JiT “ForceDirected” graph in Ext.draw?
One of our projects need to use this kind of graph and we need to know now whether and when it will be available.

Markus Wichmann

4 years ago

Despite me personally being annoyed about customers still using IE6 in corporate environments, our customers will very much appreciate the fact that Ext.draw DOES work on IE6, too. Yet there’s one disadvantage that is still shared with Flash: Flawlessly printing pages with those charts on them is not possible. Depending on browsers, the charts look different, elements are missing, or the chart does not show at all. But hey, life’s more beautiful now, with ExtJS 4.x. Thanks.

Grgur

4 years ago

Fantastic! It makes ExtJS even more irresistible

Edwin

4 years ago

Awesome, although the drawing of graphs take some CPU, it`s very good for a pre-beta!

diego

4 years ago

congratulations,..
and about a gauge chart?

Christophe Geiser

4 years ago

Looks excellent - for charting and drawing !
What about other type of vizualisation techniques (e.g. force directed layout, dendograms, arc diagrams, ... ) also available in other vizualisation libraries (like protovis or - for some - infovis). It would be great and simplify a lot to be able to use one lib only.
Congrats again !
C.

Oriola Akeem

4 years ago

are the charts clickable!

Luke Fowell

4 years ago

This stuff looks amazing, would have never believed half this stuff was possible

Joe Lennon

4 years ago

Great stuff. Would love to see an example of this used to produce a hierarchical chart like an org. chart.

Les Szklanny

4 years ago

Great work, guys!

Two questions:
1.) Will I be able to use Ext charting to create microcharts (e.g. sparklines)?
2.) Are you still planning to include callouts (tooltips) in the initial release?

MrSparks

4 years ago

Congratulations on the end result Sencha! Very nice work indeed. :o)
Will zoom options/controls be added in the future? i.e. zoom into a date range via a dragable bar? Similar to how most stock charts work?

Jamie Avins

4 years ago

@Markus Wichmann - We’ve seen some printing issues with gradients in IE we’re currently working on resolving.  That and turning off some masking elements should resolve most of the printing issues you are currently seeing.
@Oriola Akeem - Of course, many of these example are already using mouse events for highlighting effects, it’s simple to use other events as well.
@Les Szklanny - Sparklines would just have smaller dimensions without much of the extras like legends, etc.  Tooltips and Callouts will be in the initial release.
@benyouto - Its possible to make just about any kind of chart, candlestick seems to be a popular request I’m sure we’ll have that in at some point.

Jamie Avins

4 years ago

@MrSparks - Yes, we want a zoom data range via a dragger implemented, hopefully before final release.

Jamie Avins

4 years ago

@oppertunity I have no issues with Chrome 8 (Just tested 6, 7, 8 9 again).  Maybe you have an extension issue?

Scott Martin

4 years ago

@benyouto

Stock charts are a breed all their own. One of the best I have seen so far is:
http://www.anychart.com/products/stock/overview/

It supports JSON, but it is flash. It would be great to get a JS version of these charts <bg>

Boban

4 years ago

Awesome work Sencha team! I can’t wait to play with this tools in my projects.

Thomas Alexander

4 years ago

Nice to see chart implementation in sencha,
Should we expect more Charts?  Like Gantt Chart

http://www.fusioncharts.com/free/gallery/show.asp?id=44&iframe=true&width=615&height=415&cat=Gantt+Chart

Grgur

4 years ago

@Thomas Alexander: Why don’t you have a look at extscheduler.com, it’s fabulous

LocutusUT

4 years ago

This is cool and all but isn’t it reinventing the wheel a bit?  What differentiates Ext Charts from High Charts and others in the JavaScript market place?  Doesn’t hurt to have a little competition. wink

Scott Martin

4 years ago

@LocutusUT

This allows a native extJS solution that does not require a plugin to work as with High Charts. In reading the forums, the HC plugin is not always current and has problems with the latest version(s).
I really do not like having to rely on numerous 3rd party solutions based on code created is someone’s spare time just to get something done, although it is appreciated.

Nico Barten

4 years ago

Is it also possible to create a Bar Chart with also negative values on the x-axis?

Miami Web Designer

4 years ago

wow, really nice looking and useful charts, I haven’t use yet the charting components of extjs 3 but this I might find an excuse to give it a try smile=, really nice job guys

Jamie Avins

4 years ago

@Nico Barten Yes, negatives work just fine and with a renderer you could change their color, etc.

Mukta

4 years ago

Can we have lined or some other format to visualize it as 3D format in scatter and area chart , can any one point such example

Sycren

4 years ago

There seems to be a bug with the mixed series chart:
http://www.pasteall.org/pic/show.php?id=9072
you can make data 3 get larger and larger by hovering on and off (so that when you hover off, the changed mouse cursor is still floating on top slightly)
Not sure where I should have sent this, but hope it helps.

Mukta

4 years ago

@Jesse Qiao I know http://raphaeljs.com/ but by question was specific to ExtJs Charts

MrSparks

4 years ago

@Jamie, That’s great news. Fingers crossed you can get the zoom data range dragger implemented for the final release. smile

Can I suggest a nice enhancement (if it’s not already on the drawing board)

The ability to add a single dragger that can be used to zoom the data range on more than one chart. This would allow the end user to zoom/move several related charts from the one control.

billprince

4 years ago

It looks awsome!

Dawesi

4 years ago

Awesome… I love rivalries… and this one’s going to give Flash a run for it’s money… I can’t wait to see their response (which is usually equally as awesome)... flash 10.2 is awesome also.. but the configuration here wins for me.

Any change of guages?

patrick

4 years ago

Great examples

sonacom

4 years ago

Très bien

Charlie

4 years ago

Can the colors applied to the chart and graph segments be changed?  Does one of the .js files have the default colors?  I thought I saw some rgb values in one of the “View Source”  listings.

chang

4 years ago

How difficult or easy is it to add printing capabilities?

lwe

4 years ago

Any way to include images (.png, etc.) in a drawing—in place of the Sprite?

Justin

3 years ago

How long til we’re lucky enough to get it implemented into SenchaTouch?

David

3 years ago

Good job! I like this

Bhushan G Ahire

3 years ago

Hi,

I have implemented four charts using sencha touch library and Ext Charts.
But on iPad its rendering and response time is very slow.

Also tap events are very slow in response.

Any idea how we can improve performance of this so that animation will look smooth.

Kevin Clark

3 years ago

When will we see the Ext Charts for Touch?

While using oppo charts is an option, there is a variance in the codebase that is tedious to debug to make a web and mobile (ipad) app have the same behavior.

Jack Chen

3 years ago

It’s a great work.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.