Jump to content
JChartFX Community
  • 0

Chart Rendering Performance



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
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 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);

var divHolder = document.getElementById('myDiv');
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
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.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...