Feature/extra lines

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.7
+* added ExtraLinesData in the LineChartData to draw extra horizontal and vertical lines on LineChart
+* added BelowSpotsLine in the BlowBarData to draw lines from spot to the bottom of chart on LineChart
+
 ## 0.0.6
 * fixed charts repainting bug, #16
 

README.md

@@ -3,7 +3,7 @@
 
 
 [![pub package](https://img.shields.io/pub/v/fl_chart.svg)](https://pub.dartlang.org/packages/fl_chart)
-[![APK](https://img.shields.io/badge/APK-Demo-brightgreen.svg)](https://github.com/imaNNeoFighT/fl_chart/raw/master/repo_files/fl_chart_samples_0.0.1.apk)
+[![APK](https://img.shields.io/badge/APK-Demo-brightgreen.svg)](https://github.com/imaNNeoFighT/fl_chart/raw/master/repo_files/fl_chart_samples_0.0.7.apk)
 
 ![FL Chart Logo](https://github.com/imaNNeoFighT/fl_chart/raw/master/repo_files/images/landing_logo.jpg)
 
@@ -36,7 +36,7 @@ Thank you all!
 
 ```kotlin
 dependencies:
-  fl_chart: ^0.0.6
+  fl_chart: ^0.0.7
 ```
 
 

example/lib/line_chart/samples/line_chart_sample3.dart

@@ -5,103 +5,146 @@ class LineChartSample3 extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-      width: 300,
-      height: 140,
-      child: FlChart(
-        chart: LineChart(
-          LineChartData(
-            lineBarsData: [
-              LineChartBarData(
-                spots: [
-                  FlSpot(0, 1.3),
-                  FlSpot(1, 1),
-                  FlSpot(2, 1.8),
-                  FlSpot(3, 1.5),
-                  FlSpot(4, 2.2),
-                  FlSpot(5, 1.8),
-                  FlSpot(6, 3),
-                ],
-                isCurved: false,
-                barWidth: 4,
-                colors: [
-                  Colors.orange,
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: <Widget>[
+        Row(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            const Text('Average Line',
+              style: TextStyle(color: Colors.green, fontWeight: FontWeight.bold, fontSize: 16),),
+            const Text(' and ',
+              style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 16),),
+            const Text('Indiactors',
+              style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 16),),
+          ],
+        ),
+        const SizedBox(height: 18,),
+        SizedBox(
+          width: 300,
+          height: 140,
+          child: FlChart(
+            chart: LineChart(
+              LineChartData(
+                extraLinesData: ExtraLinesData(
+                  showVerticalLines: true,
+                  verticalLines: [
+                    VerticalLine(
+                      y: 1.8,
+                      color: Colors.green.withOpacity(0.7),
+                      strokeWidth: 4,
+                    ),
+                  ]
+
+                ),
+                lineBarsData: [
+                  LineChartBarData(
+                    spots: [
+                      FlSpot(0, 1.3),
+                      FlSpot(1, 1),
+                      FlSpot(2, 1.8),
+                      FlSpot(3, 1.5),
+                      FlSpot(4, 2.2),
+                      FlSpot(5, 1.8),
+                      FlSpot(6, 3),
+                    ],
+                    isCurved: false,
+                    barWidth: 4,
+                    colors: [
+                      Colors.orange,
+                    ],
+                    belowBarData: BelowBarData(
+                      show: true,
+                      colors: [
+                        Colors.orange.withOpacity(0.5),
+                        Colors.orange.withOpacity(0.0),
+                      ],
+                      gradientColorStops: [0.5, 1.0],
+                      gradientFrom: Offset(0, 0),
+                      gradientTo: Offset(0, 1),
+                      belowSpotsLine: BelowSpotsLine(
+                        show: true,
+                        flLineStyle: const FlLine(
+                          color: Colors.blue,
+                          strokeWidth: 2,
+                        ),
+                        checkToShowSpotBelowLine: (spot) {
+                          if (spot.x == 0 || spot.x == 6) {
+                            return false;
+                          }
+
+                          return true;
+                        }
+                      )
+                    ),
+                    dotData: FlDotData(
+                      show: true,
+                      dotColor: Colors.deepOrange,
+                      dotSize: 6,
+                      checkToShowDot: (spot) {
+                        return spot.x != 0 && spot.x != 6;
+                      }),
+                  ),
                 ],
-                belowBarData: BelowBarData(
+                minY: 0,
+                gridData: FlGridData(
                   show: true,
-                  colors: [
-                    Colors.orange.withOpacity(0.5),
-                    Colors.orange.withOpacity(0.0),
-                  ],
-                  gradientColorStops: [0.5, 1.0],
-                  gradientFrom: Offset(0, 0),
-                  gradientTo: Offset(0, 1),
+                  drawHorizontalGrid: true,
+                  drawVerticalGrid: true,
                 ),
-                dotData: FlDotData(
+                titlesData: FlTitlesData(
                   show: true,
-                  dotColor: Colors.deepOrange,
-                  dotSize: 6,
-                  checkToShowDot: (spot) {
-                    return spot.x != 0 && spot.x != 6;
-                  }),
-              ),
-            ],
-            minY: 0,
-            gridData: FlGridData(
-              show: true,
-              drawHorizontalGrid: true,
-              drawVerticalGrid: true,
-            ),
-            titlesData: FlTitlesData(
-              show: true,
-              getHorizontalTitles: (value) {
-                switch (value.toInt()) {
-                  case 0:
-                    return 'Sat';
+                  getHorizontalTitles: (value) {
+                    switch (value.toInt()) {
+                      case 0:
+                        return 'Sat';
 
-                  case 1:
-                    return 'Sun';
+                      case 1:
+                        return 'Sun';
 
-                  case 2:
-                    return 'Mon';
+                      case 2:
+                        return 'Mon';
 
-                  case 3:
-                    return 'Tue';
+                      case 3:
+                        return 'Tue';
 
-                  case 4:
-                    return 'Wed';
+                      case 4:
+                        return 'Wed';
 
-                  case 5:
-                    return 'Thu';
+                      case 5:
+                        return 'Thu';
 
-                  case 6:
-                    return 'Fri';
-                }
+                      case 6:
+                        return 'Fri';
+                    }
 
-                return '';
-              },
-              getVerticalTitles: (value) {
-                switch (value.toInt()) {
-                  case 0:
-                    return "";
-                  case 1:
-                    return "1k colories";
-                  case 2:
-                    return "2k colories";
-                  case 3:
-                    return "3k colories";
-                }
+                    return '';
+                  },
+                  getVerticalTitles: (value) {
+                    switch (value.toInt()) {
+                      case 0:
+                        return "";
+                      case 1:
+                        return "1k colories";
+                      case 2:
+                        return "2k colories";
+                      case 3:
+                        return "3k colories";
+                    }
 
-                return "";
-              },
-              horizontalTitlesTextStyle: TextStyle(
-                color: Colors.deepOrange,
-                fontWeight: FontWeight.bold,
+                    return "";
+                  },
+                  horizontalTitlesTextStyle: TextStyle(
+                    color: Colors.deepOrange,
+                    fontWeight: FontWeight.bold,
+                  ),
+                  verticalTitlesTextStyle: TextStyle(color: Colors.black, fontSize: 10)),
               ),
-              verticalTitlesTextStyle: TextStyle(color: Colors.black, fontSize: 10)),
+            ),
           ),
         ),
-      ),
+      ],
     );
   }
 

lib/src/chart/base/axis_chart/axis_chart_data.dart

@@ -83,4 +83,17 @@ class FlGridData {
     this.verticalGridLineWidth = 0.5,
     this.checkToShowVerticalGrid = showAllGrids,
   });
+}
+
+
+/// This class can be used wherever we want draw a straight line,
+/// and contains visual properties
+class FlLine {
+  final Color color;
+  final double strokeWidth;
+
+  const FlLine({
+    this.color = Colors.black,
+    this.strokeWidth = 2,
+  });
 }

lib/src/chart/line_chart/line_chart_data.dart

@@ -10,10 +10,12 @@ import 'package:flutter/material.dart';
 class LineChartData extends AxisChartData {
   final List<LineChartBarData> lineBarsData;
   final FlTitlesData titlesData;
+  final ExtraLinesData extraLinesData;
 
   LineChartData({
     this.lineBarsData = const [],
     this.titlesData = const FlTitlesData(),
+    this.extraLinesData = const ExtraLinesData(),
     FlGridData gridData = const FlGridData(),
     FlBorderData borderData,
     double minX,
@@ -168,12 +170,40 @@ class BelowBarData {
   /// stop points of the gradient.
   final List<double> gradientColorStops;
 
+
+  /// holds data for drawing a line from each spot the the bottom of the chart
+  final BelowSpotsLine belowSpotsLine;
+
   const BelowBarData({
     this.show = true,
     this.colors = const [Colors.blueGrey],
     this.gradientFrom = const Offset(0, 0),
     this.gradientTo = const Offset(1, 0),
     this.gradientColorStops,
+    this.belowSpotsLine = const BelowSpotsLine(),
+  });
+}
+
+
+typedef CheckToShowSpotBelowLine = bool Function(FlSpot spot);
+
+bool showAllSpotsBelowLine(FlSpot spot) {
+  return true;
+}
+
+class BelowSpotsLine {
+  final bool show;
+
+  /// determines style of the line
+  final FlLine flLineStyle;
+
+  /// a function to determine whether to show or hide the below line on the given spot
+  final CheckToShowSpotBelowLine checkToShowSpotBelowLine;
+
+  const BelowSpotsLine({
+    this.show = false,
+    this.flLineStyle = const FlLine(),
+    this.checkToShowSpotBelowLine = showAllSpotsBelowLine,
   });
 }
 
@@ -200,4 +230,45 @@ class FlDotData {
     this.dotSize = 4.0,
     this.checkToShowDot = showAllDots,
   });
+}
+
+
+/// horizontal lines draw from bottom to top of the chart,
+/// and the x is dynamic
+class HorizontalLine extends FlLine {
+  final double x;
+  HorizontalLine({
+    this.x,
+    Color color = Colors.black,
+    double strokeWidth = 2,
+  }) : super(color: color, strokeWidth: strokeWidth);
+}
+
+/// vertical lines draw from left to right of the chart
+/// and the y is dynamic
+class VerticalLine extends FlLine {
+  final double y;
+  VerticalLine({
+    this.y,
+    Color color = Colors.black,
+    double strokeWidth = 2,
+  }) : super(color: color, strokeWidth: strokeWidth);
+}
+
+/// we use ExtraLinesData to draw straight horizontal and vertical lines,
+/// for example if you want show the average values of the y axis,
+/// you can calculate the average and draw a vertical line by setting the y.
+class ExtraLinesData {
+  final bool showHorizontalLines;
+  final List<HorizontalLine> horizontalLines;
+
+  final bool showVerticalLines;
+  final List<VerticalLine> verticalLines;
+
+  const ExtraLinesData({
+    this.showHorizontalLines = false,
+    this.horizontalLines = const [],
+    this.showVerticalLines = false,
+    this.verticalLines = const [],
+  });
 }