Do ExtJS charts perform better than FusionCharts? - extjs

Question

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?

Answer 1

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:
OS X: 15-inch MacBook Pro 5,1, 2.4 GHz Intel Core 2 Duo, 4 GB RAM
Win7: 21-inch iMac 4,1, 1.83 GHz Intel Core 2 Duo, 2 GB RAM
WinXP: same iMac running XP in VirtualPC (1 GB RAM)
=========
OS X 10.7
=========
Browser/Test Real Mem (MB) Virt Mem (MB) Priv Mem (MB) CPU (%) Render (s)
--------------------------------------------------------------------------------------------
Chrome 17.0.963.56
F1 653 532 333 14 22.8
F2 648 535 336 15 22.7
F3 656 538 339 15 22.3
--- --- --- --- ----
652 535 336 15 22.6
E1 104 129 80 0 4.0
E2 104 129 80 0 4.7
E3 104 129 80 0 3.7
--- --- --- --- ----
104 129 80 0 4.1
+/- -84% -76% -76% -100% -82%
Firefox 10.0.2
F1 905 450 257 14 10.1
F2 889 435 242 15 10.5
F3 889 465 272 15 10.1
--- --- --- --- ----
894 450 257 15 10.2
E1 239 230 161 0 3.5
E2 256 215 177 0 3.7
E3 253 218 181 0 4.6
--- --- --- --- ----
249 221 173 0 3.9
+/- -72% -51% -67% -100% -62%
Safari 5.1.3
F1 1070 998 717 16 22.7
F2 1130 993 670 16 23.0
F3 1120 902 631 17 22.9
---- --- --- --- ----
1107 964 673 16 22.9
E1 153 290 125 0 3.4
E2 153 291 125 0 3.5
E3 153 291 125 0 3.3
---- --- --- --- ----
153 291 125 0 3.4
+/- -86% -70% -81% -100% -85%
=========
Windows 7
=========
Browser Working Set (MB) Priv Working Set (MB) Commit Size (MB) CPU (%) Render (s)
------------------------------------------------------------------------------------------------------
Chrome 17.0.963.56
F1 638 619 633 45 16.9
F2 639 620 633 43 16.8
F3 639 620 633 45 16.9
--- --- --- --- ----
639 620 633 45 16.9
E1 100 85 96 0 4.4
E2 95 81 92 0 4.5
E3 101 87 98 0 4.3
--- --- --- --- ----
99 84 95 0 4.4
+/- -85% -87% -85% -100% -74%
Firefox 10.0.2
F1 650 638 657 52 11.5
F2 655 641 659 54 16.9
F3 650 638 656 52 11.4
--- --- --- --- ----
651 639 657 52 13.3
E1 138 111 119 0 3.6
E2 141 113 121 0 3.6
E3 134 106 114 0 3.8
--- --- --- --- ----
138 110 118 0 3.6
+/- -79% -83% -82% -100% -73%
IE 9.0.8112.16421
F1 688 660 702 19 13.1
F2 645 617 661 16 19.0
F3 644 615 660 15 19.0
--- --- --- --- ----
659 631 674 17 17.0
E1 100 73 90 0 4.8
E2 98 73 90 0 4.5
E3 99 73 90 0 4.3
--- --- --- --- ----
99 73 90 0 4.5
+/- -85% -88% -87% -100% -74%
==========
Windows XP
==========
Browser/Test Mem Usage (MB) Virt Mem Usage (MB) CPU (%) Render (s)
--------------------------------------------------------------------------------
IE 8.0.6001.18702
F1 653 658 56 19.5
F2 652 658 58 19.6
F3 652 658 60 18.9
--- --- --- ----
652 658 58 19.3
E1 272 266 2 38.5
E2 271 266 2 37.4
E3 271 266 2 37.3
--- --- --- ----
271 266 2 37.7
+/- -58% -60% -97% +95%
IE 7.0.5730.13
F1 721 726 80 29.1
F2 691 698 75 25.9
F3 695 698 78 27.0
--- --- --- ----
702 707 78 27.3
E1 302 294 1 67.4
E2 301 294 0 66.5
E3 301 294 0 65.8
--- --- --- ----
301 294 0 66.6
+/- -57% -68% -100% +144%
Notes:
- CPU (%) was measured once the charts had finished rendering and
the browser was idling.
- Render (s) was the time measured between when the data finished
loading and when the charts were fully rendered and usable.
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.

Answer 2

From my experience ExtJs 4 charts are still raw and have a lot of issues. For example the Time axis is really buggy, and I have to find workarounds just to display several series of line chart (finally replaced it with a numeric axis, loading timestamps into it). It also has performance issues on big data sets, so I have to group data and reduce it to smaller sets.
But on another hand I'm really glad that Sencha eventually replaced flash charts with html5 ones. It actually gives you a freedom to modify and adjust chart as you want. Sometimes it requires looking into source code of a chart, but anyway it's not flash and it's cool! I believe Sencha will improve their charts soon.