fl_chart icon indicating copy to clipboard operation
fl_chart copied to clipboard

Get additional metadata from lineTouchData

Open KapitanPL opened this issue 2 years ago • 0 comments

Discussed in https://github.com/imaNNeoFighT/fl_chart/discussions/1133

Originally posted by KapitanPL September 3, 2022 Hi Guys,

I generate my LineChartBarData based on model.

I then want to let user interact with the model via LineTouchData.

LineTouchData.lineBarSpots!.first.bar seemed to reference the LineChartBarData.

So I tried to extend LineChartBarData to contain my metadata and set this extended object as LineChartBarData. It works, data is displayed.

class LineBarDataMeta extends LineChartBarData {
  LineBarDataMeta(
      {
      ...
      required this.displayed,
      required this.dataKey});
  bool displayed;
  String dataKey;
}

However when I try:

lineTouchData: LineTouchData(
        touchCallback: (p0, p1) {
          if (p0 is FlTapDownEvent &&
              p1 is LineTouchResponse &&
              p1.lineBarSpots != null) {
            var data = p1.lineBarSpots!.first;
            if (p1.lineBarSpots!.first.bar is LineBarDataMeta) {
              var spots = (p1.lineBarSpots!.first.bar as LineBarDataMeta);
              print("key: ${spots.dataKey}");
            }
            print("touch!: ${p1.lineBarSpots}");
          }
        },
      )

the if (p1.lineBarSpots!.first.bar is LineBarDataMeta) part is never true.

How else can I pass some metadata to the lineTouchData.touchCallback in order to get it when processing the callback?

Edit:

Okay, I get it. There is p1.lineBarSpots![n].barIndex

The problem is that if you have two or more spots with the same X-coordinate you do not know which one you tap. They are ordered by y-value. And moreover the FlTapDownEvent has coordinates in "screen" coordinates, however the spot is in the chart coordinates. (x/y values). This is going to be a nightmare!

How to know which one of the spots I clicked?

KapitanPL avatar Sep 17 '22 21:09 KapitanPL