4.5 C
New York
Thursday, December 12, 2024

ios – Syncfusion Flutter Chart Not Updating Scale When Altering Time Segments (Day, Week, Month, 12 months)


I’m utilizing the Syncfusion Flutter Charts package deal to show a line chart of knowledge for various time ranges (day, week, month, 12 months). I exploit initialVisibleMinimum and initialVisibleMaximum to manage the seen vary of the chart. Nevertheless, after I change between time ranges, the seen window dimension doesn’t replace accurately. For instance:

  • If I choose “Day,” the seen vary is at some point (as anticipated).
  • After I change to “Week,” the x-axis labels replace accurately, however the seen vary stays constrained to at some point.

If I manually set minimal and most as an alternative of initialVisibleMinimum/initialVisibleMaximum, I lose the power to scroll the chart, which isn’t what I need.

Day image
Week image

Beneath is the related a part of my code:

SfCartesianChart(
  primaryXAxis: DateTimeAxis(
    majorGridLines: const MajorGridLines(width: 0),
    desiredIntervals: _getDesiredIntervals(), // Dynamically set intervals
    interval: _getDynamicInterval(), // Dynamically regulate the interval
    intervalType: _getDateTimeIntervalType(),
    minimal: firstDate.subtract(const Period(days: 1)), // Set axis minimal
    most: latestDate.add(const Period(days: 1)), // Set axis most
    initialVisibleMaximum: most, // Set preliminary seen most
    initialVisibleMinimum: minimal, // Set preliminary seen minimal
    labelRotation: 45,
    axisLabelFormatter: (AxisLabelRenderDetails particulars) {
      last DateTime date = DateTime.fromMillisecondsSinceEpoch(particulars.worth.toInt());
      return ChartAxisLabel(
        DateFormat(_getDateFormat()).format(date),
        const TextStyle(fontSize: 12),
      );
    },
  ),
  primaryYAxis: NumericAxis(),
  zoomPanBehavior: ZoomPanBehavior(
    enablePanning: true,
    zoomMode: ZoomMode.x,
  ),
  tooltipBehavior: TooltipBehavior(allow: true),
  sequence: >[
    LineSeries(
      dataSource: vitalDataContainer.vitalData,
      xValueMapper: (VitalData data, _) => data.time,
      yValueMapper: (VitalData data, _) =>
      data.values.isNotEmpty ? data.values.first as num : 0,
      dataLabelSettings: const DataLabelSettings(isVisible: true),
      name: 'Vital Data',
    ),
  ],
);

I calculate the minimal and most values dynamically based mostly on the chosen time vary, like this:

(DateTime, DateTime) _getVisibleRange(DateTime latestDate) {
  late DateTime minimal, most;

  change (timeSegmentedControlValue) {
    case TimeSegmentedControlValue.day:
      minimal = latestDate.subtract(const Period(days: 1));
      most = latestDate.add(const Period(hours: 24));
      break;
    case TimeSegmentedControlValue.week:
      minimal = latestDate.subtract(const Period(days: 6));
      most = latestDate.add(const Period(days: 1));
      break;
    case TimeSegmentedControlValue.month:
      minimal = latestDate.subtract(const Period(days: 29));
      most = latestDate.add(const Period(days: 1));
      break;
    case TimeSegmentedControlValue.12 months:
      minimal = latestDate.subtract(const Period(days: 364));
      most = latestDate.add(const Period(days: 1));
      break;
  }

  return (minimal, most);
}

Setting Particulars:

  • Flutter model: 3.24.5 (steady channel)
  • Dart model: 3.5.4
  • Syncfusion Flutter Chart model: ^28.1.33

Query:

How can I be sure that initialVisibleMinimum and initialVisibleMaximum replace dynamically when switching time ranges whereas nonetheless permitting panning and zooming?

I’ve connected screenshots exhibiting how the labels replace accurately however the seen vary doesn’t change. Any recommendation or options could be drastically appreciated!

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles