Flutter Tutorial - Line Chart - FLChart
Вставка
- Опубліковано 24 жов 2020
- Create a Line Chart easily in your Flutter app.
Click here to Subscribe to Johannes Milke: ua-cam.com/users/JohannesMilke...
- Source Code: github.com/JohannesMilke/fl_l...
- Buy My Courses: johannesmilke.teachable.com/p...
- Follow Twitter: intent/follow?ori...
Resources:
FLChart Plugin: pub.dev/packages/fl_chart
Bar Chart Tutorial: • Flutter Tutorial - Bar...
Pie Chart Tutorial: • Flutter Tutorial - Pie...
-- JOIN THE CREW --
bit.ly/JohannesMilke
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Me :-)
- Twitter: intent/follow?ori...
- Linkedin: / johannesmilke
- Github: github.com/JohannesMilke
PLAYLISTS
- All Flutter Videos: • Flutter Tutorial - Tex...
- Widgets - Flutter: • Flutter Tutorial - Sel...
- Plugins - Flutter: • Local Push Notificatio...
- Animations - Flutter: • #12 - Flutter Advent -...
- Designs - Flutter: • Flutter - Screen Desig...
If you find this video useful, LIKE & SHARE this video to help other people who also learn Flutter :)
bit.ly/JohannesMilke
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-) - Наука та технологія
Whatever I search regarding flutter, you are always there to help me.
You are awesome man❤❤.
this was very helpful! thank you so much for taking the time to make this!
Hello! Great video. I have a question: can you add the values numbers to the point in the chart?
Does anyone know how to change the interval amount of the min/max border numbers? So I can go up by .1 instead of us 1?
Thank you bro for video. Helps a lot!
Great Explanation , Thankyou, Subscribed!!!
Hi Johannes, can you please help me in changing the tooltip text which is displayed when I tap on the graph plot of fl_chats i.e on tapping on FlSpot(). I am getting values as 1,2,3,4,5
Sir, how can I fix the Y-Axis to contains only 10 value?
Sure, thisnis really helpful and might become handy one day.
Can you create a video on how we can use online data, fetched data; and just wondering will it be good to make the graph horizontal scrollable!?.
Keep it up brother,
Greetings from Tanzania 🇹🇿
Thanks for the video, helps a lot!
Excellent Johannes, thanks
It's amazing! Thank you!
How can we make a linechart with timestamp as the x-axis parameter. Basically I want to plot data every second as it is being added to firestore database.
how to change the color gradient of area under the graph from left to right to top to bottom
Thank you for this tutorial :)
Hey Jonnahes love your content.... Can I possible get the from firebase and put in the Line chart? Any source
if you're having error (TextStyle? cannot be assigned to TextStyle?) when adding ''getTextstyles' , just update dependency to 0.41.0{null safety) and add 'context' with value....... thank you for this video
How can I connect this with google sheets API?
Really Helpful Video.
Very nice and practical
great, many thanks Johannes
Great job. Could you please make fl line and pie chart data from json url based apis. It would be great help or share any refrenece. Thank you.
tnx buddy.great effort
Thank you. it is very helpful
Thanks, you save my evening)))
Glad to hear that, You are welcome @KREeDo5! 😊
Great content.
Hey, it's a great tutorial! But I've got a question, how can I make the chart scrollable on the X-axis? Because I need to show data for the date range a year back, the chart would be too big to display without scrolling. Would be great to know the solution to implement something like this. Thank you.
you can wrap it with ListView and set scrollDirection: Axis.Horizontal, you may need to write, shrinkwrap: true also inside listview
Impressive ♥️♥️ 🌟
Please make the same graph with some dynamic data from web api if possible, It will be great if you can do.
I'm trying to find a solution for this now so I can have a graph update with a snapshot. Let me know if you figure something out to make it work!
edit: Temporary solution so far, I extracted the method and wrote it out, adding the 'for' loop and 'array' being my data that changes:
LineChartBarData lineChartBarData() {
List spot = [];
for (var i = 0; i < array.length; i++) {
var x = i + 1;
spot.add(FlSpot(x.toDouble(), array[i]));
}
print(spot);
return LineChartBarData(
spots: spot,
isCurved: false,
colors: gradientColors,
barWidth: 5,
isStrokeCapRound: true,
dotData: FlDotData(
show: true,
),
belowBarData: BarAreaData(
show: true,
colors: gradientColors.map((color) => color.withOpacity(0.3)).toList(),
),
);
}
Thanks Jhonnes
Hi this really helped me. Just one question... can I somehow declare the direction in which the linear gradient under belowBarData is shown? Id like to have it from top to bottom but its from left to right... great video tho
and how can I make the labels on the x axis appear a bit on the gradient so not under it but on the gradient if you know what I mean
muito obrigado mesmo.Toppp dmmssss. Sou do Brasil
great, this was very helpful! But can you show me how, if i would change the data form realtime database in firebase? i hope you’ll help ne:))))))
Nice line shart
Thanks, @arikev8040! 🙂
great video but I'm facing a bit of a problem with the chart as some extra lines show up on the chart as if their start and end is connected.
@@HeyFlutter it's not grid lines it's the slope line.
Wonderful tutorial! I just want to ask if there's a way to dynamically change the labels of the graph? I think they are built to be constants but since this is a graphic tool, it should be able to be changed dynamically. Thank you!
I already found the solution. Still, thanks for the wonderful tutorial.
hey can you please share the solution i am not able to find it
What is the solution ??
@@jaspreetsingh1326 You can dynamically change the labels by returning a variable in the titlesData parameter of the LineChartData which is under the LineChart widget. The titlesData contains the topTitle, bottomTitle, leftTitle, and rightTitle. Specifically the getTitles parameter.
good tutorial 👏🏼
Glad you liked it, @nazagm8392 😀
Can the gradient colors be along the vertical axis instead? It'd make more sense in many use cases...
Thank You LesPtitsOiseaux! Follow this link: stackoverflow.com/questions/56437850/how-to-apply-linear-gradient-in-flutter-charts
I hope you will get your answer 🙂
Hi Johannes Mike i am using this chart package in my flutter project i want to adjust the on tap for dotData to keep showing on the chart if the user did tap on the line only the specific dot data tapped and if the user tapped on another dot it will show and hide the previous showed dot data , can you please help me with this problem and thank you ❤
Thank You Nasser Baba! Follow this link: pub.dev/packages/fl_chart
I hope you will get your answer 🙂
i want to show the line below fldot for some points, is it possible? also that line should be visible without taping on it..?
@@HeyFlutter thank you so much one more thing how to remove border of this graph
values on x and y axis are overlapping when I increase values on x or y axis.
Is there any solution for this?
@@HeyFlutter thanks
Great content and clear explanation. how can draw multiple line charts on a single graph is it possible to draw the multiple lines on a same graph in fl_charts? if yes please give me some suggestions on how can i achieve.
Thanks.
check there repo or use sync fusion
You can just add a second LineChartBarData(...) in lineBarsData like:
lineBarsData: [
LineChartBarData(...),
LineChartBarData(...)
]
hello, is possible to change the left title with image or icon?
Thank you, @kulitjeruk5292! 🙂. Try to provide enough details with your question whenever you face any issue.
very good
Hey sir nice tutorial how to make tooltip add certain dot without on tap event in fl chart
@@HeyFlutter yes sir, when we tap the chart it show the data in the tooltip , i want to show one tooltip at the highest point in the chart at the beginning chart render
Can you explain how to zoom charts??
Thank you, Hari Prasath S! 🙂
I got the 500th like!
Thanks, LesPtitsOiseaux! 🙂
Great video Mike Love your work
Thank you, bouchnak jihed! 🙂
Hey Johannes,
thank you for the tutorial. I just want to let you know, that there had to be some improvement on fl_chart, which doesn't suit one on one with your tutorial anymore. For example the titles arguments in the FlTitlesData widget know takes a AxisTitles widget, which then takes a SideTitles widget. No big deal for an advanced dev, but a beginner maybe couldn't follow along your tutorial anymore. So maybe you want to take a look at the changes and update your video.
Thanks for your feedback, Alexander Klehm! 🙂
How would I use Firestore Data for my chart info ?
Thank You Aespa Avatar Insights! Follow this link: medium.com/@codingInformer/how-to-use-flutter-time-series-charts-with-firebase-6f3f364b5902
I hope you will get your answer 🙂
@@HeyFlutter Thanks soooo so so much Mr Milke . Much much appreciated. Just what I was looking for yes . Thanks you
Cool!
I am getting the error that parameter colors is not defined
Thank You Aditya Sinha! Follow this link: stackoverflow.com/questions/63863187/flutter-the-named-parameter-colors-isnt-defined-in-sweepgradient
I hope you will get your answer 🙂
Sir kindly make banking app using flutter.???
@@HeyFlutter thanks
Can it displays legend?
Thank You @SetioDewo! Follow this link: pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html
I hope you will get your answer 🙂
@@HeyFlutter thank you very much
This video is great, but it's outdated. Latest dependencies are not compatible with the code. When I run the code with dependencies used in this video, it gives me problems with null safety. It would be nice to have at least source code updated.
Thanks for the idea, Emir Sehic! 🙂 I have added it to my list of ideas for future videos!
can this handle real time data?
Thank you, Kent Thomas! 🙂. Yes it can.
@@HeyFlutter please do a video highlighting this, there is only the pay widget syncfusion on UA-cam teaching this and I am certain there are many users online willing to learn more about graphing their data.
FlSpot(1,-0.16752809),
FlSpot(3, 0.24400593),FlSpot(6, 4.68283943),FlSpot(10, 19.54111649) value add than over follow the scren
@@HeyFlutter please make one video
you look different on videos ,than in real
I subscribed today which is late😢
Great, Thank you @learneverything5946!
this example is not yours, it belongs to flchart team ! u should've mentioned it to show your honesty at least !
dieser deutsche Akzent xD
(G)old
If your file line_titles.dart is not working try this code:
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class LineTitles {
static getTitleData() => FlTitlesData(
show: true,
bottomTitles: AxisTitles(
axisNameWidget: const Text(
'Meseci',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
sideTitles: SideTitles(
showTitles: true,
reservedSize: 30,
getTitlesWidget: (value, meta) {
const style = TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
);
Widget text;
switch (value.toInt()) {
case 2:
text = const Text('MAR', style: style);
break;
case 5:
text = const Text('JUN', style: style);
break;
case 8:
text = const Text('SEP', style: style);
break;
default:
text = const Text('', style: style);
break;
}
return SideTitleWidget(
axisSide: meta.axisSide,
space: 8.0,
child: text,
);
}),
),
leftTitles: AxisTitles(
axisNameWidget: const Text(
'Vrednost',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (double value, TitleMeta meta) {
const style = TextStyle(
color: Color(0xff67727d),
fontWeight: FontWeight.bold,
fontSize: 15,
);
String text;
switch (value.toInt()) {
case 1:
text = '10K';
break;
case 3:
text = '30k';
break;
case 5:
text = '50k';
break;
default:
return Container();
}
return Text(text, style: style, textAlign: TextAlign.left);
},
reservedSize: 40,
interval: 1,
),
),
);
}
Your efforts are well appreciate👏 Thank you for your contribution, Rok Hladin! 🙂
Thank you. right now some code have to change a bit.
What could be the possible reasons for error