From 3c59913b65922713a5a1953c38a29e09601ba821 Mon Sep 17 00:00:00 2001 From: Nilashish Roy Date: Wed, 11 Dec 2024 00:32:08 +0600 Subject: [PATCH] Made bar chart four horizontal --- .../bar_chart_hori_sample1.dart | 0 .../bar_chart_hori_sample2.dart | 0 .../bar_chart_hori_sample3.dart | 0 .../horizontal/bar_chart_hori_sample4.dart | 357 ++++++++++++++++++ .../presentation/samples/chart_samples.dart | 22 +- 5 files changed, 371 insertions(+), 8 deletions(-) rename example/lib/presentation/samples/bar/{ => horizontal}/bar_chart_hori_sample1.dart (100%) rename example/lib/presentation/samples/bar/{ => horizontal}/bar_chart_hori_sample2.dart (100%) rename example/lib/presentation/samples/bar/{ => horizontal}/bar_chart_hori_sample3.dart (100%) create mode 100644 example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample4.dart diff --git a/example/lib/presentation/samples/bar/bar_chart_hori_sample1.dart b/example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample1.dart similarity index 100% rename from example/lib/presentation/samples/bar/bar_chart_hori_sample1.dart rename to example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample1.dart diff --git a/example/lib/presentation/samples/bar/bar_chart_hori_sample2.dart b/example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample2.dart similarity index 100% rename from example/lib/presentation/samples/bar/bar_chart_hori_sample2.dart rename to example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample2.dart diff --git a/example/lib/presentation/samples/bar/bar_chart_hori_sample3.dart b/example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample3.dart similarity index 100% rename from example/lib/presentation/samples/bar/bar_chart_hori_sample3.dart rename to example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample3.dart diff --git a/example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample4.dart b/example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample4.dart new file mode 100644 index 000000000..b84ce2934 --- /dev/null +++ b/example/lib/presentation/samples/bar/horizontal/bar_chart_hori_sample4.dart @@ -0,0 +1,357 @@ +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 BarChartHoriSample4 extends StatefulWidget { + BarChartHoriSample4({super.key}); + + final Color dark = AppColors.contentColorCyan.darken(60); + final Color normal = AppColors.contentColorCyan.darken(30); + final Color light = AppColors.contentColorCyan; + + @override + State createState() => BarChartHoriSample4State(); +} + +class BarChartHoriSample4State extends State { + Widget bottomTitles(double value, TitleMeta meta) { + const style = TextStyle(fontSize: 10); + String text; + switch (value.toInt()) { + case 0: + text = 'Apr'; + break; + case 1: + text = 'May'; + break; + case 2: + text = 'Jun'; + break; + case 3: + text = 'Jul'; + break; + case 4: + text = 'Aug'; + break; + default: + text = ''; + break; + } + return SideTitleWidget( + axisSide: meta.axisSide, + child: Transform.rotate( // THIS TO ROTATE ALL THE TEXT + angle: -1.5708, + child: Text(text, style: style)), + ); + } + + Widget leftTitles(double value, TitleMeta meta) { + if (value == meta.max) { + return Container(); + } + const style = TextStyle( + fontSize: 10, + ); + return SideTitleWidget( + axisSide: meta.axisSide, + child: Transform.rotate( // THIS TO ROTATE ALL THE TEXT + angle: -1.5708, + child: Text( + meta.formattedValue, + style: style, + ), + ), + ); + } + + @override + Widget build(BuildContext context) { + return AspectRatio( + aspectRatio: 1.16, + child: Padding( + padding: const EdgeInsets.only(top: 16), + child: LayoutBuilder( + builder: (context, constraints) { + final barsSpace = 4.0 * constraints.maxWidth / 400; + final barsWidth = 8.0 * constraints.maxWidth / 400; + return BarChart(isHorizontal: true, + BarChartData( + alignment: BarChartAlignment.center, + barTouchData: BarTouchData( + enabled: false, + ), + titlesData: FlTitlesData( + show: true, + bottomTitles: AxisTitles( + sideTitles: SideTitles( + showTitles: true, + reservedSize: 28, + getTitlesWidget: bottomTitles, + ), + ), + leftTitles: AxisTitles( + sideTitles: SideTitles( + showTitles: true, + reservedSize: 40, + getTitlesWidget: leftTitles, + ), + ), + topTitles: const AxisTitles( + sideTitles: SideTitles(showTitles: false), + ), + rightTitles: const AxisTitles( + sideTitles: SideTitles(showTitles: false), + ), + ), + gridData: FlGridData( + show: true, + checkToShowHorizontalLine: (value) => value % 10 == 0, + getDrawingHorizontalLine: (value) => FlLine( + color: AppColors.borderColor.withOpacity(0.1), + strokeWidth: 1, + ), + drawVerticalLine: false, + ), + borderData: FlBorderData( + show: false, + ), + groupsSpace: barsSpace, + barGroups: getData(barsWidth, barsSpace), + ), + ); + }, + ), + ), + ); + } + + List getData(double barsWidth, double barsSpace) { + return [ + BarChartGroupData( + x: 0, + barsSpace: barsSpace, + barRods: [ + BarChartRodData( + toY: 17000000000, + rodStackItems: [ + BarChartRodStackItem(0, 2000000000, widget.dark), + BarChartRodStackItem(2000000000, 12000000000, widget.normal), + BarChartRodStackItem(12000000000, 17000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 24000000000, + rodStackItems: [ + BarChartRodStackItem(0, 13000000000, widget.dark), + BarChartRodStackItem(13000000000, 14000000000, widget.normal), + BarChartRodStackItem(14000000000, 24000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 23000000000.5, + rodStackItems: [ + BarChartRodStackItem(0, 6000000000.5, widget.dark), + BarChartRodStackItem(6000000000.5, 18000000000, widget.normal), + BarChartRodStackItem(18000000000, 23000000000.5, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 29000000000, + rodStackItems: [ + BarChartRodStackItem(0, 9000000000, widget.dark), + BarChartRodStackItem(9000000000, 15000000000, widget.normal), + BarChartRodStackItem(15000000000, 29000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 32000000000, + rodStackItems: [ + BarChartRodStackItem(0, 2000000000.5, widget.dark), + BarChartRodStackItem(2000000000.5, 17000000000.5, widget.normal), + BarChartRodStackItem(17000000000.5, 32000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + ], + ), + BarChartGroupData( + x: 1, + barsSpace: barsSpace, + barRods: [ + BarChartRodData( + toY: 31000000000, + rodStackItems: [ + BarChartRodStackItem(0, 11000000000, widget.dark), + BarChartRodStackItem(11000000000, 18000000000, widget.normal), + BarChartRodStackItem(18000000000, 31000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 35000000000, + rodStackItems: [ + BarChartRodStackItem(0, 14000000000, widget.dark), + BarChartRodStackItem(14000000000, 27000000000, widget.normal), + BarChartRodStackItem(27000000000, 35000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 31000000000, + rodStackItems: [ + BarChartRodStackItem(0, 8000000000, widget.dark), + BarChartRodStackItem(8000000000, 24000000000, widget.normal), + BarChartRodStackItem(24000000000, 31000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 15000000000, + rodStackItems: [ + BarChartRodStackItem(0, 6000000000.5, widget.dark), + BarChartRodStackItem(6000000000.5, 12000000000.5, widget.normal), + BarChartRodStackItem(12000000000.5, 15000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 17000000000, + rodStackItems: [ + BarChartRodStackItem(0, 9000000000, widget.dark), + BarChartRodStackItem(9000000000, 15000000000, widget.normal), + BarChartRodStackItem(15000000000, 17000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + ], + ), + BarChartGroupData( + x: 2, + barsSpace: barsSpace, + barRods: [ + BarChartRodData( + toY: 34000000000, + rodStackItems: [ + BarChartRodStackItem(0, 6000000000, widget.dark), + BarChartRodStackItem(6000000000, 23000000000, widget.normal), + BarChartRodStackItem(23000000000, 34000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 32000000000, + rodStackItems: [ + BarChartRodStackItem(0, 7000000000, widget.dark), + BarChartRodStackItem(7000000000, 24000000000, widget.normal), + BarChartRodStackItem(24000000000, 32000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 14000000000.5, + rodStackItems: [ + BarChartRodStackItem(0, 1000000000.5, widget.dark), + BarChartRodStackItem(1000000000.5, 12000000000, widget.normal), + BarChartRodStackItem(12000000000, 14000000000.5, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 20000000000, + rodStackItems: [ + BarChartRodStackItem(0, 4000000000, widget.dark), + BarChartRodStackItem(4000000000, 15000000000, widget.normal), + BarChartRodStackItem(15000000000, 20000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 24000000000, + rodStackItems: [ + BarChartRodStackItem(0, 4000000000, widget.dark), + BarChartRodStackItem(4000000000, 15000000000, widget.normal), + BarChartRodStackItem(15000000000, 24000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + ], + ), + BarChartGroupData( + x: 3, + barsSpace: barsSpace, + barRods: [ + BarChartRodData( + toY: 14000000000, + rodStackItems: [ + BarChartRodStackItem(0, 1000000000.5, widget.dark), + BarChartRodStackItem(1000000000.5, 12000000000, widget.normal), + BarChartRodStackItem(12000000000, 14000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 27000000000, + rodStackItems: [ + BarChartRodStackItem(0, 7000000000, widget.dark), + BarChartRodStackItem(7000000000, 25000000000, widget.normal), + BarChartRodStackItem(25000000000, 27000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 29000000000, + rodStackItems: [ + BarChartRodStackItem(0, 6000000000, widget.dark), + BarChartRodStackItem(6000000000, 23000000000, widget.normal), + BarChartRodStackItem(23000000000, 29000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 16000000000.5, + rodStackItems: [ + BarChartRodStackItem(0, 9000000000, widget.dark), + BarChartRodStackItem(9000000000, 15000000000, widget.normal), + BarChartRodStackItem(15000000000, 16000000000.5, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + BarChartRodData( + toY: 15000000000, + rodStackItems: [ + BarChartRodStackItem(0, 7000000000, widget.dark), + BarChartRodStackItem(7000000000, 12000000000.5, widget.normal), + BarChartRodStackItem(12000000000.5, 15000000000, widget.light), + ], + borderRadius: BorderRadius.zero, + width: barsWidth, + ), + ], + ), + ]; + } +} diff --git a/example/lib/presentation/samples/chart_samples.dart b/example/lib/presentation/samples/chart_samples.dart index 798afcf68..c6bc3ed80 100644 --- a/example/lib/presentation/samples/chart_samples.dart +++ b/example/lib/presentation/samples/chart_samples.dart @@ -1,8 +1,8 @@ -import 'package:fl_chart_app/presentation/samples/bar/bar_chart_hori_sample1.dart'; +import 'package:fl_chart_app/presentation/samples/bar/horizontal/bar_chart_hori_sample1.dart'; +import 'package:fl_chart_app/presentation/samples/bar/horizontal/bar_chart_hori_sample6.dart'; import 'package:fl_chart_app/util/app_helper.dart'; -import 'bar/bar_chart_hori_sample2.dart'; -import 'bar/bar_chart_hori_sample3.dart'; +import 'bar/horizontal/bar_chart_hori_sample2.dart'; import 'bar/bar_chart_sample1.dart'; import 'bar/bar_chart_sample2.dart'; import 'bar/bar_chart_sample3.dart'; @@ -11,6 +11,9 @@ import 'bar/bar_chart_sample5.dart'; import 'bar/bar_chart_sample6.dart'; import 'bar/bar_chart_sample7.dart'; import 'bar/bar_chart_sample8.dart'; +import 'bar/horizontal/bar_chart_hori_sample3.dart'; +import 'bar/horizontal/bar_chart_hori_sample4.dart'; +import 'bar/horizontal/bar_chart_hori_sample5.dart'; import 'chart_sample.dart'; import 'line/line_chart_sample1.dart'; import 'line/line_chart_sample10.dart'; @@ -37,13 +40,16 @@ class ChartSamples { BarChartSample(1, true, (context) => BarChartHoriSample1()), BarChartSample(2, false, (context) => BarChartSample2()), BarChartSample(2, true, (context) => BarChartHoriSample2()), - BarChartSample(3,false, (context) => const BarChartSample3()), - BarChartSample(3,true, (context) => const BarChartHoriSample3()), - BarChartSample(4,false, (context) => BarChartSample4()), - BarChartSample(5,false, (context) => const BarChartSample5()), + BarChartSample(3, false, (context) => const BarChartSample3()), + BarChartSample(3, true, (context) => const BarChartHoriSample3()), + BarChartSample(4, false, (context) => BarChartSample4()), + BarChartSample(4, true, (context) => BarChartHoriSample4()), + BarChartSample(5, false, (context) => const BarChartSample5()), + BarChartSample(5, true, (context) => const BarChartHoriSample5()), BarChartSample(6, false, (context) => const BarChartSample6()), + BarChartSample(6, true, (context) => const BarChartHoriSample6()), BarChartSample(7, false, (context) => BarChartSample7()), - BarChartSample(8,false, (context) => BarChartSample8()), + BarChartSample(8, false, (context) => BarChartSample8()), ], ChartType.line: [ LineChartSample(1, (context) => const LineChartSample1()),