Updating autoScrollingDelta resets chart postion
Hi The43Joker,
Query 1: How to synchronize zooming, panning and auto-scrolling delta across multiple charts?
To synchronize zooming, panning and auto-scrolling delta across multiple charts are achieved using zoomPanBehavior. Each chart is controlled by a DateTimeAxisController that manages the zoom factor and position of the primary X-axis. The zoomPanBehavior enables panning, pinching, double tap zooming, and selection zooming, all restricted to the X-axis. Synchronization is achieved by updating the zoom factor and position across all charts whenever one chart is zoomed or panned. This is handled within the onZooming, onZoomStart, and onZoomEnd callbacks. Additionally, the autoScrollingDelta is dynamically adjusted via a set of buttons, allowing the user to change the auto-scrolling interval for the X-axis, effectively controlling how the charts scroll through data over specific time intervals. The use of GlobalKey ensures that each chart's state can be accessed and manipulated, maintaining synchronized behavior across all charts. We have shared a sample for your reference. You can modify the sample based on your needs.
Output:
Query 2: How achieve the autoScrollingDelta behavior without using autoScrollingDelta?
We are checking the possibility to achieve your requirement, and we will update further details within August 29, 2024. We appreciate your patience until then.
Regards,
Preethika Selvam.
Attachment: fr191309_7e5f2999.zip
Hi The43Joker,
Currently, we do not have direct support for your requirement. However, we have prepared a workaround to achieve the auto-scrolling delta behavior without using the autoScrollingDelta property. We have utilized a text input field and a dropdown menu to dynamically control the visible range (initialVisibleMinimum and initialVisibleMaximum) of the chart. The text field specifies the number of days, while the dropdown determines whether the range starts from the beginning ("Start") or ends at the last date ("End"). For any number of days entered, the range adjusts accordingly based on the selected option. To update the visible range dynamically, we use the DateTimeCategoryAxisController. This controller provides access to the axis properties that define the visible range of the chart. By setting visibleMinimum and visibleMaximum through this controller, we can adjust the displayed date range based on user input. When the "Start" option is selected, the range starts from the earliest date and extends for the specified number of days. Conversely, when the "End" option is selected, the range extends backward from the latest date by the specified number of days. We have shared a code snippet and a sample for your reference. You can modify the sample based on your needs.
Code snippet:
|
DateTimeCategoryAxisController? _xAxisRenderer; final ZoomPanBehavior _zoomPanBehavior = ZoomPanBehavior( enablePinching: true, enableMouseWheelZooming: true, enablePanning: true, ); final List<ChartData> chartData = [ ChartData(DateTime(2023, 01, 01), 35), ChartData(DateTime(2023, 01, 02), 28), ChartData(DateTime(2023, 01, 03), 34), ChartData(DateTime(2023, 01, 04), 32), ChartData(DateTime(2023, 01, 05), 42), ChartData(DateTime(2023, 01, 06), 35), ChartData(DateTime(2023, 01, 07), 28), ChartData(DateTime(2023, 01, 08), 34), ChartData(DateTime(2023, 01, 09), 32), ChartData(DateTime(2023, 01, 10), 42), ChartData(DateTime(2023, 01, 11), 35), ChartData(DateTime(2023, 01, 12), 28), ChartData(DateTime(2023, 01, 13), 34), ChartData(DateTime(2023, 01, 14), 32), ChartData(DateTime(2023, 01, 15), 42), ChartData(DateTime(2023, 01, 16), 35), ChartData(DateTime(2023, 01, 17), 28), ChartData(DateTime(2023, 01, 18), 34), ChartData(DateTime(2023, 01, 19), 32), ChartData(DateTime(2023, 01, 20), 42), ];
String dropdownValue = 'Start'; final TextEditingController _textController = TextEditingController();
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('DateTimeCategoryAxis'), ), body: Column( children: <Widget>[ Expanded( child: SfCartesianChart( zoomPanBehavior: _zoomPanBehavior, primaryXAxis: DateTimeCategoryAxis( dateFormat: DateFormat.d(), onRendererCreated: (DateTimeCategoryAxisController controller) { _xAxisRenderer = controller; }, initialVisibleMinimum: DateTime(2023, 1, 1), initialVisibleMaximum: DateTime(2023, 1, 20), ), series: <LineSeries<ChartData, DateTime>>[ LineSeries<ChartData, DateTime>( animationDuration: 0, dataSource: chartData, xValueMapper: (ChartData chartData, _) => chartData.x, yValueMapper: (ChartData chartData, _) => chartData.y, ), ], ), ), Row( children: [ // Text input for the number of days Expanded( child: TextField( controller: _textController, keyboardType: TextInputType.number, decoration: const InputDecoration( labelText: 'Enter Days', ), ), ), // Dropdown to select Start or End DropdownButton<String>( value: dropdownValue, onChanged: (String? newValue) { setState(() { dropdownValue = newValue!; }); }, items: <String>['Start', 'End'] .map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text(value), ); }).toList(), ), // Button to apply the range ElevatedButton( onPressed: () { int days = int.tryParse(_textController.text) ?? 1; days = days.clamp(1, chartData.length); // Ensure valid range
if (dropdownValue == 'Start') { // Adjust for Start button _xAxisRenderer?.visibleMinimum = chartData[0].x; _xAxisRenderer?.visibleMaximum = chartData[days - 1].x; } else { // Adjust for End button _xAxisRenderer?.visibleMinimum = chartData[chartData.length - days].x; _xAxisRenderer?.visibleMaximum = chartData.last.x; } }, child: const Text('Apply'), ), ], ), ], ), ); } } |
Output:
Please let us know if you need any further assistance.
Regards,
Preethika Selvam.
Attachment: fr191309_e03cbf90.zip
