My company can't use a Secha chart because of performance issue(slow loading)... is?
I developed a scatter chart with Sencha EXTJS that plots 1000+ dots. The problem is, the rendering of this chart takes too long to load on a browser. For instance, it takes 2+ minutes to load a 1000 dot chart. However, it gets exponentially slower with more dots. It takes 6+ minutes to load a 1500 dot chart.
For charts with less than 100 dots - it's more reasonable - takes about 10 seconds to load.
A lot of the processing is happening on the browser to generate the DOM to display the chart. The browser basically locks up until the rendering is complete and there is a huge spike in it's memory allocation. I believe this issue is not isolated to just dots, but also to bar charts and line charts that needs to display 1000+ items.
I even removed some of the extra perks - like animations from this chart, but that only saved about 10 seconds. Is there another way to reduce the time to load up this chart? Or is this one of the cons in using a client-side charting program instead of a server-side charting program?
The best way to reduce render time is to reduce the number of points in your data set. When designing your chart, you should be asking why you actually need to plot 1000 data points. Is someone going to really interact with all those data points? If so, you'll probably be better with using a server-side charting engine that will spit you out a .png or something.
But if you want to stick with client-side charting, try reducing your data set. While you may want to visually represent 1000 data sets, it may not be necessary to actually render 1000 representations of each data point. Instead, you could do some aggregation to reduce the total number of points that need to be rendered, but still (via aggregation) visualize the meaningfulness of the data on the chart. For example, if you're charting data across a date range, try aggregating data by day/hour/minute/etc. in order to slim down the total data set.
And remember, the usefulness of a chart is not the minutiae of data represented (that's something more suited to a tabular representation, like a grid). Rather, the usefulness of a chart/graph/whatever is the way in which a pile of hard-to-interpret data points can be distilled, visually, in a comprehensible manner in relation to one another, a time frame, etc.
If you are, on the other hand, trying to use a chart to communicate information about individual data points, I would argue that you're using the chart incorrectly. Just my opinion, though.
Thanks for your reply existdissolve. I really would like to stick with Sencha EXTJS for this scatter chart. But it's performance is too slow... unless I'm missing a configuration somewhere to speed it up.
I looked into Google Charts API and it's performance for generating scatter charts is blazingly fast. Google Charts API is also a client-side charting framework. I'll have to investigate more.
Sencha Premium Member
I have the same problem, I need to show charts with big detail as electrocardiogram, ... I could not show only some points. I using line chars and their are special slow when I close/destroy panel. I am talking about 800 points, I think that was not a question of my charts, it was a sencha performance question. Anybody know idea to increase performance.
As much as I like Ext JS, it pains me to say that the charting package is not very scalable.
Take another charting library... 50,000 points and the scatter plot renders in 372 ms on my computer.
Tags for this Thread