Scroll to previous points with fixed window size of the graph

[Harshul2023]

I have a graph of some random points with fixed window size of 500 i want only latest 500 to be visible which works fine Also the graph is panning and zooming smoothly but When i stop the graph onlly latest 500 points are visible which is correct but i am not able to scroll back to view previous points i can only zoom and pan on latest 500 points however i want to see all the previous points also

import 'dart:async';

import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:get/get_navigation/get_navigation.dart'; import 'package:get/get_navigation/src/root/get_material_app.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'chartController.dart'; import 'dart:math' as math; void main(){ runApp(GetMaterialApp(home: MyHomePage(title: "bhang"))); } class MyHomePage extends StatefulWidget { MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { late ZoomPanBehavior _zoomPanBehavior; MyController chartController = Get.put(MyController());

bool isGeneratingData = false; late Timer timer; @override void initState() { _zoomPanBehavior = ZoomPanBehavior( enableMouseWheelZooming: true, enablePinching: true, zoomMode: ZoomMode.x, enablePanning: true,

);
super.initState();

}

@override Widget build(BuildContext context) { return SafeArea( child: Column( children: [ Container( decoration: const BoxDecoration( color: Colors.white, ), height: 250, child: Obx( () => SfCartesianChart( zoomPanBehavior: _zoomPanBehavior, primaryXAxis: NumericAxis( anchorRangeToVisiblePoints: true, // minimum: _getVisibleMinimum(chartController.chartData.length), maximum: getVisibleMaximum(chartController.chartData.length), // autoScrollingDelta: getAutoScrollingDelta(500), // // autoScrollingMode: AutoScrollingMode.start, ), primaryYAxis: NumericAxis( isVisible: false, ), plotAreaBorderWidth: 0, series: <LineSeries<LiveData, int>>[ LineSeries<LiveData, int>( onRendererCreated: (ChartSeriesController controller) { chartController.chartSeriesController = controller; }, dataSource: chartController.chartData.value, color: const Color.fromRGBO(192, 108, 132, 1), xValueMapper: (LiveData sales, ) => sales.time, yValueMapper: (LiveData sales, _) => sales.speed, ) ], ),

        ),
      ),
      FloatingActionButton(
        onPressed: () {
          if (isGeneratingData) {
            timer.cancel();
          } else {
            timer = Timer.periodic(Duration(milliseconds: 0), (timer) {
              final random = math.Random();
              final newData = LiveData(
                chartController.chartData.isEmpty ? 0 : chartController.chartData.last.time + 1,
                random.nextDouble() * 100,
              );

              chartController.chartData.add(newData);
              if (chartController.chartData.length >= 500) {
                // chartData.removeRange(0, chartData.length - 999);
              }

              chartController.chartSeriesController.updateDataSource(
                addedDataIndex: chartController.chartData.length - 1,
              );
            });
          }
          isGeneratingData = !isGeneratingData;
          setState(() {});
        },
        child: Icon(isGeneratingData ? Icons.pause : Icons.play_arrow),
      ),

    ],
  ),
);

}

int getAutoScrollingDelta(int dataLength) { int visiblePoints = 500; // Number of points initially visible if (dataLength <= visiblePoints) { return visiblePoints; // If data length is less than or equal to visible points, start from the beginning } return (dataLength - 1); // Start from the last data point }

double _getVisibleMinimum(int dataLength) { int fixedWidth = 500; // Display only the most recent 1000 points if (dataLength <= fixedWidth) { return 0; // If data length is less than or equal to 1000, start from the beginning } else { return (dataLength - fixedWidth).toDouble(); // Start from 1000 points before the last data point } }

double _getVisibleMaximum(int dataLength) { if (dataLength <= 500) { return 500; // If data length is less than or equal to 1000, start from the beginning } return (dataLength - 1).toDouble(); // End at the last data point }

}

class LiveData { LiveData(this.time, this.speed);

final int time; final double speed; }

class MyController extends GetxController { late ChartSeriesController chartSeriesController; // RxList chartData = [].obs; // RxInt time = 0.obs; // RxDouble visibleMinimum = 0.0.obs; // RxDouble visibleMaximum = 1500.0.obs; RxList chartData = [].obs;

}

[Harshul2023]

Solved