How to use "DateTimeAxisSpec" and "DateTimeExtents" in "TimeSeriesChart"?

[dokinkon]

I have time series dataset which across 3 months. What I want to do is showing one day data at beginning and user can drag/pan this chart to view another time segment.
But I can't find any example to to this. After digging the source code, I found "DateTimeAxisSpec" and "DateTimeExtents" classes which looks helpfully. Does these classes is ready to use? Could you please provide a simple explanation of how to use?
Thanks

[lorrainekan]

What you might want to do is

• Set an initial viewport to show one day of data
  https://google.github.io/charts/flutter/example/axes/numeric_initial_viewport

• Set a panning behavior, if you run the example app you can find examples of pan / zoom behaviors
  https://github.com/google/charts/blob/e4c0d9ad4a4255d2e4a635e92a9ae1f06dc2c56b/charts_flutter/lib/src/behaviors/zoom/pan_behavior.dart

[sintylapse]

@lorrainekan DateTimeAxisSpec and DateTimeExtents just do not work as per #213 and #134

[sintylapse]

@dokinkon did you manage to get DateTimeAxisSpec and DateTimeExtents working? if not, please reopen the issue

[26shruti]

Not working

[bjornwilliam]

Posting a reply from a similar issue (#287) :
(add the viewport argument to his proposed workaround class). This workaround makes the datetime
viewport work as expected.

This is because of the autoViewport setting in the Axis class (charts_common/lib/src/chart/cartesian/axis/axis.dart). You have to set axis.autoViewport = false in the DateTimeAxisSpec.configure method. This also allows the PanAndZoomBehavior to operate correctly.

You're right. So, to fix that, the workaround is to create a class which extends DateTimeAxisSpec of charts_flutter and override the configure method like that :

class DateTimeAxisSpecWorkaround extends DateTimeAxisSpec {

  const DateTimeAxisSpecWorkaround ({
    RenderSpec<DateTime> renderSpec,
    DateTimeTickProviderSpec tickProviderSpec,
    DateTimeTickFormatterSpec tickFormatterSpec,
    bool showAxisLine,
  }) : super(
            renderSpec: renderSpec,
            tickProviderSpec: tickProviderSpec,
            tickFormatterSpec: tickFormatterSpec,
            showAxisLine: showAxisLine);

  @override
  configure(Axis<DateTime> axis, ChartContext context,
      GraphicsFactory graphicsFactory) {
    super.configure(axis, context, graphicsFactory);
    axis.autoViewport = false;
  }
}

Thank you so much. You saved my day !