Fl_chart: x-Axis based on DateTime object and dots

Created on 4 Sep 2020  路  6Comments  路  Source: imaNNeoFighT/fl_chart

Firstly i must to say that a worked with a lot of Flutter's chart library, and this is the best i found!

I have a problem with two lines on the same graph, and after a lot of checks i found that the x-Axis is based only on indexs, and can't be based on DateTime!
in my case it's really a big problem, because i have 2 lines to show on the graph, one based on quarter of an hour, and the second on minute, in this case there is no match between the 2 lines and the x-Axis.
As you can see on the orange text, the km/h and the date is right, but the location on the graph is not
bug

Google charts is support DateTime graph, in Time Series Charts
https://google.github.io/charts/flutter/gallery.html
You can also see, for example, the Weekly Chart the x-Axis is based on DateTime object
https://pub.dev/packages/bezier_chart

One more important thing is the barWidth, if is set to 0 the line is still appear, it could be good and right that 0 value make the line transparent, and stay only the Dots to appear.
In my case it's help to see a dangerous wind that more than 50km/h
(in the image attached i just drawed the red points in photoshop for the example, that why it's on 20kmh~)
50kmh

Hope you will fix and support this because it's really critical, and add values to your awesome graph.

Needs Reproducible Code

All 6 comments

I'm not sure if my issue is the same or not, but definitely related. I currently have a lot of points that want plotted, but the bottom labels are getting on top of one another. It would be nice to get the labels to automatically adapt based on the values given.

This is my current chart:

image

Even though I want all the dots, I don't want all the labels at the bottom.

@xOldeVx I didn't understand the first problem, and I think you can explain it simpler,
And about the second problem (lines with 0 barWidth), you are right but It is better to make a separate issue to follow it up separately.

And a reproducible code helps me a lot.

Thanks!

@jlubeck You can handle it using the interval property of your SideTitle. Or alternatively you can override getTitles and return empty string wherever you don't want to show a specific title.

Just as a note this issue relates to #444 and #462 and also +1 for this 馃憤

As you can see in the image, in the same point of time (7:30), on the red line is on 21:55 and on the blue is 7:30, if the x-axis was based according to DateTime object, (e.g. FlSpot(DateTime(2017, 9, 19), 25.0) || FlSpot(1612416600000, 25.0) instead of FlSpot(3, 25.0)) it was not happened.
92237965-f339bb80-eec0-11ea-8ea3-e3fa7e4693eb

As you can see in google charts, 2 kinds of line chart, one of time: https://google.github.io/charts/flutter/example/time_series_charts/simple)
and one of index, like yours
https://google.github.io/charts/flutter/example/line_charts/simple

@jlubeck You can handle it using the interval property of your SideTitle. Or alternatively you can override getTitles and return empty string wherever you don't want to show a specific title.

Can you please detail how to use interval property. I have tried to set a value (15 by example) and the application is looping ans stop the UI
My objective is to display a time serie with by example 3 points (9h32, 12:47, 18:29) but display bottom title every 30 minutes

Was this page helpful?
0 / 5 - 0 ratings

Related issues

atreeon picture atreeon  路  4Comments

Mohdx picture Mohdx  路  4Comments

enyo picture enyo  路  4Comments

kw2019ltd picture kw2019ltd  路  6Comments

alexodus picture alexodus  路  3Comments