-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to make scrollable x axis in flchart so that it looks nice not so compact in nature? #71
Comments
Hi, |
I left it open, and people can thumb it up, then I will do it with high priority. |
@nimesh1997 |
@ZantsuRocks Greate solution, Thank you :) |
@ZantsuRocks solution is really useful, but this is still a good feature to be implemented in the future. In my case, along with the scrolling behavior I need a callback to mark each bar as "touched" when the chart is scrolled. |
This will get perfomance problem ,especially in web . |
This is not working if I have a Sliver App Bar and the graph is placed in SliverChildListDelegate. I tried to change the width of container but it still is constant. |
If anyone wants to achieve panning and mousewheel zooming, following code might help. Note this logic still has flaws like minX and maxX not being clamped to stop zooming etc. However I feel this is good start. @imaNNeoFighT I am not sure if this is a performant way, but seems to achieve some results. Atleast in windows I didn't feel any jitter. 😄 Idea is as follows.
Following example achieves panning and zooming only in x-axis. However the logic can be extended to yaxis as well. import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class PlotData {
List<double> result;
double maxY;
double minY;
PlotData({
required this.result,
required this.maxY,
required this.minY,
});
}
class LinePlot extends StatefulWidget {
final PlotData plotData;
const LinePlot({
required this.plotData,
Key? key,
}) : super(key: key);
@override
_LinePlotState createState() => _LinePlotState();
}
class _LinePlotState extends State<LinePlot> {
late double minX;
late double maxX;
@override
void initState() {
super.initState();
minX = 0;
maxX = widget.plotData.result.length.toDouble();
}
@override
Widget build(BuildContext context) {
return Listener(
onPointerSignal: (signal) {
if (signal is PointerScrollEvent) {
setState(() {
if (signal.scrollDelta.dy.isNegative) {
minX += maxX * 0.05;
maxX -= maxX * 0.05;
} else {
minX -= maxX * 0.05;
maxX += maxX * 0.05;
}
});
}
},
child: GestureDetector(
onDoubleTap: () {
setState(() {
minX = 0;
maxX = widget.plotData.result.length.toDouble();
});
},
onHorizontalDragUpdate: (dragUpdDet) {
setState(() {
print(dragUpdDet.primaryDelta);
double primDelta = dragUpdDet.primaryDelta ?? 0.0;
if (primDelta != 0) {
if (primDelta.isNegative) {
minX += maxX * 0.005;
maxX += maxX * 0.005;
} else {
minX -= maxX * 0.005;
maxX -= maxX * 0.005;
}
}
});
},
child: LineChart(
LineChartData(
minX: minX,
maxX: maxX,
maxY: widget.plotData.maxY + widget.plotData.maxY * 0.1,
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
interval: widget.plotData.result.length / 10,
),
leftTitles: SideTitles(
showTitles: true,
margin: 5,
),
topTitles: SideTitles(
showTitles: false,
margin: 5,
),
),
gridData: FlGridData(
drawHorizontalLine: false,
),
clipData: FlClipData.all(),
lineBarsData: [
LineChartBarData(
barWidth: 1,
dotData: FlDotData(
show: false,
),
spots: widget.plotData.result
.asMap()
.entries
.map((entry) => FlSpot(entry.key.toDouble(), entry.value))
.toList(),
)
],
),
),
),
);
}
}
|
This seems to have a lot of thumbs up now, are there any plans to support it in the near future? |
Hi @jlubeck. You are right, it has a lot of thumbs up. Also pull requests are welcome. |
hey. gays! It's already 2024, why don't fix this issue |
@wuao kind of tall order for a one-man open source project, hm?.. see my post just before (!) yours for a solid workaround |
This comment was marked as spam.
This comment was marked as spam.
One of the biggest flaws of Flutter is the lack of official support (monetary) to such great plugins Let me know when the PR is ready |
This comment was marked as spam.
This comment was marked as spam.
Willing to add another 100€/$ into the pool. @imaNNeo Interested in doing this for the sake of code quality? |
@imaNNeo I'll contribute zoom and horizontal scrolling if you don't mind. Haven't used |
This comment was marked as spam.
This comment was marked as spam.
I'm delighted to see these kinds of effective messages. It is something that helps the open-source community thrive.
@Peetee06 I would appreciate it if you do this. My estimation about this issue is around 24-30 hours. So if you think you can do this from zero to 100, you can start.
I don't want to disappoint you, I just want to let you know how much effort you need to put in.
|
@imaNNeo thank you so much for the summary! That will allow me to save some time to figure out possible solutions. The time estimate looks fine with me, I'll work on it until I got a good solution working. Thanks for prioritizing the PR. Will keep you updated. |
Sounds good! |
This comment was marked as spam.
This comment was marked as spam.
Scroll/Zoom Feature is Here! 🎉I'm happy to announce that fl_chart now supports the scroll/zoom feature in 0.70.0! Special thanks to @Peetee06, who made it happen (from 0 to 100)! Also, a huge thanks to the sponsors (@AlexanderMonneret and @NeariX67) for adding some motivation. Please contact @Peetee06 to transfer the donation. (I know it’s not much, but it’s a reward!) Thanks for waiting 5 years—this was something I really wanted to implement, but it’s super complicated. @Peetee06 can tell you how challenging it was. Enjoy the new feature, and let us know what you think! 🚀 I will close this issue. But you can always create a new issue to report your bugs or feature requests. |
Do you really need flutter >=3.27.0 ? |
We did it in #1805 (you can read more about it) |
perfect! Great work! |
@imaNNeo
|
@desmeit with a little bit of custom work you can surely make this happen. This can work by:
In the listener you do the following:
If
Please let me know if this works or you need any more guidance :) |
@GanZhiXiong Happy to hear that 👍 I can say something about point 1 and 2. @imaNNeo will take care of 3 and can answer that best. 1. Implementation detailsWe are proxying a custom You can start in AxisChartScaffoldWidget and go deeper from there. The interesting parts are the chart renderers like 2. Why not SingleChildScrollView?While SingelChildScrollView would have been easier to implement, it would also be less powerful. It would only be possible to scale/pan vertically OR horizontally but not both at the same time. |
Hi @Peetee06 @imaNNeo! And I wanted to know if there is any way to automatically scroll the chart to the end of the line, or to the last bar if it were a bar chart.... Thanks in advance! |
感谢您的来信!请您有事去我的新博客:[恒星]http://my.oschina.net/wuao/blog生命不灭的恒星 当梦想擦撞到现实 请不要轻言放弃!
|
Hi @eljorgit, Great to hear you are using the zoom/pan feature! To set the zoom to a specific position, you can do the following:
Your matrix needs to be scaled before calculating the This should result in your chart being scrolled to the end. Please let me know if you need any more help! |
Bar chart is very compact in nature if there are many values on the x-axis. How to make it less compact if there are so many values on x-axis. I want it to horizontal scrollable?
The text was updated successfully, but these errors were encountered: