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),
),
),
),
),
);
}
}```