Jump to content
JChartFX Community
  • 0
Sign in to follow this  
FP2006

Chart Rendering Performance

Question

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.

  • Like 2

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×