Comments (10)
Hi Trent, thanks for opening this issue.
Optional grid lines and labels sound like reasonable features to add - I'll try to get them done when time permits.
Posting an issue like this is the best way to let me know what to prioritize :). PRs are welcome too of course!
from flutter_sparkline.
I just did it myself on my candlestick graphing package inspired by your sparkline package :) Figured out how to do all the painting by just staring at ur code. I could do a similar thing for this and submit a PR if you like how they look?
from flutter_sparkline.
Nice work! If having them in a sparkline chart would be useful to you, then absolutely feel free to send in a PR.
A few quick notes from looking at your implementation:
- We'd probably want to offset the labels to the side so they don't overlap with the chart.
- Since calling
layout()
on aTextPainter
is expensive, we wouldn't want to do that on every build of the CustomPaint: it would be better to initialize and layout the labels in the main widget, and pass them in to the painter which callspaint()
on them.
from flutter_sparkline.
Thanks so much for the feedback. Just started with flutter so could you help me understand how I would initialize and layout the labels in the main widget without knowing the height of the canvas. The idea makes sense and I see how it would be less expensive I just don't know how I would do it without some of the variables that are inside the paint(Canvas canvas, Size size)
function as the labels' location depends on them.
from flutter_sparkline.
You'd still call textPainter.paint()
in the CustomPainter, you'd just remove the textPainter.layout
and new TextPainter()
calls to somewhere out of the build/paint methods so the painter gets created once and cached.
So from your example:
This can all be extracted as it doesn't rely on any paint-time information:
TextPainter textPainter = new TextPainter(
text: new TextSpan(
text: "\$" + numCommaParse(_maxVolume),
style: new TextStyle(
color: gridLineLabelColor,
fontSize: 10.0,
fontWeight: FontWeight.bold)),
textDirection: TextDirection.ltr);
textPainter.layout();
This gets called in paint() with the rest of the elements being drawn:
textPainter.paint(canvas, new Offset(0.0, gridLineY + 2.0));
I've done something similar in my circular chart widget:
I build the TextPainter here - and then paint it here.
Hope that helps.
from flutter_sparkline.
Right it's just that gridLineText
depends on height
and gridLineY
which both depend on the canvas sizing so I don't think I would be able to build them outside the CustomPainter with the way my code currently works. I'm sure it would be possible though, just might have to rethink a bit of it.
gridLineValue = _max - ((_max - _min) * (gridLineY / height));
String gridLineText = gridLineValue.toString()[4] != "."
? gridLineValue.toString().substring(0, 5)
: gridLineValue.toString().substring(0, 4);
TextPainter textPainter = new TextPainter(
text: new TextSpan(
text: "\$" + gridLineText,
style: new TextStyle(
color: gridLineLabelColor,
fontSize: 10.0,
fontWeight: FontWeight.bold)),
textDirection: TextDirection.ltr);
textPainter.layout();
textPainter.paint(canvas, new Offset(width - 32.0, gridLineY - 13.0));
from flutter_sparkline.
I feel like gridLineValue
doesn't really need to depend on gridLineY
and height
though, we already know our max and min values, and we know how many lines we want to display, it should be fine to calculate the value externally [for the label's text string] then use the scaling logic we have in place in order to know where to paint them.
from flutter_sparkline.
I think I figured it out. It only makes the makes the TextPainters and and calls layout on them when the entire widget is rebuilt.
Is this how it should be done?
Thanks so much for helping me out btw. Just curious, how did you learn everything you know about flutter?
from flutter_sparkline.
Looks great!
Quick nit:
You're looping on your data twice here, you can just combine this with the previous loop:
for (var i in data) {
if (i["volumeto"] > _maxVolume) {
_maxVolume = i["volumeto"].toDouble();
}
}
There's also max()
and min()
methods in dart:math
, though I'm not sure how convenient it would be for you to use there.
If you decide to have updateable data in the future [to make your graph animated for example] - then you'll need to extract your update
logic into the main OHLCVGraph
widget [and make it a StatefulWidget
instead of a StatelessWidget
so it can hold and update the gridLineTextPainters
].
Thanks so much for helping me out btw. Just curious, how did you learn everything you know about flutter?
I'm happy to help, glad it worked out :D.
I've been using flutter for some months now, so it's mostly added knowledge by trial and error, reading through the source code [dig through the framework and engine code some time, they're really well organized and excellently documented], and trying to read through the flutter github issues/PRs every now and then.
If you aren't already there, consider joining the main flutter gitter channel: there's a lot of 'passive' knowledge you can gain just by seeing the same questions and answers over and over :)
from flutter_sparkline.
And for Animation/CustomPainter stuff in Flutter this is an excellent article: https://medium.com/flutter-io/zero-to-one-with-flutter-43b13fd7b354
from flutter_sparkline.
Related Issues (17)
- Support for gradient in color HOT 4
- [Regression] Line does not end at the end of the chart
- [GridLines] Fill does not fill properly HOT 1
- [Feature Request] similar data should come with y-axis greater than zero
- [Bug] Exact same data produces no graph HOT 10
- [Feature Request] Allow to set fixed boundaries for data parameters HOT 1
- [Feature Request] Allow nulls in the data, for showing discontinuous lines
- Update Value
- Any news from de maintainer?
- how to show a text above the line? HOT 1
- How can I create a Sparkling inside an Scrollview to show a data set too big? HOT 1
- Need null safety version HOT 1
- Request: Label data points
- Unable to install on flutter dev channel project HOT 1
- when support >dart 2.0 HOT 1
- [Feature Request] Smoothed curve HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flutter_sparkline.