high amount of data points block the whole

[Matthias Koch]

When I try to render a chart with 3000 or 8000 points. The whole app is blocked until the rendering is finished. 

The rendering is really slow. The complete app is slowed down. 

Having 8000 points doesn't seem much. 

Is there any trick to speed this up, and unblock the app?

[Yuvaraj Gajaraj]

Hi Matthias,

Greetings from Syncfusion. We are not aware of what series type you used to render an 8000 data point. So, we check with the LineSeries that it renders properly without any block, if you want to improve the rendering speed more, we suggest you disable the series animation by setting the animationDuration value to 0. It will increase the rendering speed. We also suggest the FastLineSeries for loading a large number of data points, it is load faster than the line series. We have also attached the UG documentation regarding FastLineSeries and animationDuration below for your reference.

UG:

• https://help.syncfusion.com/flutter/cartesian-charts/chart-types/fast-line-chart

• https://help.syncfusion.com/flutter/cartesian-charts/series-customization#animation

If you have any further queries, please get back to us.

Regards,

Yuvaraj.

[Matthias Koch]

ah tank you

annimationDuration did the trick :)

works perfect now 

[Yuvaraj Gajaraj]

Hi Matthias,

Thanks for the update. If you have any queries, please get back to us, we are always happy to assist you.

Regards,

Yuvaraj.

[Antony Reegan]

Rendering 1000 LineSeries, each with 10000 data points, in a single SfCartesianChart.

The whole app is blocked until the rendering is finished. 

The rendering is really slow. The complete app is slowed down. 

can anyone help me out this problem. I attached sample code snippet for reference.

Ex:

SfCartesianChart(
primaryXAxis: const CategoryAxis(),
primaryYAxis: NumericAxis(
axisLabelFormatter: (AxisLabelRenderDetails args) {
late String text;
text = args.text;

if (double.tryParse(args.text)! < 0) {
text = 'OFF';
}
return ChartAxisLabel(text, TextStyle());
},
),

series: [
for (int index = 0; index < assemblylineDatas.length; index++)
FastLineSeries<ChartData, String>(
animationDuration: 0,
color: assemblylineDatas[index ].color,
width: 1.5,
dataSource: assemblylineDatas[index].assemblylineMappedValue,
xValueMapper: (ChartData data, i) => data.xValue,
yValueMapper: (ChartData data, i) => data.yValue,
),
],
);

 

[Lokesh Palani]

Hi Antony,

Query: When using 1000 FastLineSeries each with 10000 dataPoints, complete slow down:

When having 1000 FastLineSeries each with 10000 data points, which is around 10 million data points rendered. So, the PlotArea will almost be filled with FastLineSeries, and there will be no space to visualize the series clearly, and it will take some time to complete 10 million data points. So, we suggest you to load series on demand based on your requirements.

Suggestion for axisLabel customization:

We have noticed that you have converted the text from String to double in the axisLabelFormatter callback to customize the y- axis labels, here we suggest you to use the value from the AxisLabelRenderDetails, instead of converting text value to double.

We have following common factors that can be used to boost the performance of the chart when there is a need to plot high volume data.

·        Load and store the required data points in the initState method itself, and then set the dataSource to the chart series.

·        Use NumericAxis or DateTimeAxis instead of CategoryAxis and DateTimeCategoryAxis.

·        When there are large number of points to load in line series, you can use FastLineSeries instead of LineSeries.

·        Instead of enabling data markers and data labels when there are large number of data points, you can use Trackball to view the point information.

·        Set series animationDuration as 0 to disable the animation while loading large number of data points.

·        Use updateDataSource method while updating dynamic data points instead of calling setState. For more details refer ug -  https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource.

·        Use On-demand loading while rendering large data points, it can be used to load more data to the chart when the visible range reaches the end on dragging in the chart. For more details refer ug -   https://help.syncfusion.com/flutter/cartesian-charts/on-demand-loading

·        Use autoScrollingDelta property in the NumericAxis or DateTimeAxis, to show the number of dataPoints always visible in the SfCartesianChart. By using this, you can view the remaining data points by setting the enablePanning property to true in the ZoomPanBehavior. For more details refer ug - https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#auto-scrolling

If you still want to load 1000 FastLineSeries each with 10000 dataPoints in the SfCartesianChart, we request that you share more details regarding what you are trying to achieve in your project and the use case for your requirement. This will help us to assist you more effectively.

Regards,

Lokesh P.