search

imaNNeo / fl_chart

FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
https://flchart.dev
MIT License
6.87k stars 1.78k forks source link

Adding more lines to the same chart panel in realtime? #1691

Closed kdesroch1 closed 5 months ago

kdesroch1 commented 5 months ago

All of the line chart examples seems to have a predetermined number of lines hard coded in. Is it possible to add lines on the fly? For example, if you were reading some data from a device on the serial port (say periodic samples of 256 points of data) and wanted to add a new line on the same chart panel every time a new sample came in?

The minX, maxX, minY, maxY would be constant. New lines of different color would be added and possibly line labels.

imaNNeo commented 5 months ago

It should be very simple, you just need to keep a list of showingLines and update the list when a new data comes. You can find the source code here

https://github.com/imaNNeo/fl_chart/assets/7009300/404a427e-2255-432a-b7d6-c23dc4447fc8

kdesroch1 commented 5 months ago

Amazing! Thank you!

One other question: is there a way to specify a the axis step? I found the grid size control, but cannot figure out how to adjust the numbers on the axis to match.

kdesroch1 commented 5 months ago

Also, it there a way to keep the grid lines showing when there is no data?

imaNNeo commented 5 months ago

s step? I found the grid size control, but cannot figure out how to adjust the numbers on the axis to match.

You can use interval property in the SideTitles or FlGridData

imaNNeo commented 5 months ago

Also, it there a way to keep the grid lines showing when there is no data?

It is a bug and should be fixed in the next version. Stay tuned! 😊

kdesroch1 commented 5 months ago

s step? I found the grid size control, but cannot figure out how to adjust the numbers on the axis to match.

You can use interval property in the SideTitles or FlGridData

The FLGridData intervals only seems to control the grid and not the text on the axis.

I got the FLTitlesData to adjust the text on the axis, but it seems quite complicated for such a simple thing. I had to add a widget or I was getting errors. It's such a basic thing, seems like there should be something that works like the minX/maxX/etc... of at the very most like the FLGridData intervals. Am I missing something?

imaNNeo commented 5 months ago

It's very simple, you just need to change the interval property in the SideTitles class. (no need to update other things) Take a look at the below sample: (source code is here)

https://github.com/imaNNeo/fl_chart/assets/7009300/18a10ac9-a6d4-45d6-91be-aa521664b502

kdesroch1 commented 5 months ago

Your support for this package is incredible! Thank you!

I'm not clear though, why this works:

double verticalInterval = 1.0; . . . sideTitles: SideTitles( reservedSize: 26, showTitles: true, interval: verticalInterval, ),

But, this does not:

sideTitles: SideTitles( reservedSize: 26, showTitles: true, interval: 1.0, // as int (1) doesn't work either ),

kdesroch1 commented 5 months ago

Ok, I figured it out, a 'const' goes in front of AxisTitles. This doesn't follow the same patten as the other parameters like minX, reservedSize, etc..., so it was a bit confusing.

bottomTitles: const AxisTitles( sideTitles: SideTitles( reservedSize: 26, showTitles: true, interval: 1.0, ), ),

FYI, in your example, the verticalInterval and horizontalInterval variables are assigned to the wrong axis.

imaNNeo commented 2 months ago

Landed in 0.69.0