Do ExtJS charts perform better than FusionCharts?

Question

We're thinking about replacing FusionCharts with ExtJS charts in our application, since:

1. 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.
2. We'd like to be able to display these charts on Flash-less mobile devices.
3. It's much harder to extend and manage FusionCharts' Flash components than normal DOM objects.
4. 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?

Plastid

Apples and oranges. I think you'll experience very different results in different browsers/devices. Why don't you run some test? – Hachmin

@Pumbaa80 Mostly because of time and pushback from execs. If the public opinion were that Ext's charting was stable and fast, I would definitely take the time to sandbox Ext 4 and rewrite our charts in at least a rough form, but it sounds like I should at least wait for 4.1 before I bother. – Plastid

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.

Plastid

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.

Exsanguinate

Thanks for the opinion. Our pages tend to have either a few really dense charts or a lot of really sparse charts, and the latter case is what's giving us problems. I don't want to fix those pages just to slow down the other ones. Sounds like I might need to wait on 4.1. – Plastid