rendering chart with datetime as am/pm on the x-axis using fl_chart

Viewed 30

I'm trying to create a line chart off the last 12 hours. I'd like the x-axis to read the labels as "12pm, 5am" respectively. The x-axis labels should only show star/end. When my code gets to this point it freezes the simulator with no errors.

sensorData has 12 objects in it and are stored as a DateTime. The times are hourly based.

  final Color lineColor;
  final List<SpatialGrowSensor> sensorData;

  const SensorLineChart({
    Key? key,
    required this.sensorData,
    required this.lineColor,
  }) : super(key: key);

  LineChartData sampleData1(List<SpatialGrowSensor> sensorData) {
    return LineChartData(
      lineTouchData: lineTouchData1(),
      gridData: gridData(),
      titlesData: titlesData1(),
      borderData: borderData(),
      lineBarsData: lineBarsData1(),
      minY: 0,
      maxY: 10,
    );
  }

  LineTouchData lineTouchData1() => LineTouchData(
        handleBuiltInTouches: true,
        touchTooltipData: LineTouchTooltipData(
          tooltipBgColor: Colors.blueGrey.withOpacity(0.8),
        ),
      );

  FlTitlesData titlesData1() => FlTitlesData(
        bottomTitles: AxisTitles(
          sideTitles: bottomTitles(),
        ),
        rightTitles: AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        topTitles: AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        leftTitles: AxisTitles(
          sideTitles: leftTitles(),
        ),
      );

  List<LineChartBarData> lineBarsData1() => [
        lineChartBarData1_1(),
      ];

  Widget leftTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
      fontSize: 16,
    );

    return Text(value.toString(), style: style, textAlign: TextAlign.center);
  }

  SideTitles leftTitles() => SideTitles(
        getTitlesWidget: leftTitleWidgets,
        showTitles: true,
        reservedSize: 32,
        interval: 2,
      );

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
      fontSize: 16,
    );
    // format datetime as '12pm'
    String dateFormated = DateFormat('ha').format(DateTime.fromMillisecondsSinceEpoch(value.toInt(), isUtc: true));
    Widget text = Text(dateFormated, style: style);

    return SideTitleWidget(
      axisSide: meta.axisSide,
      space: 10,
      child: text,
    );
  }

  SideTitles bottomTitles() => SideTitles(
        showTitles: true,
        reservedSize: 32,
        interval: 6,
        getTitlesWidget: bottomTitleWidgets,
      );

  FlGridData gridData() => FlGridData(show: false);

  FlBorderData borderData() => FlBorderData(
        show: true,
        border: const Border(
          bottom: BorderSide(color: Color(0xff4e4965), width: 4),
          left: BorderSide(color: Colors.transparent),
          right: BorderSide(color: Colors.transparent),
          top: BorderSide(color: Colors.transparent),
        ),
      );

  LineChartBarData lineChartBarData1_1() {
    final flSpotData = sensorData.map((sensor) {
      return FlSpot(sensor.dateTime.millisecondsSinceEpoch.toDouble(), sensor.sensorValue);
    }).toList();
    return LineChartBarData(
      isCurved: true,
      color: lineColor,
      barWidth: 4,
      dotData: FlDotData(show: false),
      belowBarData: BarAreaData(show: false),
      preventCurveOverShooting: true,
      spots: flSpotData,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          color: HexColor('#0c110a'),
        ),
        child: SizedBox(
          height: 200,
          child: Padding(
            padding: const EdgeInsets.all(32.0),
            child: LineChart(
              sampleData1(sensorData),
            ),
          ),
        ),
      ),
    );
  }
}```
0 Answers
Related