I have implemented a linear graph using the below code. I use charts flutter package.. the first image shows the graph I created. the second image shows what I need to be implemented I want to add another two lines for the same graph with different data values. how can I do this? appreciate your help on this. I use hardcoded values for the graph.
developer_series.dart
import 'package:charts_flutter/flutter.dart' as charts;
class DeveloperSeries {
final int day;
final int calories;
final charts.Color barColor;
DeveloperSeries(
{
required this.day,
required this.calories,
required this.barColor
}
);
}
developer_chart.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'developer_series.dart';
class DeveloperChart extends StatelessWidget {
final List<DeveloperSeries> data;
DeveloperChart({required this.data});
@override
Widget build(BuildContext context) {
List<charts.Series<DeveloperSeries,int>> series = [
charts.Series(
id: "calories",
data: data,
domainFn: (DeveloperSeries series, _) => series.day,
measureFn: (DeveloperSeries series, _) => series.calories,
colorFn: (DeveloperSeries series, _) => series.barColor
)
];
return Container(
height: 700,
// padding: EdgeInsets.all(25),
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(40),
//
// ),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
color: Colors.grey.withOpacity(0.4),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only( top: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: 30,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(
colors: [
Color.fromRGBO(125, 158, 205, 1.0),
Color.fromRGBO(158, 125, 243, 0.7490196078431373),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: TextButton(onPressed:() {},
child: const Text('Daily', style: TextStyle(color: Colors.white),),
),
),
Container(
height: 30,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(
colors: [
Color.fromRGBO(125, 158, 205, 1.0),
Color.fromRGBO(158, 125, 243, 0.7490196078431373),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: TextButton(onPressed:() {},
child: const Text('Week', style: TextStyle(color: Colors.white),),
),
),
Container(
height: 30,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(
colors: [
Color.fromRGBO(125, 158, 205, 1.0),
Color.fromRGBO(158, 125, 243, 0.7490196078431373),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: TextButton(
onPressed:() {},
child: const Text('Month', style: TextStyle(color: Colors.white),),
),
),
],
),
),
Expanded(
child: charts.LineChart(series,
animate: true,
domainAxis: const charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
labelStyle: charts.TextStyleSpec(
fontSize: 10,
color: charts.MaterialPalette.white,
),
lineStyle: charts.LineStyleSpec(
color: charts.MaterialPalette.transparent,
)),
tickProviderSpec:
charts.BasicNumericTickProviderSpec(zeroBound: false),
// viewport: charts.NumericExtents(2016.0, 2022.0),
),
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
// labelOffsetFromAxisPx: -20,
// labelAnchor: charts.TickLabelAnchor.after,
lineStyle: charts.LineStyleSpec(
color: charts.MaterialPalette.white,
thickness: 1,
)
),
),
),
),
],
),
),
),
);
}
}
graph_calories.dart
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'developer_chart.dart';
import 'developer_series.dart';
class GraphDisplayCalories extends StatefulWidget {
@override
State<GraphDisplayCalories> createState() => _GraphDisplayCaloriesState();
}
class _GraphDisplayCaloriesState extends State<GraphDisplayCalories> {
final List<DeveloperSeries> data = [
DeveloperSeries(
day: 2017,
calories: 40000,
barColor: charts.ColorUtil.fromDartColor(Colors.purple),
),
DeveloperSeries(
day: 2018,
calories: 10000,
barColor: charts.ColorUtil.fromDartColor(Colors.purple),
),
DeveloperSeries(
day:2019,
calories: 20000,
barColor: charts.ColorUtil.fromDartColor(Colors.purple),
),
DeveloperSeries(
day: 2020,
calories: 35000,
barColor: charts.ColorUtil.fromDartColor(Colors.purple),
),
DeveloperSeries(
day: 2021,
calories: 20000,
barColor: charts.ColorUtil.fromDartColor(Colors.purple),
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: DeveloperChart(
data: data,
)
),
);
}
}