Search code examples
flutterchartsreal-time

Is possible to use charts_flutter to draw a real-time chart with a stream of values?

I haven't found an example where charts_flutter has been used using a data stream that changes over time. Is it possible to do it, or is it not the right tool? In my case, I have to show a line graph that follows the signals from microphone. Thanks

UPDATE This is my attempt: inside my build() method I defined the chart like this:

charts.TimeSeriesChart(
              getStreamData(),
              animate: true,
              domainAxis: new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec(), showAxisLine: false),
              primaryMeasureAxis: new charts.NumericAxisSpec(showAxisLine: false),
              dateTimeFactory: const charts.LocalDateTimeFactory(),

where my goal is consuming a data stream, and set a fixed range of measurements axis to avoid strange oscillations of the graph.

At this time the chart successfully rebuilds, but the range on measurement axis changed every time.

Solution

  • You can provide a static range for an axis like this (example is for 12-18 inclusive):

        primaryMeasureAxis: new charts.NumericAxisSpec(
      tickProviderSpec: new charts.StaticNumericTickProviderSpec(
        <charts.TickSpec<num>>[
          charts.TickSpec<num>(12),
          charts.TickSpec<num>(14),
          charts.TickSpec<num>(16),
          charts.TickSpec<num>(18),
        ],
      ),
    ),