1. Home
  2. Forum
  3. Flutter
  4. Sliding Viewport Charts

Sliding Viewport Charts

Do you support the Sliding Viewport functionality for SfCartesianCharts, see an example from Google https://google.github.io/charts/flutter/example/behaviors/sliding_viewport_on_selection.html

This should enable the users to slide/scroll through an infinite list of variables, while showing on screen a limited subset at a time.

11 Replies 1 reply marked as answer
SK Sriram Kiran Senthilkumar Syncfusion Team November 19, 2020 10:52 AM UTC

Hi Predrag, 
  
Greetings from Syncfusion. We have analyzed on your scenario with the provided information at our end, and the requested scenario regarding the sliding viewport functionality can be achieved with the help of the SelectionBehavior public method and visibleMaximum and visibleMinimum properties of chart axis available in our chart widget. But, as there are some internally known issues in our chart source which we have already fixed and is in the test phase at our end, we are not able to provide the workaround sample as it may not behave properly. We will include the fix for the known issues in our upcoming weekly patch release which is expected to be rolled out by 1st December 2020. We will update you here once the release is rolled out along with the workaround sample and we appreciate your patience until then. 
  
Regards, 
Sriram Kiran 


PC Predrag Cvetkovski November 19, 2020 02:21 PM UTC

Thanks Sriram Kiran for your response, I'll expect to hear back after your release on Dec 1.

SK Sriram Kiran Senthilkumar Syncfusion Team November 20, 2020 01:55 PM UTC

Hi Predrag, 
  
Most welcome and as mentioned earlier, we will update you here once the release is rolled out along with the workaround sample and we appreciate your patience until then. 
  
Regards, 
Sriram Kiran 


SK Sriram Kiran Senthilkumar Syncfusion Team December 2, 2020 04:24 AM UTC

Hi Predrag, 
  
Thanks for your patience. We have attached a workaround sample in which achieved the requested sliding view port functionality with the help of the SelectionBehavior public method and visibleMaximum and visibleMinimum properties of chart axis available in our chart widget. We have also attached the workaround sample below for your reference. 
  
Please check with the above-attached sample and revert us if you still have further concerns. 
 
Regards, 
Sriram Kiran 


SK Sriram Kiran Senthilkumar Syncfusion Team December 2, 2020 04:27 AM UTC

Hi Predrag, 
 
Also, to achieve this workaround, kindly upgrade the chart widget package to the latest version below. 
 
Regards, 
Sriram Kiran 


Marked as answer
PC Predrag Cvetkovski April 20, 2021 08:32 PM UTC

Thanks Sriram, however the args overallDataPointIndex does not exist and Flutter is throwing the following error:

The getter overallDataPointIndex  isn't defined for the type 'SelectionArgs'

Is there any planned enhancement or an alternative way to meet this requirement? Do you have an implementation with the infinite scrolling feature that might yield similar results?

Thank you,
Predrag

DP Dharanitharan Palanisamy Syncfusion Team April 21, 2021 06:33 AM UTC

Hi Predrag, 
 
We've looked into your questions and have come up with the following responses 
Query #1: The getter overallDataPointIndex  isn't defined for the type 'SelectionArgs' 
We'd like to point out that in our volume 4 main update, we made the breaking changes for overallDataPointIndex API into viewportPointIndex. And now, we've updated the original sample and added it to this, please use it for your reference. 
 
Query #2: Do you have an implementation with the infinite scrolling feature that might yield similar results? 
Yes, we can achieve similar results by scrolling using the callbacks onPlotAreaSwipe and onSelectionChanged. We first load the collection of data with the visible minimum and maximum, and then we set the new axis visible minimum and maximum using the onPlotAreaSwipe callback. We get the view port index using the onSelectionChanged callback, and thus set the visible minimum and maximum based on this. Further data can now be seen by scrolling to the chart's end, and the view port selection has been completed. Please see the attached sample for your reference. 
 
 
Please revert us if you need further assistance. 
 
Thanks, 
Dharanitharan. P 
 


