Skip to content

Commit

Permalink
Feature/extra lines (#19), fixed issue (#11)
Browse files Browse the repository at this point in the history 
* added ExtraLinesData to LineChartData for drawing extra horizontal and vertical lines on the line chart

* added BelowSpotsLine in the BelowBarData to show lines from each spot to the bottom of the chart

* updated sample 3 code and image

* upgraded version to 0.0.7 and added new demo apk
  • Loading branch information
@imaNNeo
imaNNeo authored Jun 12, 2019
1 parent cde2c41 commit 969b547
Show file tree
Hide file tree
Showing 11 changed files with 337 additions and 86 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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

Expand Down
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -36,7 +36,7 @@ Thank you all!

```kotlin
dependencies:
fl_chart: ^0.0.6
fl_chart: ^0.0.7
```


Expand Down
207 changes: 125 additions & 82 deletions example/lib/line_chart/samples/line_chart_sample3.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
),
),
),
),
],
);
}

Expand Down
13 changes: 13 additions & 0 deletions lib/src/chart/base/axis_chart/axis_chart_data.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
}
71 changes: 71 additions & 0 deletions lib/src/chart/line_chart/line_chart_data.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
});
}

Expand All @@ -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 [],
});
}
Loading

0 comments on commit 969b547

Please sign in to comment.