Chart Rendering Performance

[FP2006]

We are charting 700 series that each have 40 datapoints.  Each series is being rendered as a line.  The code to render the chart is taking minutes to draw the chart.  Are there an speed tips that you have to help us minimize the time required to render a chart?

 

Thanks in advance for your advice.

[FP2006]

I am not sure if this helps, but the same data, being charted in the winforms version of ChartfX takes ~ 3 seconds.

 

I am hoping you know of a few settings to turn on/off that will help performance.

 

Thanks in advance.

[JuanC]

I informally tested a 700 series chart with 40 points and got the following on an OSX laptop

 

Safari: Between 3 and 4 seconds while the page is loaded (blue progress on address bar) and between 5 and 6 seconds for the chart to appear

Firefox: Between 6 and 7 seconds for the chart to appear

Chrome: Between 3 and 4 seconds for the chart to appear

 

The code I tried is something like this

 

var data = doRandomData(700, 40, 100, 0, 2);

chart1.setDataSource(data);

chart1.getLegendBox().setVisible(false);

chart1.getAllSeries().setMarkerShape(cfx.MarkerShape.None);

var divHolder = document.getElementById('myDiv');

chart1.create(divHolder);

 

Note that the last thing you want to do is chart.Create, if you use any API after this call that modifies the chart, the chart will be rendered more than once which in your case (700 series, 40 points) would make the page very slow.

 

Something to test would be to switch between CoreBasic and CoreVector, CoreBasic has a simpler code (as it does not allow you to style the galleries) but it might be slower as it draws each line segment independently. If you want to test apples against apples you might want to use a simpler line style while using vector as follows

 

chart1.getGalleryAttributes().setTemplate("LineBasic");

 

This will draw a line without a shadow which in your case will slow things down and probably make the chart even harder to understand. On my tests this improves the time that takes to see the chart on the page.

 

Finally about your question about jChartFX and ChartFX for WinForms and their speed comparison, they both share the same source code, obviously the javascript version has to be interpreted and/or compiled by your browser, additionally we chose in jChartFX to render using SVG, this allows you to modify the chart's appearance using CSS but is known to be slower than using Canvas.

 

When rendering using SVG our code is actually pushing objects to the browser's DOM which will be eventually painted by the browser later.

 

We have been researching providing an alternate canvas implementation but do not have firm plans yet, the tricky part when using canvas would be hit testing beside the fact that you will not be able to use CSS to customize the chart and also certain effects (such as the line shadow using blur) would not be practical on a canvas implementation.

 

Regards,

 

JuanC