PC Predrag Cvetkovski replied to Dharanitharan Palanisamy April 21, 2021 07:05 PM UTC

Hi Predrag, 
 
We've looked into your questions and have come up with the following responses 
Query #1: The getter overallDataPointIndex  isn't defined for the type 'SelectionArgs' 
We'd like to point out that in our volume 4 main update, we made the breaking changes for overallDataPointIndex API into viewportPointIndex. And now, we've updated the original sample and added it to this, please use it for your reference. 
 
Query #2: Do you have an implementation with the infinite scrolling feature that might yield similar results? 
Yes, we can achieve similar results by scrolling using the callbacks onPlotAreaSwipe and onSelectionChanged. We first load the collection of data with the visible minimum and maximum, and then we set the new axis visible minimum and maximum using the onPlotAreaSwipe callback. We get the view port index using the onSelectionChanged callback, and thus set the visible minimum and maximum based on this. Further data can now be seen by scrolling to the chart's end, and the view port selection has been completed. Please see the attached sample for your reference. 
 
 
Please revert us if you need further assistance. 
 
Thanks, 
Dharanitharan. P 
 


Thanks Dharanitharan, however the first example displays all available series during the load time, cluttering the chart for the user.

The second example is better, however the scrolling works only in one direction, constraining the user to analyze the data, as they end up with a blank chart after the last data point.

Can you confirm if Syncfusion has any plan to support the Sliding Viewport functionality, as per this example https://google.github.io/charts/flutter/example/behaviors/sliding_viewport_on_selection.html

Thank you,
Predrag

DP Dharanitharan Palanisamy Syncfusion Team April 22, 2021 11:05 AM UTC

Hi Predrag, 
 
Please find the responses for your queries below, 
 
Query #1: However the scrolling works only in one direction, constraining the user to analyze the data, as they end up with a blank chart after the last data point. 
In the previous attached sample, we have done the sample to swipe in the end direction alone and we like to tell you that you can perform swipe for both the directions as your wish, kindly refer to the help document. We have also altered the sample to performing swipe on both the directions and attached below, kindly make use of it as a reference. 

Query #2: Can you confirm if Syncfusion has any plan to support the Sliding Viewport functionality, as per this example https://google.github.io/charts/flutter/example/behaviors/sliding_viewport_on_selection.html 
We would like you to say as of now we have no plans to give this support as an inbuilt in the charts. Even though you achieve the same functionality by the workaround we had done in the attached sample. Here, on scrolling to the left or right you can see the center of the bar in the viewport is selected as like in the given screenshot. We have also attached the screen record for your reference. 


Please revert us if you need further assistance on this. 

Thanks, 
Dharanitharan. P 


PC Predrag Cvetkovski May 3, 2021 10:23 PM UTC

Thanks Dharanitharan, the scrolling works fine now, however the chart displays all data points during the initial load, is there a way to be constrained to the minimum visibile datapoints?

In addition, please confirm if the x-y axis can be changed to percentage points instead?

DP Dharanitharan Palanisamy Syncfusion Team May 4, 2021 06:05 AM UTC

Hi Predrag, 
 
We investigated your queriesand have given answers below. 
Query #1 The chart displays all data points during the initial load, is there a way to be constrained to the minimum visibile datapoints? 
We gave the chart visibleMinimum and visibleMaximum in our previous sample, so the entire load is not loaded at first, it only shows the data within the visible range, and you can change the visibleMinimum and visibleMaximum as required. 
Query #2 In addition, please confirm if the x-y axis can be changed to percentage points instead? 
The labelFormat property in the respective axis can be used to give the percentage to the axis labels, and it can also be used to append any symbol to the labels, please see the support document for more details. You may also use the numberFormat property to format, as seen in the following kb. 
 
Refer to the support document for 100 percent stacked charts, which makes the provided data by converting it to 100 percent. 
 
Please contact us if you need any additional assistance, and please establish a new incident or forum for any new inquiries. 
 
Thanks, 
Dharanitharan. P 


Loader.
Up arrow icon