google / charts

https://pub.dev/packages/charts_flutter
Apache License 2.0
2.81k stars 1.23k forks source link

Times series scatter plot? #302

Open emptyopen opened 5 years ago

emptyopen commented 5 years ago

Hi, it seems the scatter plot can't handle DateTime. Is there a way to create a scatter plot with DateTime on the x-axis? I'd like to overlay calories of meals eaten over a line plot of weight over time. It seems like it will be a huge hassle to wrangle DateTime into integers, relabel axis, and align the two plots.

eznix86 commented 5 years ago

I've found an alternative for you, I ponder a lot on it,

Try this:

https://google.github.io/charts/flutter/example/combo_charts/date_time_line_point

To sum up, For data plotting:

        new charts.Series<MyCustomObject, DateTime>(
          id: 'Internal.',
          colorFn: (MyCustomObject item, _) {
            return charts.MaterialPalette.green.shadeDefault;
          },
          domainFn: (MyCustomObject item, _) => item.date,
          measureFn: (MyCustomObject item, _) => item.data,
          data: internal,
          radiusPxFn: (__,___) => 8.0
        )..setAttribute(charts.rendererIdKey, 'customPoint'),

Chart settings:

    return charts.TimeSeriesChart(
      seriesList, // The data plotted
      animate: true,
      dateTimeFactory: const charts.LocalDateTimeFactory(),
      behaviors: [
        new charts.SeriesLegend(
          position: charts.BehaviorPosition.bottom,
        )
      ],
      customSeriesRenderers: [
        new charts.PointRendererConfig(
          // ID used to link series to this renderer.
            customRendererId: 'customPoint')
      ],
    );

I hope it helps.