Hello, Im trying to use updatedatasource to update live data on my chart. Im not using an object for my datasource, im using a global map variable that is update directly from firebase. SO as data comes in to firebase, the datasource for the chart is updated, since it uses the same global variable. After i call updateDatasoruce, nothing happens to the chart. I need to completely rebuild the chart to get the data to update. Even calling setstate doesnt do anything because i dont rebuild every time i set state.
I used this to update the data. or try to:
chartInfo[site][siteCardInfo[site]['ShownChart']]['controller'].updateDataSource(addedDataIndexes: <int>[data.length - 1]);
i assign the controller like this:
onRendererCreated: (ChartSeriesController controller) {
if (chartInfo[site] == null) {
chartInfo[site] = {};
}
if (chartInfo[site][type] == null) {
chartInfo[site][type] = {};
}
chartInfo[site][type]['controller'] = controller;
},
The data comes in like this:
DataSnapshot dataValues = snapshot.data!.snapshot;
rawFirebaseData = dataValues.value as Map;
yields = rawFirebaseData["Yields"];
this is the datasource for the chart.
dataSource: yields[supplier][site]['YieldData'],
xValueMapper: ( data, x) => DateTime.parse(data['date']),
yValueMapper: ( data, y) => double.parse(data['yield'].toStringAsFixed(2)),
Hi Jesse,
We have a KB that explains how to get data from firebase real-time database and map it into the chart, we have shared the KB below for your reference you can modify the sample as per your requirement.
Regards,
Yuvaraj.
Im sorry but this is not helpful. I need to use the updateDataSource function with the controller because il have a lot of charts and a lot of datapoints on the screen at once. The link you provided does not use the updateDataSoruce function i like stated i needed.
Hi Jesse,
We have checked your code snippet and found that you have assigned a series controller value to
`chartInfo[site][type]['controller']` and updated the data source in
`chartInfo[site][siteCardInfo[site]['ShownChart'l]['controller']`. This is wrong and the controller value type is
ChartSeriesController and it can't be stored in the firebase database and you need a separate ChartSeriesController for each series type and update the data source using the respective series controller.
So, we kindly request you to share us with more information on your complete chart code snippet, screenshots, or screen recordings so that it will help us assist you in a better way.
Regards,
Yuvaraj.
You didnt copy paste that you just typed it wrong.... In my code and what is shown from my post is this:
chartInfo[site][siteCardInfo[site]['ShownChart']]['controller']
which is the same in my code as this:
chartInfo[site][type]['controller']
type = [siteCardInfo[site]['ShownChart']
You are missing a ']' when you typed it.
I am also not storing the controller in firebase. Its a local variable. Im still having issues with this not updating. I attached parts of my code for you to work with.
Use this to update the controller:
chartInfo[site][siteCardInfo[site]['ShownChart']]['controller'].updateDataSource(addedDataIndexes: <int>[data.length - 1]);
I can confirm that the controller im calling is the same controller im setting.
Hi Jesse,
I have checked the shared file and we couldn't reproduce the reported issue from that. So, we have created a sample that has a list that is used to store the controller which is got from the series onRendererCreated callback, and another list has data source information of each series while generating the list of series. After the chart build method is completed, we updated the particular series with the help of the respective series controller, and it is working fine. We have created a sample and shared it below. We hope it will help you to resolve the block you are facing.
Code snippet:
List<ChartSeriesController> controllers = []; List<List<ChartData>> data = []; @override void initState() { SchedulerBinding.instance.addPostFrameCallback((timeStamp) { Timer.periodic(const Duration(seconds: 1), (timer) { data[1].add(ChartData(data[1].last.x + 1, Random().nextInt(20))); controllers[1].updateDataSource( addedDataIndexes: [data[1].length - 1], ); }); }); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: SfCartesianChart( series: _getSeries(4), )), ); } // method it generate series and stores series controller List<ChartSeries> _getSeries(int i) { List<ChartSeries> series = []; for (int j = 0; j < i; j++) { late ChartSeriesController _controller; data.add(List<ChartData>.generate( 5, (index) => ChartData(index, Random().nextInt(20)))); series.add(LineSeries<ChartData, num>( dataSource: data.last, onRendererCreated: (controller) { _controller = controller; controllers. Add(_controller); }, xValueMapper: (ChartData _data, _) => _data.x, yValueMapper: (ChartData _data, _) => _data.y, )); } return series; } |
Regards,
Yuvaraj.
I made some progress but now im getting this issue. Do you know what this could be? When it gets to the end and starts adding more values it just stops. When i restart the app it should delete all data and start from zero. If i click add a point after 3 clicks it start to show some weird point over the other points as you see in the video. If i keep clicking it, it continues as you see in the video. When it gets to the end it just stops. If i setstate though, the chart updates with all the new points.
Hi Jesse,
We have checked the shared screen recordings and found that you didn't add any new data points and give the existing data point index alone to the addedDataIndexes property which is why it looks like this. While updating the data to the chart using the updateDataSource method you should give the last added data point index to the addedDataIndexes property then only it gets updated. We have shared the code snippet below for your reference.
Code snippet:
class MyHomePageState extends State<MyHomePage> { MyHomePageState() { timer = Timer.periodic(const Duration(milliseconds: 1000), (timer) { chartData .add(ChartSampleData(chartData.last.x! + 1, Random().nextInt(120))); // addedDataIndexes is denotes the index values of newly added data point _seriesController .updateDataSource(addedDataIndexes: [chartData.length - 1]); }); } Timer? timer; late ChartSeriesController _seriesController; List<ChartSampleData> chartData = <ChartSampleData>[ ChartSampleData(01, 29), ChartSampleData(02, 58), ChartSampleData(03, 65), ChartSampleData(04, 43), ChartSampleData(05, 84), ChartSampleData(06, 65), ChartSampleData(07, 43), ChartSampleData(08, 84), ]; @override Widget build(BuildContext context) { // Other required properties } } |
If you still facing the same issue please try to reproduce the reported issue in the previously shared sample it would be more helpful to us assist you in a better way.
Regards,
Yuvaraj.
I cant replicate the problem with your code. But something weird is going on with mine still. I have 9 datapoints. I am adding a datapoint to the datasource each time which shows from my previous video. You can see with these images. I have 9 points, but the chart only shows 5... If i set state and rebuild the chart using the same data, it shows the 9 points. But updatedatasoruce does not do anything. ALSO the last image shows the final chart that still has 7 points! but the same map that is being used as the datasource for that chart only has 2 points! because when i clicked a button the data from that datasoruce gets cleared. So when i click that button, that chart datasource gets cleared and a new points gets added. I clicked the button 2 times, i checked the datasoruce for that chart only had 2 points but the chart datasoruce never changed from the updatedatasoruce function.
Hi Jesse,
We have checked your query and found that you have cleared the data but you did not intimate the updataDataSource method that the data is removed from the data source. In the updateDataSource method, you must need to set the removedDataIndexes property when the data get removed from the data source and set the addedDataIndexes property when the data get added into the data source. Then only the controller knows the data get added or removed. We have shared the updateDataSource method related documentation below for your reference.
Code snippet:
int length = chartData.length; chartData.clear(); _seriesController.updateDataSource( removedDataIndexes: List<int>.generate(length, (index) => index).toList()); |
UG,
https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource
If you are still facing the issue please try to reproduce the reported issue and get back to us, it will be more helpful to us assist you in a better way.
Regards,
Yuvaraj.
So my issue was that the datasoruce that you use for the chart cant be wiped and data re-added to it. It needs to just have data added to it. So i had to create a new variable, copy the current content into it and just add to it as new content comes in. But now im running into another issue. For the most part its working but now i see that 2 dots are connected at the same time. Do you know what would cause this? See my attached video. Thank you
Hi Jesse,
We suspect that your data source has a non-linear value, so to resolve this please use the sortingOrder property in the series and sortFieldValueMapper to indicate which value needs to be sorted. We have shared the code snippet below for your reference.
Code snippet:
LineSeries<ChartData, DateTime>( dataSource: chartData, sortingOrder: SortingOrder.ascending, sortFieldValueMapper: (ChartData data, index) => data.x, xValueMapper: (ChartData data, index) => data.x, yValueMapper: (ChartData data, index) => data.y, ) |
UG, https://help.syncfusion.com/flutter/cartesian-charts/series-customization#sorting
If you are still facing the same issue please try to reproduce the reported issue in the previously shared sample and get back to us it will be more helpful to us assist you in a better way.
Regards,
Yuvaraj.