I am working on app with Firebase real-time database and wanted to visualize the data using spline chart, and i tried syncfusion_flutter_charts it's really good, but so slow to render (about 1700 ms according to the debugger) and it's not even the full data, so is syncfusion is a good choice or should i change and if there is any tips to make the chart render faster or the app faster generally.
Chart Widget code:
SfCartesianChart(
plotAreaBorderWidth: 0.0,
primaryXAxis: DateTimeAxis(
minimum: _getToday(),
maximum: _getTomorrow(),
majorGridLines: const MajorGridLines(width: 0),
intervalType: DateTimeIntervalType.hours,
desiredIntervals: 2,
interval: 2,
dateFormat: DateFormat.H(),
),
primaryYAxis: NumericAxis(
majorGridLines: const MajorGridLines(width: 0),
axisLine: const AxisLine(width: 0.0),
),
series: <ChartSeries<VitalModel, DateTime>>[
SplineAreaSeries<VitalModel, DateTime>(
dataSource: data,
xValueMapper: (VitalModel sales, _) => sales.x,
yValueMapper: (VitalModel sales, _) => sales.yValue,
splineType: SplineType.cardinal,
cardinalSplineTension: .5,
borderWidth: 2,
borderColor: color,
onCreateShader: (ShaderDetails details) {
return ui.Gradient.linear(details.rect.topCenter,
details.rect.bottomCenter, <Color>[
color,
Colors.transparent,
]);
},
)
]),
CodePudding user response：
We have checked your code snippet, and in your query, you mentioned it takes around 1700 milliseconds to render a series and does not mention the number of data points used in your sample. So, can you please mention the number of data points have you used in your sample that will be more helpful to us.
As you fetch the data from the firebase, it may take time to fetch the data from the database. So can you please check the rendering duration after the data is fetched.
If you’re not intended to use the SplineSeries and looking for the line type series, we suggest the FatsLineSeries, which will help you to render a chart fast and improve performance.
Are you trying to update the live data from the firebase, we suggest the updateDataSource public method to update the data point instead of calling the setState() method. While using setState() it will re-render a whole widget. But in updateDataSource, it updates the latest added data point only not the whole widget. Can you please refer to the below KB and UG for further details.
You can also set the animationDuration value to 0 to disable the series animation, it will reduce the rendering duration.
UG: https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource