Zooming and Panning using a DateTimeAxis

[Philip Marsh]

Hi,

I have been trying to make a graph that tracks users progress over time. Part of the requirements for this graph is that a user can zoom in to a scale of a week a month 6 months or a year. Users also need to be able to pan through and pinch to zoom.

My first problem is I want to start with a week view, and then zoom out to month view etc if a user presses a button. To do this, I set visible minimum and visible maximum to be a week long. When I do that however, the graph only loads up to the last point within the currently viewable area. This means that the line stops early on the graph and doesn't reach the left boundary. When clicking on the button to cycle through timescales, this makes it very disorientating for the user, and it is difficult to understand.

The next problem is that once the user has zoomed by pinch or panned through, I am no longer able to change the visible range by changing the visibleMinimum and visibleMaximum values.

Is there a way of implementing these features? I have tried using zoomToSingleAxis along with panToDirection, but neither of these fit my use case.

Here is the code for the graph in my app:

SfCartesianChart(
    primaryYAxis: NumericAxis(
        majorGridLines: MajorGridLines(
            dashArray: [20, 10], width: 3),
        minimum: 0.0,
        maximum: 11.0),
    zoomPanBehavior: ZoomPanBehavior(
        enablePinching: true,
        enablePanning: true,
        zoomMode: ZoomMode.x),
    primaryXAxis: xAxis,
    series: <ChartSeries>[
  SplineSeries<GraphObject, DateTime>(
    dataSource: state.dataList1,
    xValueMapper: (GraphObject graphObject, _) =>
        graphObject.xAxis,
    yValueMapper: (GraphObject graphObject, _) =>
        graphObject.yAxis.toDouble(),
    splineType: SplineType.monotonic,
  ),
  SplineSeries<GraphObject, DateTime>(
    color: Colors.red,
    dataSource: state.dataList2,
    splineType: SplineType.monotonic,
    xValueMapper: (GraphObject graphObject, _) =>
        graphObject.xAxis,
    yValueMapper: (GraphObject graphObject, _) =>
        graphObject.yAxis,
  ),
])

Attachment: app_examples_47020a81.zip

[Sriram Kiran Senthilkumar]

Hi Philip, 

 

Greetings from Syncfusion. We have analyzed your scenarios and provided the response for your queries below. 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------- 

Query #1 - Line stops early on the graph 

We have analyzed the reported problem and we tried to replicate the reported issue. Unfortunately, we were not able to replicate the issue. However, we have attached the sample used for testing the issue for replication below for your reference. As we are not aware of the exact scenario you are mentioning, kindly provide more information on the reported issue (such as sample along with data source for replicating the issue). If possible, try to replicate the reported issue with the attached sample and revert us. This will be helpful in providing the solution sooner. 

Sample link: https://www.syncfusion.com/downloads/support/forum/155355/ze/sample-1310723000 

Query #2 – Cannot change the visible range using visible minimum and visible maximum once the chart is pinched or panned. 

 We have analyzed this scenario and we are sorry that it is not possible to change the visible range of the chart dynamically using the visible maximum and visible minimum after the chart is zoomed using user interactions because once the chart is zoomed (pinched, panned, etc.) the visible maximum and visible minimum values are not taken into account for calculating the visible range of the series. So, changing the values of visible minimum and visible maximum values dynamically once pinched or panned does not affect the chart. This is the default behaviour of the zoomPanBehavior in the chart.  

We also request you to provide more information in detail on why you need to achieve this scenario so that it will be helpful in providing the solution sooner. 

------------------------------------------------------------------------------------------------------------------------------------------------------------ 

If you have further concerns, please revert us. 

 

Regards, 

Sriram Kiran.