When timer counts every 5 seconds only the blue chart is plotted on the chart and not the red
When timer counts every 5 seconds only the blue chart is plotted on the chart and not the red.
This is the full code:
import 'dart:async';
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:salescore_mobile_app/app_api_connections/get_token.dart';
import 'package:salescore_mobile_app/app_controllers/utility/convertors/datetime_convertor.dart';
import 'package:salescore_mobile_app/app_controllers/utility/performance_controllers/stop_watch_controller.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import '../../app_api_connections/get_datafeed.dart';
import '../../app_controllers/utility/security_controllers/get_shared_preferences.dart';
class PerformanceOverview extends StatefulWidget {
const PerformanceOverview({Key? key}) : super(key: key);
@override
State<PerformanceOverview> createState() => _PerformanceOverviewState();
}
class _PerformanceOverviewState extends State<PerformanceOverview> {
_PerformanceOverviewState() {
timer = Timer.periodic(const Duration(seconds: 5), _updateDataSource);
}
Timer? timer;
List<_ChartData>? chartData;
late int count;
ChartSeriesController? _chartSeriesController;
@override
void dispose() {
timer?.cancel();
chartData!.clear();
_chartSeriesController = null;
super.dispose();
}
@override
void initState() {
count = 1;
chartData = <_ChartData>[
_ChartData(0, 0, 0),
];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
width: 500,
child: SfCartesianChart(
title: ChartTitle(text: 'speed data request per minute'),
plotAreaBorderWidth: 0,
primaryXAxis: NumericAxis(
title: AxisTitle(text: "request per minute"),
interval: 1,
autoScrollingDelta: 100,
autoScrollingMode: AutoScrollingMode.start,
),
primaryYAxis: NumericAxis(
title: AxisTitle(text: "speed data request(second)"),
maximum: 4,
interval: 0.1,
plotBands: [
PlotBand(
shouldRenderAboveSeries: false,
start: 0,
end: 1,
color: Colors.green,
opacity: 0.4)
],
),
series: <CartesianSeries<_ChartData, int>>[
LineSeries<_ChartData, int>(
onRendererCreated: (ChartSeriesController controller) {
_chartSeriesController = controller;
},
dataSource: chartData!,
color: Colors.red,
xValueMapper: (_ChartData sales, _) => sales.x,
yValueMapper: (_ChartData sales, _) => sales.y,
animationDuration: 0,
),
LineSeries<_ChartData, int>(
onRendererCreated: (ChartSeriesController controller) {
_chartSeriesController = controller;
},
dataSource: chartData!,
color: Colors.blue,
xValueMapper: (_ChartData sales, _) => sales.x,
yValueMapper: (_ChartData sales, _) => sales.y1,
animationDuration: 0,
),
]),
),
)
],
),
),
);
}
Future<void> _updateDataSource(Timer timer) async {
chartData!.add(
_ChartData(count, _getRandomInt(0.5, 1.5), _getRandomInt(0.5, 1.5)));
if (chartData!.length == 40) {
chartData!.removeAt(0);
_chartSeriesController?.updateDataSource(
addedDataIndexes: <int>[chartData!.length - 1],
removedDataIndexes: <int>[0],
);
} else {
_chartSeriesController?.updateDataSource(
addedDataIndexes: <int>[chartData!.length - 1],
);
}
count = count + 1;
}
double _getRandomInt(double min, double max) {
final math.Random random = math.Random();
return min + random.nextDouble();
}
}
class _ChartData {
_ChartData(this.x, this.y, this.y1);
final int x;
final double y;
final double y1;
}
Hi FD,
Greetings from Syncfusion. The controller from the onRenderCreated callback is series based. Adding a new data point using ChartSeriesController.updateDataSource will only update a single series. If you need to update a data point in multiple series at the same time, you must have different controllers for each series. We have modified your snippets and shared them below for your reference.
UG: https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource
Code snippet:
|
// Initializing the series controller. ChartSeriesController? _chartSeriesController1; ChartSeriesController? _chartSeriesController2;
// Used in the series. SfCartesianChart( series: <CartesianSeries<_ChartData, int>>[ LineSeries<_ChartData, int>( onRendererCreated: (ChartSeriesController controller) { _chartSeriesController1 = controller; }, ), LineSeries<_ChartData, int>( onRendererCreated: (ChartSeriesController controller) { _chartSeriesController2 = controller; }, ), ], ),
// Update the data using controller. Future<void> _updateDataSource(Timer timer) async { if (chartData!.length == 40) { _chartSeriesController1?.updateDataSource( ); _chartSeriesController2?.updateDataSource( ); } else { _chartSeriesController2?.updateDataSource( ); _chartSeriesController1?.updateDataSource( ); } } |
Regards,
Yuvaraj.
