We’re thinking about replacing FusionCharts with ExtJS charts in our application, since:
- We already use ExtJS for our entire UI. It would be nice to remove the overhead and expense of another commercial third-party dependency and API.
- We’d like to be able to display these charts on Flash-less mobile devices.
- It’s much harder to extend and manage FusionCharts’ Flash components than normal DOM objects.
- A few particular pages of our app are chock full of charts (on the order of hundreds of spark-like charts), and Flash is devouring memory like it’s going out of style.
I’ve looked at FusionCharts’s JavaScript fallback, and it’s just not aesthetically sufficient. Plus, I don’t want a JavaScript implementation that’s a “fallback”.
We’re currently on ExtJS 3.2.0. Upgrading to 4.x is out of the question for the short term, but we could potentially sandbox Ext 4 to use just its charting if we deem it worth the effort.
So my question is essentially does ExtJS 4’s JavaScript charting perform significantly better than FusionCharts Flash charting? I’m mostly concerned with memory usage, secondarily with render time.
I see this Stack Overflow question indicating that, at least as of August 2011, Ext charts weren’t really up to snuff. I know Sencha was concentrating on improving stability and performance in 4.1. Does anyone know if it’s gotten better since then?
TL;DR
I saw phenomenal reductions in memory usage, CPU load, and render time by using charts in ExtJS 4.0.7 rather than FusionCharts 3.2, usually on the order of 70–85%.
Intro
I recently got some time to test Ext’s charting. It was mildly painful rewriting the components to integrate Ext 4 charts into Ext 3 panels, but with few days’ work, I could chart actual data from the server.
The basic charting problem I was trying to solve is shown in the image below:
We chart a trend of power readings for a number of outlets on a device. This worked fine in FusionCharts until we recently we started rendering devices with 168 outlets (and potentially several of these devices on a single page). I suspected that no browser would be able to handle that much Flash, so I built a basic page to render one of these devices and tested it in a few different browsers.
Test Results
“F” means FusionCharts. “E” means ExtJS.
Hardware:
Conclusions
In every metric other than render time on IE8 and IE7, ExtJS charts outperformed FusionCharts by a wide margin. Although the tests were specific to our use case, I would expect to see similar (if less drastic) results in similar situations — i.e., lots of charts on a single page.
This is to say nothing of the qualitative benefits of native charts, like real DOM scripting and styling, direct integration with the rest of the ExtJS framework, and access to charts on Flash-less mobile devices. If you can invest the time, charting in Ext 4 is a huge win.