Rendering Chart with Chart module is very slow. Is it possible to render it on client

When trying to display a chart (Using Outsystems Forge Chart Web component) with 20.000 datapoints it's very slow.

Getting and setting the data is fast, but the part where the server renders the page it's converting it to a SVG. This makes it very slow.

On other example site (Highcharts for example) there they put the values in the HTML and leave the rendering over to the client that's much faster.

Does anyone know a good solution how to achieve this?

Hi Peter Van Den Ochtend,

Can you share the oml? I'm thinking if the reason is the way points are being collected in OutSystems (to display then in the chart component).

Regards,

Are you really sure the svg is rendered on the server?

I mean, it's still is highcharts below the cover?


Yeah..  I was a little bit fast with my analysis...

The tag started with SVG..
It's indeed still highcharts behind it. But i see that the line is generated as a SVG path.

Is that normal use? Because with 20000 datapoints that can be a little bit much?

Is was looking into other chart frameworks (like charts.js). There the data is added to the page as JSON and the JS will create a graph of it. Dont know how that performs but it's indeed a different approach.

Sorry for my lack of reacting on a later moment.

A colleague of mine continued this "quest" and he found out a great functionality of the Highcharts library. It's called the boost mode.
The charts will be rendered by WebGL instead of SVG. The time to display a graph of 200000 points from 8 seconds to 0.2 seconds.

Demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/boost/line or https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/boost/line-series-heavy (even better). Mouseover for info is also goes much faster.
Remove the line of the boost.js in the javascript part to render it the SVG way.

My question. If Outsystems is using the Highcharts functionality in the charts module. Can that be extended so you can activate the boost mode when needed?