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.