Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Support for Horizontal Bar Chart in fl_chart (Enhancement #113) #1803

Closed
wants to merge 8 commits into from
Closed

Add Support for Horizontal Bar Chart in fl_chart (Enhancement #113) #1803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2ca817a
Adding Horizontal bar graph step by step
MrRoy121 Dec 9, 2024
5f803b6
Made bar chart one horizontal
MrRoy121 Dec 10, 2024
e22d134
Made bar chart two horizontal
MrRoy121 Dec 10, 2024
de9d312
Made bar chart three horizontal
MrRoy121 Dec 10, 2024
3c59913
Made bar chart four horizontal
MrRoy121 Dec 10, 2024
a1e7911
Made bar chart Five & Six horizontal
MrRoy121 Dec 10, 2024
9b12441
enhancement to support horizontal bar chart.
MrRoy121 Dec 10, 2024
5cd15f1
Merge remote-tracking branch 'origin/main'
MrRoy121 Dec 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
386 changes: 386 additions & 0 deletions example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample1.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,386 @@
import 'dart:async';
import 'dart:math';

import 'package:fl_chart_app/presentation/resources/app_resources.dart';
import 'package:fl_chart_app/util/extensions/color_extensions.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class BarChartHoriSample1 extends StatefulWidget {
BarChartHoriSample1({super.key});

List<Color> get availableColors => const <Color>[
AppColors.contentColorPurple,
AppColors.contentColorYellow,
AppColors.contentColorBlue,
AppColors.contentColorOrange,
AppColors.contentColorPink,
AppColors.contentColorRed,
];

final Color barBackgroundColor = AppColors.contentColorWhite.darken().withOpacity(0.3);
final Color barColor = AppColors.contentColorWhite;
final Color touchedBarColor = AppColors.contentColorGreen;

@override
State<StatefulWidget> createState() => BarChartHoriSample1State();
}

class BarChartHoriSample1State extends State<BarChartHoriSample1> {
final Duration animDuration = const Duration(milliseconds: 250);

int touchedIndex = -1;

bool isPlaying = false;

@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const Text(
'Mingguan',
style: TextStyle(
color: AppColors.contentColorGreen,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(
height: 4,
),
Text(
'Grafik konsumsi kalori',
style: TextStyle(
color: AppColors.contentColorGreen.darken(),
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(
height: 18,
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: BarChart(
isPlaying ? randomData() : mainBarData(),
duration: animDuration,
isHorizontal: true, //IS HORIZONTAL TO APPEAR THE BAR GRAPH HORIZONTALLY
),
),
),
const SizedBox(
height: 12,
),
],
),
),
Padding(
padding: const EdgeInsets.all(8),
child: Align(
alignment: Alignment.topRight,
child: IconButton(
icon: Icon(
isPlaying ? Icons.pause : Icons.play_arrow,
color: AppColors.contentColorGreen,
),
onPressed: () {
setState(() {
isPlaying = !isPlaying;
if (isPlaying) {
refreshState();
}
});
},
),
),
)
],
),
);
}

BarChartGroupData makeGroupData(
int x,
double y, {
bool isTouched = false,
Color? barColor,
double width = 20,
List<int> showTooltips = const [],
}) {
barColor ??= widget.barColor;
return BarChartGroupData(
x: x,
barRods: [
BarChartRodData(
toY: isTouched ? y + 1 : y,
color: isTouched ? widget.touchedBarColor : barColor,
width: width,
borderSide: isTouched ? BorderSide(color: widget.touchedBarColor.darken(80)) : const BorderSide(color: Colors.white, width: 0),
backDrawRodData: BackgroundBarChartRodData(
show: true,
toY: 20,
color: widget.barBackgroundColor,
),
),
],
showingTooltipIndicators: showTooltips,
);
}

List<BarChartGroupData> showingGroups() => List.generate(7, (i) {
switch (i) {
case 0:
return makeGroupData(0, 5, isTouched: i == touchedIndex);
case 1:
return makeGroupData(1, 6.5, isTouched: i == touchedIndex);
case 2:
return makeGroupData(2, 5, isTouched: i == touchedIndex);
case 3:
return makeGroupData(3, 7.5, isTouched: i == touchedIndex);
case 4:
return makeGroupData(4, 9, isTouched: i == touchedIndex);
case 5:
return makeGroupData(5, 11.5, isTouched: i == touchedIndex);
case 6:
return makeGroupData(6, 6.5, isTouched: i == touchedIndex);
default:
return throw Error();
}
});

