Display a customisable day in a chart
Hi,
I'm currently trying to create a line chart which will show a days worth of time series data, with some basic controls at the top to allow the user to select which day they want to see, the problem I'm running into is how to effectively change the days data. I have a chartData object with several days worth of data in it, which is then constrained by a minimum and maximum on the primaryXAxis, I can change these values in the state, which re-renders the graph, however this makes the graph momentarily dissapear while it is re-rendering, I can't see a way of updating the maximum and minimum values of primaryXAxis without re-rendering.
I tried using the updateDataSource method of a chart controller, but this doesn't seem to take DateTime indexes, it only ?
Is there an effective way I can control the day of the data shown by the graph, but have it animate/otherwise move cleanly from one day to another? Thanks
example of the graph/controls I'm creating:
Hi Owen,
We have analyzed your query and to have a smooth transition in axis and series while updating the axis range, we suggest using the initialVisibleMinimum and initialVisibleMaximum. By dynamically updating the initialVisibleMinimum and initialVisibleMaximum properties using an axis controller, you can control the visible axis date range according to your requirement. We have shared a code snippet and sample for your reference.
|
DateTimeAxisController? _xAxisRenderer; final List<ChartData> chartData = [ ChartData(DateTime(2014, 1, 1), 30), ChartData(DateTime(2014, 1, 15), 40), ChartData(DateTime(2014, 2, 1), 35), ChartData(DateTime(2014, 2, 17), 55), ChartData(DateTime(2014, 2, 20), 70), ChartData(DateTime(2014, 3, 1), 60), ChartData(DateTime(2014, 3, 25), 80), ];
final TextEditingController _minDateController = TextEditingController(); final TextEditingController _maxDateController = TextEditingController();
void _updateDateRange() { try { _xAxisRenderer?.visibleMinimum = DateTime.parse(_minDateController.text); _xAxisRenderer?.visibleMaximum = DateTime.parse(_maxDateController.text); } catch (e) { // Handle parse errors ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Invalid date format')), ); } }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Without Animation [InitialVisibleMin and Max]'), ), body: Padding( padding: const EdgeInsets.all(16), child: Column( children: <Widget>[ TextField( controller: _minDateController, decoration: const InputDecoration( labelText: 'Enter Min Date (yyyy-MM-dd)', hintText: 'e.g. 2014-01-01', ), ), TextField( controller: _maxDateController, decoration: const InputDecoration( labelText: 'Enter Max Date (yyyy-MM-dd)', hintText: 'e.g. 2020-01-01', ), ), const SizedBox(height: 10), ElevatedButton( onPressed: _updateDateRange, child: const Text('Update Date Range'), ), const SizedBox(height: 20), Expanded( child: SfCartesianChart( enableAxisAnimation: false, primaryXAxis: DateTimeAxis( onRendererCreated: (DateTimeAxisController controller) { _xAxisRenderer = controller; }, // Sets the initialVisibleMinimum. initialVisibleMinimum: DateTime(2014, 1, 1), // Sets the initialVisibleMaximum. initialVisibleMaximum: DateTime(2014, 3, 25),
intervalType: DateTimeIntervalType.days, ), series: <CartesianSeries<ChartData, DateTime>>[ LineSeries<ChartData, DateTime>( animationDuration: 0, dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, ), ], ), ), ], ), ), ); } |
Output:
If you still face the issue, we kindly request you to try to replicate the reported issue in the below attached test sample along with the screen recording and revert us so that it will help us assist you in a better way.
Regards,
Preethika Selvam.
Attachment: fr194226_1f8b96ae.zip
