Slowness when rendering multiple charts

[ottodude125]

I am creating a page that I displays twelve charts and each chart is a combination of two lines and a stacked bar. If I render the page with no charts it takes about 2.5 seconds to load. I have found that each additional call to my loadHoursChart() js function to add an additional chart to the page adds about 1 second to the page load time. With all these graphs the page is taking 14-16 seconds to load. I am wondering if anyone has any recommendations on how I can increase the speed of jchartfx so the page is more useable. I am not sure if I'm using jchartfx wrong or if it just wasnt designed to handle this large of a workload at once.

 

The haml view code creating the chart section of the page is http://pastebin.com/WRLHXjY5

The coffeescript code that renders these graphs is located at http://pastebin.com/Ruf2meru

If any additional information is needed just let me know and I'll add it. Thank you for any help!!

Edited July 28, 2014 by ottodude125

[angelr]

We ran a few tests at our end, trying to replicate the behavior you reported, and this is what we found:
 
We used 3 different tests on 3 different browsers:

• Test 1: An HTML webpage rendering (12) basic charts with some minor customization like series gallery types.
• Test 2: An HTML webpage rendering (12) charts with some data being passed to the charts.
• Test 3: An HTML webpage rendering (12) charts with custom visual attributes, like enabling animations, adding titles, changing labels, modifying the series fill mode and also passing data to the chart.

and these are the results we got:
 
 
Using a Timer
 

Browser	        Basic		+Data		+Visual Attributes
Firefox		1.75s		1.90s		6.10s
Chrome		1.65s		2.30s		3.61s
IE		1.58s		1.83s		4.23s

 

Using the browser Profiler with Cache
 

Browser		Basic		+Data		+Visual Attributes
Firefox 	0.08s		0.08s		0.10s
Chrome		2.01s		1.91s		3.60

 
Using the browser Profiler without Cache
 

Browser		Basic		+Data		+Visual Attributes
Firefox		5.09s		4.06s		11.3s
Chrome		2.26s		2.30s		2.21s

Test 1 - Basic.

chart1.getData().setSeries(5);   
chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Bar);
chart1.getSeries().getItem(1).setGallery(cfx.Gallery.Bar);
chart1.getSeries().getItem(2).setGallery(cfx.Gallery.Lines);
chart1.getSeries().getItem(2).setStacked(false);
chart1.getSeries().getItem(3).setGallery(cfx.Gallery.Lines);
chart1.getSeries().getItem(3).setStacked(false);

 

Test  2 - Passing Data

chart1.getData().setSeries(5);   
chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Bar);
chart1.getSeries().getItem(1).setGallery(cfx.Gallery.Bar);
chart1.getSeries().getItem(2).setGallery(cfx.Gallery.Lines);
chart1.getSeries().getItem(2).setStacked(false);
chart1.getSeries().getItem(3).setGallery(cfx.Gallery.Lines);
chart1.getSeries().getItem(3).setStacked(false);

for (var i = 0; i < 10; i++) {
        chart1.getData().setItem(0, i, Math.floor(Math.random() * (100)));
        chart1.getData().setItem(1, i, Math.floor(Math.random() * (100)));
        chart1.getData().setItem(2, i, Math.floor(Math.random() * (100)));
        chart1.getData().setItem(3, i, Math.floor(Math.random() * (100)));  

 }

 
 
Test 3 - Visual Attributes + Passing Data

chart1.getData().setSeries(5);   
chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Bar);
chart1.getSeries().getItem(1).setGallery(cfx.Gallery.Bar);
chart1.getSeries().getItem(2).setGallery(cfx.Gallery.Lines);
chart1.getSeries().getItem(2).setStacked(false);
chart1.getSeries().getItem(3).setGallery(cfx.Gallery.Lines);
chart1.getSeries().getItem(3).setStacked(false);
chart1.getAnimations().getLoad().setEnabled(true);// # animates drawing of graph
var titles = chart1.getTitles();
var title = new cfx.TitleDockable();
title.setText("Expected vs Worked/Flexed Hours");
titles.add(title);
chart1.getLegendBox().setDock(cfx.DockArea.Bottom);  
chart1.getAxisX().setStep(2);
chart1.getAxisX().setLabelAngle(45); 
chart1.getAxisY().getTitle().setText("Hours"); 
chart1.getAllSeries().setBarShape(cfx.BarShape.Cylinder);
chart1.getAllSeries().setStackedStyle(cfx.Stacked.Normal);
chart1.getAllSeries().setFillMode(cfx.FillMode.Pattern);
chart1.getAllSeries().setVolume(75);
chart1.getAllSeries().setStackedStyle(cfx.Stacked.Normal);

for (var i = 0; i < 10; i++) {
        chart1.getData().setItem(0, i, Math.floor(Math.random() * (100)));
        chart1.getData().setItem(1, i, Math.floor(Math.random() * (100)));
        chart1.getData().setItem(2, i, Math.floor(Math.random() * (100)));
        chart1.getData().setItem(3, i, Math.floor(Math.random() * (100)));
    }

 
 
As you can see there are different variables that might affect the chart rendering times like: the amount and location of the data being passed to the chart, the customized chart visual attributes, whether the page is cached or not, the browser type and version rendering the chart, location of jChartFX (plus other frameworks) libraries, among many others.
 
Attached you'll find the code and the screenshots of the samples we used for our tests, so you can use them as a base to troubleshoot the slowness issue you are reporting.

TestCharts - Basic.zip

TestCharts - Data.zip

TestCharts - VisualAttributes.zip

[ottodude125]

I apologize for the urls that were broken above. I updated the url's in my original post because the editor included the period at the end of the sentence in the url. 

[ottodude125]

Thank you very much for the response!! It was much more detailed than I expected and very helpful.

 

As a side note for anyone reading this down the road I am giving my coffeescript a chunk of json formated data for each graph which is then parsed before being passed to jchartFX. The data was similar to what I provided below except instead of there being one record there were fifty(50), and each of the twelve(12) graphs had a separate data set.

[{"Date":"2014-07-21","Work":0.0,"Flex":0.0,"Expected":29.0,"Baseline":88}]

Following the guidelines of the time trials above I ended up removing the following from my coffeescript code. By removing this I was able to get the page to load in on average about 6.5 seconds which is much more usable than the 14-16 seconds I was running into before.

chart.getAnimations().getLoad().setEnabled true # animates drawing of graph
titles = chart.getTitles()
title.setText "Expected vs Worked/Flexed Hours"
titles.add title
chart.getLegendBox().setDock cfx.DockArea.Bottom   
chart.getAxisX().setLabelAngle(45)  
chart.getAxisY().getTitle().setText("Hours")  
chart.getAllSeries().setBarShape cfx.BarShape.Cylinder
chart.getAllSeries().setFillMode cfx.FillMode.Pattern
chart.getAllSeries().setVolume 75

The coffeescript code I ended up using is:

chart.getAxisX().setStep 7
chart.getData().setSeries 5

chart.getSeries().getItem(0).setGallery cfx.Gallery.Bar
chart.getSeries().getItem(1).setGallery cfx.Gallery.Bar

chart.getAllSeries().setStackedStyle cfx.Stacked.Normal

chart.getSeries().getItem(2).setGallery cfx.Gallery.Lines
chart.getSeries().getItem(2).setStacked(false)
chart.getSeries().getItem(3).setGallery cfx.Gallery.Lines
chart.getSeries().getItem(3).setStacked(false)

chart.setDataSource items
chartDiv = document.getElementById("hoursPerDayHistory" + user["id"])
chart.create chartDiv