BarChartData mainBarData() {
return BarChartData(
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(
getTooltipColor: (_) => Colors.blueGrey,
rotateAngle: 270, //HERE MADE THE ROTATION OF THE TOOLTIP
tooltipHorizontalAlignment: FLHorizontalAlignment.center,
tooltipMargin: -10,
getTooltipItem: (group, groupIndex, rod, rodIndex) {
String weekDay;
switch (group.x) {
case 0:
weekDay = 'Monday';
break;
case 1:
weekDay = 'Tuesday';
break;
case 2:
weekDay = 'Wednesday';
break;
case 3:
weekDay = 'Thursday';
break;
case 4:
weekDay = 'Friday';
break;
case 5:
weekDay = 'Saturday';
break;
case 6:
weekDay = 'Sunday';
break;
default:
throw Error();
}
return BarTooltipItem(
'$weekDay\n',
const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18,
),
children: <TextSpan>[
TextSpan(
text: (rod.toY - 1).toString(),
style: const TextStyle(
color: Colors.white, //widget.touchedBarColor,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
],
);
},
),
touchCallback: (FlTouchEvent event, barTouchResponse) {
setState(() {
if (!event.isInterestedForInteractions || barTouchResponse == null || barTouchResponse.spot == null) {
touchedIndex = -1;
return;
}
touchedIndex = barTouchResponse.spot!.touchedBarGroupIndex;
});
},
),
titlesData: FlTitlesData(
show: true,
rightTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
getTitlesWidget: getTitles,
reservedSize: 38,
showTitles: true,
),
),
leftTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
),
borderData: FlBorderData(
show: false,
),
barGroups: showingGroups(),
gridData: const FlGridData(show: false),
);
}

Widget getTitles(double value, TitleMeta meta) {
const style = TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14,
);
Widget text;
switch (value.toInt()) {
case 0:
text = const Text('M', style: style);
break;
case 1:
text = const Text('T', style: style);
break;
case 2:
text = const Text('W', style: style);
break;
case 3:
text = const Text('T', style: style);
break;
case 4:
text = const Text('F', style: style);
break;
case 5:
text = const Text('S', style: style);
break;
case 6:
text = const Text('S', style: style);
break;
default:
text = const Text('', style: style);
break;
}
return SideTitleWidget(
axisSide: meta.axisSide,
space: 16,
child: Transform.rotate( // THIS TO ROTATE ALL THE TEXT
angle: -1.5708,
child: text,
),
);
}

BarChartData randomData() {
return BarChartData(
barTouchData: BarTouchData(
enabled: false,
),
titlesData: FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
getTitlesWidget: getTitles,
reservedSize: 38,
showTitles: true,
),
),
leftTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: const AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
rightTitles: const AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
),
borderData: FlBorderData(
show: false,
),
barGroups: List.generate(7, (i) {
switch (i) {
case 0:
return makeGroupData(
0,
Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[Random().nextInt(widget.availableColors.length)],
);
case 1:
return makeGroupData(
1,
Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[Random().nextInt(widget.availableColors.length)],
);
case 2:
return makeGroupData(
2,
Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[Random().nextInt(widget.availableColors.length)],
);
case 3:
return makeGroupData(
3,
Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[Random().nextInt(widget.availableColors.length)],
);
case 4:
return makeGroupData(
4,
Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[Random().nextInt(widget.availableColors.length)],
);
case 5:
return makeGroupData(
5,
Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[Random().nextInt(widget.availableColors.length)],
);
case 6:
return makeGroupData(
6,
Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[Random().nextInt(widget.availableColors.length)],
);
default:
return throw Error();
}
}),
gridData: const FlGridData(show: false),
);
}

Future<dynamic> refreshState() async {
setState(() {});
await Future<dynamic>.delayed(
animDuration + const Duration(milliseconds: 50),
);
if (isPlaying) {
await refreshState();
}
}
}
Loading