How to achieve sliding viewport functionality using cartesian chart ?
In SfCartesianChart has support to achieve sliding view port functionality. You can achieve this by using the selectDataPoints public method, visibleMinimum, visibleMaximum, and onPlotAreaSwipe callback available in the chart widget.
The following steps explain how to maintain the selected data point is in the centre of the viewport in both dragging the chart towards the end and selecting the data points manually and you change this as per your requirement.
Step 1: Declare the series variables for storing axis visible minimum and maximum, data source, selection behaviour, selected point index, and other required variables as in the following code sample.
late List<OrdinalData> chartData; // Initializing with visible minimum and visible maximum as 1 and 5 respectively. double axisVisibleMin = 1, axisVisibleMax = 5; late SelectionBehavior selectionBehavior;
// create instance for axis controller
NumericAxisController? axisController; int? selectedPointIndex; bool isLoad = false;
Step 2: Initialize the data, and selection behavior in the init state of the widget as like below.
@override
void initState() {
//Initialize the data source to the chart
chartData = <OrdinalData>[
OrdinalData(0, 5),
OrdinalData(1, 25),
OrdinalData(2, 100),
OrdinalData(3, 75),
OrdinalData(4, 33),
OrdinalData(5, 80),
…
];
// Enabling selection behavior
selectionBehavior = SelectionBehavior(enable: true);
super.initState();
}
Step 3: In the onSelectionChanged call back event, set the selected point index with the help of event’s arguments when the selection is performed. We can set the view port index if the selection is done manually by touching the points or else set the point index to perform selection while swiping to the selectedPointIndex variable. Using this variable, set the initialVisibleMinimum and initialVisibleMaximum values by subtracting and adding the two indexes from left and right respectively to show the selected point in the centre.
onSelectionChanged: (args) {
// While manually selecting the points.
if (!isLoad) {
selectedPointIndex = args.viewportPointIndex;
}
// While swiping the point gets selected.
else {
selectedPointIndex = args.pointIndex;
}
//Setting visible minimum and visible maximum to maintain the selected point in the center of viewport
axisVisibleMin = selectedPointIndex! - 2.toDouble();
axisVisibleMax = selectedPointIndex! + 2.toDouble();
},
Step 4: Define the performSwipe method which is used to perform the swiping based on the swipe direction and also selection of the centre point in the viewport is handled as shown in the following code snippet.
void performSwipe(ChartSwipeDirection direction) {
// Executes when swiping the chart from right to left
if (direction == ChartSwipeDirection.end &&
(axisVisibleMax + 5.toDouble()) < chartData.length) {
isLoad = true;
// set the visible minimum and visible maximum to maintain the selected point in the center of the viewport.
axisVisibleMin = axisVisibleMin + 5.toDouble();
axisVisibleMax = axisVisibleMax + 5.toDouble();
// To update the visible maximum and visible minimum dynamically by using axis controller.
axisController!.visibleMinimum = axisVisibleMin;
axisController!.visibleMaximum = axisVisibleMax;
// To execute after chart redrawn with new visible minimum and maximum, we used delay for 1 second
Future.delayed(const Duration(milliseconds: 1000), () {
// Public method used to select the data point dynamically
selectionBehavior.selectDataPoints((axisVisibleMin.toInt()) + 2);
});
}
// Executes when swiping the chart from left to right
else if (direction == ChartSwipeDirection.start &&
(axisVisibleMin - 5.toDouble()) >= 0) {
setState(() {
axisVisibleMin = axisVisibleMin - 5.toDouble();
axisVisibleMax = axisVisibleMax - 5.toDouble();
axisController!.visibleMinimum = axisVisibleMin;
axisController!.visibleMaximum = axisVisibleMax;
Future.delayed(const Duration(milliseconds: 1000), () {
selectionBehavior.selectDataPoints((axisVisibleMin.toInt()) + 2);
});
});
}
}
}
Step 4:
Assign the performSwipe method to the onPlotAreaSwipe callback in the chart and axisController value in onRendererCreated callback in the axis.
SfCartesianChart(
primaryXAxis: NumericAxis(
initialVisibleMaximum: axisVisibleMax;
initialVisibleMinimum: axisVisibleMin;
// set value for axis controller.
onRendererCreated(NumericAxisController controller){
axisController = controller;
}
) onPlotAreaSwipe: (ChartSwipeDirection direction) => performSwipe(direction), )
Thus, the sliding viewport is achieved by selecting the data manually also by dragging the chart towards the end or start using the SfCartesianchart widget.
Conclusion
I hope you enjoyed learning about how to achieve viewport functionality using Flutter Cartesian Chart.
You can refer to our Flutter Cartesian Chart feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Flutter Cartesian Chart example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you
