Shanu
Shanu

Reputation: 657

How to render a graph from datetTime value as one of the axes value

Im using fl_charts for line chart and I have dateTime as X axis values but it seems FlSpot takes double as value.

Here is my code,

LineChartBarData(
  spots: graphValues
      .map(
        (e) => FlSpot(
          e['x'],
          e['y'],//DateTime value
        ),
      )
      .toList(),
  isCurved: true,
  color: Colors.red,
  dotData: const FlDotData(
    show: false,
  ),
  barWidth: 1,
  belowBarData: BarAreaData(
    show: true,
    gradient: LinearGradient(
      colors: [
        color222E65.withOpacity(.6),
        Colors.transparent
      ],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    ),
  ),
),

How to use DateTime or String as values in this chart.

Upvotes: 0

Views: 71

Answers (1)

Shanu
Shanu

Reputation: 657

Just convert the DateTime into microsecondsSinceEpoch and into double. like this,

spots: graphValues
      .map(
        (e) => FlSpot(
          e['x'],
          (e['y'] as DateTime)
            .microsecondsSinceEpoch
            .toDouble(),
        ),
      )
      .toList(),

Upvotes: 0

Related Questions