Feature/line chart extra lines #18

agustka · 2019-06-11T13:21:46Z

Adding extra line data to line charts that contains horizontal and vertical lines.

imaNNeo · 2019-06-11T14:10:59Z

lib/src/chart/line_chart/line_chart_data.dart

@@ -129,6 +131,9 @@ class LineChartBarData {
  /// to show dot spots upon the line chart
  final FlDotData dotData;

+  // to show line chart annotations such as average line and vertical dot lines
+  final ExtraLinesData extraLinesData;


Here we don't need it, because ExtraLinesData as defined on LineChartData, we should use that to draw lines in the whole chart, and not related any LineChartBarData,
Please remove it, and for the below lines as I said we should put it on the BelowBarData, I will explain it on the next sections.

As I saw you defined it to the LineChartData

imaNNeo · 2019-06-11T14:12:37Z

lib/src/chart/line_chart/line_chart_data.dart

+}
+
+class DashDefinition {


Please remove it, we can add line style functionality line Dash and Dot effects in next phase, here we just add two feature (Extra Lines -> you use it for avg line, and BelowBar Lines-> you use it for below bar lines), then I will add LineStyle after this PR, don't worry about that.

All right, although I will not be able to use fl_chart library without it.

We can not add all features in a single PR, I said multiple times that I will add it after your pR, it should add in a separate phase, because I want to reuse it on other parts such as grid and borders, this is a public library and we should implement all features generic and customizable, (for example add LineStyle on other parts).
be patient

imaNNeo · 2019-06-11T14:19:20Z

lib/src/chart/line_chart/line_chart_data.dart

+class VerticalLine extends LineChartLine {
+  final double x;
+  final double endY;


we don't need endY because ExtraLines should be drawn from y = 0 to y = height, and the only x is dynamic ( for the below line we should apply another solution), prefer this ExtraLines just for avg line.

I need the line to end at a datapoint, not at the top of the chart...

If we want to draw this to the specific data point then we should have start data point alongside it.
I said, use it just for full horizontal and vertical lines, and it can be used as a avg line in your usecase, then you should use BelowBarData to draw lines below dot points

After checking it some more I understand better what below bar data is for, so I'm dropping endY.

imaNNeo

For the lines below the spots, you can define it on the BelowBarData, because it is related to the bar, then we don't need to get any endX and endY from the user because we have the Spot x and y, then ve can draw a vertical line below it.
implement the data class like this:

class BelowBarData {
 …
 FlLine lineBelowSpot; // this is a line that determines color and strokeWidth of the line and draw from the spot’s x and minimum y position to the spot’s x and y.
 …
}

imaNNeo · 2019-06-11T14:19:46Z

lib/src/chart/line_chart/line_chart_data.dart

+class HorizontalLine extends LineChartLine {
+  final double y;
+  final double endX;


also we don't need endX, (read previous comment)

What if the user wants the line to only go to a certain data point though and not necessarily to the end of the chart...? I added it for consistency with VerticalLine but I can easily drop it.

Drop it plz, if we want to make it possible to set end point then we have to add start point for it to be customizable

imaNNeo · 2019-06-11T14:23:47Z

lib/src/chart/line_chart/line_chart_painter.dart

@@ -40,6 +45,8 @@ class LineChartPainter extends AxisChartPainter {
    });

    drawTitles(canvas, viewSize);
+
+    drawAnnotation(canvas, viewSize);


dude, this is not annotation in a generic definition, look at the problem as a generic problem, we should name it extraLines to draw extra lines on the chart, then you can use it for your problem to draw avg line, this is not related to the FL Chart.

Residual naming from the original work when I first started. Renaming.

imaNNeo · 2019-06-11T14:27:30Z

lib/src/chart/line_chart/line_chart_painter.dart

+    viewSize = getChartUsableDrawSize(viewSize);
+    extraLinesPaint.color = line.color;
+    extraLinesPaint.strokeWidth = line.strokeWidth;
+    final double x = line.endX == null ? viewSize.width : getPixelX(line.endX, viewSize);


here we can equal x with the viewSize.width every time.
because this is not for draw below lines

imaNNeo · 2019-06-11T14:32:28Z

lib/src/chart/line_chart/line_chart_painter.dart

+    if (line.dashDefinition != null) {
+      _drawDashedLine(canvas, extraLinesPaint, 0, y, x, y, line.dashDefinition);
+    } else {
+      _drawSolidLine(canvas, extraLinesPaint, 0, y, x, y);


remove this if else and determine the line as a solid line every time ( I will add Line Style after your PR in a separate phase), and you can draw the solid line here and you don't need to put it in a new function (because there is no if else anymore)

imaNNeo · 2019-06-12T10:46:06Z

lib/src/chart/line_chart/line_chart_data.dart

@@ -162,6 +164,9 @@ class BelowBarData {
  final Offset gradientFrom;
  final Offset gradientTo;

+
+  final List<VerticalLine> verticalLines;


here we should just have a single FlLine that determines the style of line, then we can repeat it for all spot points, we don't need VerticalLine, because we know where we should draw them (below the spots)

Dropped in favor of FlLine

imaNNeo · 2019-06-12T10:52:37Z

lib/src/chart/line_chart/line_chart_data.dart

+
+class HorizontalLine extends FlLine {
+  final double y;


We have a convention on Library,
the horizontal is all of the things that draw on the x axis,
the vertical is all of the things that draw on the y axis,
then HorizontalLine means lines that draw on the x axis and ( for example in x = 1, 2, 3, 4, 5), and y is the same (may be it is VerticalLine in your head, but it is a convention in this library, check the FlTitlesData you can find out what does it means.)
conclusion:
we should have x here instead of y

Won't this confuse everybody? A horizontal line has infinite x values... seems strange but I'll change it.

Y has been changed to x.

imaNNeo · 2019-06-12T14:25:43Z

lib/src/chart/line_chart/line_chart_painter.dart

@@ -326,4 +348,31 @@ class LineChartPainter extends AxisChartPainter {

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
+
+  void drawExtraLines(Canvas canvas, Size viewSize) {


Here plz draw both horizontal and vertical lines, (firstly data class should be updated)

The drawing of the two line types has been merged into this method.

But I'm not sure what you mean with that the data class should be updated?

imaNNeo · 2019-06-12T14:26:53Z

lib/src/chart/line_chart/line_chart_data.dart

+}
+
+/// This class holds data about drawing chart annotations (data decorations) such as average line and data point lines


Update the comment, ( we don't need to mention anything about annotation, this word is specific for your use case)

…nd data point lines. Also added LineStyle class and methods to draw dashed lines.

…awExtraLines

imaNNeo · 2019-06-12T18:03:03Z

lib/src/chart/line_chart/line_chart_painter.dart

@@ -317,6 +323,36 @@ class LineChartPainter extends AxisChartPainter {
    }
  }

+  void drawExtraLines(Canvas canvas, Size viewSize) {
+    // Draw vertical data point lines under spots


her is not under spots, fix the comment

imaNNeo · 2019-06-12T18:06:15Z

lib/src/chart/line_chart/line_chart_painter.dart

+    // Draw vertical data point lines under spots
+    viewSize = getChartUsableDrawSize(viewSize);
+    for (LineChartBarData barData in data.lineBarsData) {
+      if (barData.belowBarData.verticalLines == null) {


why you are reading it from belowBarData?
dude draw it just like the horizontal lines,
you should have a class like this:

class ExtraLinesData { final bool show; // Horizontal line definitions final List<HorizontalLine> horizontalLines; // Vertical line definitions final List<VerticalLine> verticalLines; const ExtraLinesData({ this.show = true, this.horizontalLines, this.verticalLines, }); }

both of them should define in this class

You told me to move it to below bar data...

imaNNeo reviewed Jun 11, 2019

View reviewed changes

imaNNeo reviewed Jun 12, 2019

View reviewed changes

agustk added 5 commits June 12, 2019 14:28

Adding extra line data to line charts which include an average line a…

582c528

…nd data point lines. Also added LineStyle class and methods to draw dashed lines.

Refactored the way average line and data point lines are implemented.

2ba054a

Refactoring the provided solution based on feedback.

a981add

Further fixes based on code review.

c05ae68

Fixing comment and adding the drawing logic for both line types to dr…

9d90d06

…awExtraLines

imaNNeo reviewed Jun 12, 2019

View reviewed changes

agustka closed this Jun 12, 2019

hsj86715 mentioned this pull request Oct 24, 2019

A FlTouchInputNotifier was used after being disposed. #94

Closed

erasmojcjr mentioned this pull request Nov 19, 2019

error touching chart #116

Closed

BaronTryBest mentioned this pull request Nov 17, 2021

Flutter project ScatterChart Release crash on iPhone #812

Closed

shababhsiddique mentioned this pull request Nov 28, 2021

Pie chart swapping data causes render box exception if animation enabled #829

Closed

darkang3lz92 mentioned this pull request Jan 5, 2022

App crashing in release for Bar chart graphs after upgrading to flutter 2.8.1 #864

Open

nastaran-mohammadi mentioned this pull request May 13, 2022

fl chart error when all values are 0 #1007

Closed

sk784 mentioned this pull request Jun 9, 2022

Throws exception if number of points on the x-axis = 1 #1053

Closed

xuenuanxi mentioned this pull request Jun 16, 2022

Offset argument contained a NaN value. Data initialization with Network request #1061

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/line chart extra lines #18

Feature/line chart extra lines #18

agustka commented Jun 11, 2019

imaNNeo Jun 11, 2019

imaNNeo Jun 11, 2019

agustka Jun 11, 2019

imaNNeo Jun 11, 2019

agustka Jun 11, 2019

imaNNeo Jun 11, 2019

imaNNeo Jun 11, 2019

agustka Jun 11, 2019 •

edited

Loading

imaNNeo Jun 11, 2019

agustka Jun 11, 2019

imaNNeo left a comment

imaNNeo Jun 11, 2019

agustka Jun 11, 2019 •

edited

Loading

imaNNeo Jun 11, 2019

agustka Jun 12, 2019

imaNNeo Jun 11, 2019

agustka Jun 11, 2019

imaNNeo Jun 11, 2019

agustka Jun 12, 2019

imaNNeo Jun 11, 2019

agustka Jun 12, 2019

imaNNeo Jun 12, 2019

agustka Jun 12, 2019

imaNNeo Jun 12, 2019

agustka Jun 12, 2019 •

edited

Loading

agustka Jun 12, 2019

imaNNeo Jun 12, 2019

agustka Jun 12, 2019

agustka Jun 12, 2019

imaNNeo Jun 12, 2019

agustka Jun 12, 2019

imaNNeo Jun 12, 2019

imaNNeo Jun 12, 2019

agustka Jun 12, 2019

		}

		/// This class holds data about drawing chart annotations (data decorations) such as average line and data point lines

Feature/line chart extra lines #18

Feature/line chart extra lines #18

Conversation

agustka commented Jun 11, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

agustka Jun 11, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

imaNNeo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

agustka Jun 11, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

agustka Jun 12, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

agustka Jun 11, 2019 •

edited

Loading

agustka Jun 11, 2019 •

edited

Loading

agustka Jun 12, 2019 •

edited

Loading