These weeks I have been working in an application that shows some sea physical data (sea level, waves altitude, water temperature, wind strength,...) using scatter plots. Now the application uses an applet to display the XY graphs which, I must say, is incredibly fast. But, as I commented before in the digital signature entries, applets are now a quite obsoleted solution and sometimes are not very good in terms of compatibility (users need to have a Java Virtual Machine installed, problems with different versions, many linux distributions use by default openjdk/icedtea/gcjwebplugin which crashes sometimes and many other issues which usually generate a lot of complaints). I decided to study a direct browser solution using new HTML5 and javascript features.
Spending some time searching over the web I saw there are a lot of libraries to directly draw charts in javascript. But looking deeper I discovered the majority of them use the new HTML5 canvas tag. The canvas is a new component to render inside its area 2D shapes and images using javascript.
The first library I used was JSCharts (I did not think too much, it was at the first position in the previous link). It is very powerful but does not fit completely for my problem. The plots of the application were usually a magnitude (meters, degrees, velocity,... in the Y axis) throughout the time (X axis). In the applet version some magnitudes show a very large number of points (around ten thousand). JSCharts cannot handle such a number of points, the resulting graphs are very beautiful but too much complex for this large amount of data. There are some features that explains this fact: points are circles, a specific scatter plot does not exist and a line chart (with invisible line) must be used, time labels must be assigned separately,... All of them make JSCharts not fast enough to draw the 10,000 points in a reasonable time.
After this first disappointment I decided to just test with a direct canvas implementation (i.e. developing my own javascript that plots a very simple XY graph). But searching information about canvas I discovered a very straight forward graph library which also uses the canvas tag, RGraph. This implementation is much simpler than JSCharts and it has a direct scatter plot graph type. Developing a initial time/magnitude plot the times became very very competitive (for example RGraph scatter plot draws 10,000 points in less than a second in many browsers).
Finally a study about browser compatibility must be done. And one more time, same thing happened in the HTML5 video announcement, all Internet Explorers (included current IE8) do not support the canvas tag. Right now there is a ExCanvas project that emulates the canvas tag using VML. The solution (as you can see later) is incredibly slow and there are initiatives for doing the same using flash , silverlight or a ActiveX component. IE9, which is in beta state, is going to support canvas with many other HTML5 features. For this reason I prepared a little example of a XY plot to test usability with different numbers of points. The sample code draws a sine wave (javascript generated) in a period of time and let us change the number of points, showing finally the drawing time in a box (the part for generating the wave is not taken into account). At the end of the entry I present the little example inside an iframe (I know it is not very beautiful but this could be easily improved).
When I played with the resulting graph using different browsers numbers were the following (I took them not very precisely):
| 100 points | 1,000 points | 10,000 points |
iceweasel 3.5.15 (linux) | 26ms | 80ms | 712ms |
chromium 6.0.472.63 (linux) | 10ms | 18ms | 98ms |
firefox 3.6.12 (Windows) | 32ms | 130ms | 1,018ms |
firefox 4.0 Beta 7 (Windows) | 32ms | 120ms | 970ms |
chrome 7.0.517.44 (Windows) | 11ms | 32ms | 240ms |
IE8+ExCanvas (Windows) | 800ms | 3,850ms | 70,000ms+ |
IE9 Preview 7 (Windows) | 17ms | 65ms | 500ms |
Opera 10.63 (Windows) | 25ms | 49ms | 305ms |
My conclusion is a HTML5 plot solution results usable in any browser that supports canvas, but IE8 kills us again. Any canvas graph is fateful for many windows users. I decided some time ago to trigger all HTML5 new features when debian testing will distribute iceweasel 3.6 (squeeze must be released before) and chromium 6.0 (it is already) and IE9 will be released. As you can see in the numbers, times are very good in the last versions of the browsers and even better in the future ones. You already know but it is absolutely necessary to keep our browsers in their last versions. Now there are a lot of options (free, open source, distributed with the OS,...), so there is no excuse. Make web developers life easier...
Please, upgrade your browser!!!
Comments