1. Home
  2. Forum
  3. Flutter
  4. How to get the X / Y values when clicking on a chart?

How to get the X / Y values when clicking on a chart?

How to get the X / Y values when clicking on a chart?

I use:

onChartTouchInteractionDown: (ChartTouchInteractionArgs args) {

print("onChartTouchInteractionDown: " + args.position.dx.toString());
}


But the value is not the X or Y data value but the position.

Any pointers?



15 Replies
DP Dharanitharan Palanisamy Syncfusion Team July 30, 2021 11:05 AM UTC

Hi Peter, 
 
Greetings from the team at Syncfusion. We have analyzed your query and prepared the sample for your reference, kindly make use of it. We used the public method named pointToPixel to convert the pixel to chart data point form that you can access the x and y values. For more information, refer to the below help document. 
 
 
 
Kindly revert us if you need any further assistance on this. 
 
Thanks, 
Dharanitharan. P 


PE Peter July 31, 2021 04:25 AM UTC

Ok, I tried pixelToPoint but I am getting strange values for x and y

My X is DateTime and my y is double but I can both strange number on both that does not co-relate

onChartTouchInteractionUp: (ChartTouchInteractionArgs args) {
CartesianChartPoint? dataPoint =
_mySeriesController?.pixelToPoint(args.position);
print('x value = ' +
dataPoint!. .toString() +
', y value = ' +
dataPoint.yValue.toString());


Example: 

flutter: x value = 1627705874222.692, y value = -169.7426470588235

Actual should be x DateTime and y in the range between -20 to +2

Why does this happen?



DP Dharanitharan Palanisamy Syncfusion Team August 2, 2021 10:03 AM UTC

Hi Peter, 
 
We have analyzed your query and would like to tell you that the value is in milliseconds for the DateTime value by default and you can convert it into DateTime by using the DateTime.fromMilliSecondsSinceEpoch() and in the code snippet we can see that you are accessing the datapoint.yValue, use datapoint. y will return the actual value and please follow the attached sample for your reference. This will help us to analyze your situation and provide the solution to you sooner. 
 
 
Thanks, 
Dharanitharan. P 


PE Peter August 3, 2021 03:00 AM UTC

Hi

I used the below:

onChartTouchInteractionDown: (ChartTouchInteractionArgs args) {

CartesianChartPoint? dataPoint =
_mySeriesController?.pixelToPoint(args.position);
print("original x: ${dataPoint!.x}");
int epoch = ((dataPoint.x * 1000) as num).toInt();
DateTime xDate = new DateTime.fromMicrosecondsSinceEpoch(epoch);
double diffPressure = ((dataPoint.y) as num).toDouble();

print('x value = ' +
DateFormat('dd-MMM-yyyy kk:mm:ss').format(xDate) +
', y value = ' +
diffPressure.toString());
}


I get only approx. values from DateTime; it is off by few minutes to more than 15 mins

and totally wrong values for y.

Has it got to do with the Controller, zoom or position?

Also, I forget to mention that there are more than one series in the chart; so which series is the data from?

Hope to hear from you soon.


DP Dharanitharan Palanisamy Syncfusion Team August 3, 2021 01:16 PM UTC

Hi Peter,  
 
We have investigated your query and would like to provide you a sample and a screen recording. For clarity, we choose line series, in which the x and y values are accurately presented in the custom text widget used in the example. We tested this with multiple series also with zooming and panning but we are unable the replicate the reported issue. So, we would like you to reproduce the problem in the accompanying sample. This will assist us in analyzing your situation and providing you with a solution more quickly. 
 
 
Thanks, 
Dharanitharan. P 


PE Peter August 4, 2021 09:47 AM UTC

I am still not getting accurate results. I am using FastLineSeries. Does it make a difference?

DateTime is off few minutes and Y values are way off by hundreds. My Y values are between -30 to +30 only

flutter: x value = 04-Aug-2021 17:48:55, y value = -316.93014705882354

code:

onChartTouchInteractionDown: (ChartTouchInteractionArgs args) {

CartesianChartPoint? dataPoint =
_mySeriesController?.pixelToPoint(args.position);

DateTime xDate = DateTime.fromMillisecondsSinceEpoch(dataPoint!.x.toInt());
double diffPressure = ((dataPoint.y) as num).toDouble();

print('x value = ' +
DateFormat('dd-MMM-yyyy kk:mm:ss').format(xDate) +
', y value = ' +
diffPressure.toString());
}


Been a week and I am still struggling with this...


PE Peter August 4, 2021 11:51 AM UTC

I discovered a strange observation. I have 4 series of FastLineSeries.

When I only set one ChartSeriesController for one series, it does not work.

But if I set one unique ChartSeriesController per FastLineSeries, then it seems to be working.

I will have, like, 20 Series; so must I have one unique controller per series?

List<ChartSeriesController> _mySeriesControllerList = [];
.....
..
onRendererCreated: (ChartSeriesController controller) {
_mySeriesControllerList.add(controller);
},


DP Dharanitharan Palanisamy Syncfusion Team August 5, 2021 12:52 PM UTC

Hi Peter, 
 
We investigated your question and found that if you are binding multiple series to the same x and y axes, you do not need to create a unique controller for each series. However, if you are binding multiple series to different x and y axes, you must provide a unique controller for each series, as the point value calculation is also dependent on the axes. We believe the reason you are getting the erroneous y values is that you are accessing another series controller. We hope this information is useful to you, and please revert us know if you require any additional support. 
 
Thanks, 
Dharanitharan. P 


PE Peter August 7, 2021 09:08 AM UTC

in my 

SfCartesianChart

my series is

series: myChartSeries,


myChartSeries is derived from future builder of 

<List<ChartSeries>>


And this is created from below:

Future<List<ChartSeries>> createData({required int chartSeriesTypeIndex}) async {
late List<VTChartData> chartData = [];
late List<VTChartData> chartData2 = [];
late List<VTChartData> chartData3 = [];
late List<VTChartData> chartData4 = [];
late SelectionBehavior _selectionBehavior = SelectionBehavior(
enable: true,
toggleSelection: true,
);
DateTime now = DateTime.now();
double _chartAnimationDuration = 1000;
for (int counter = 1; counter <= 300; counter++) {
//DateTime now = DateTime.now();
chartData.add(VTChartData(
now.add(Duration(seconds: counter) * 5),
getRandomDFPressure(min: -30.0, max: 30.0),
//Colors.primaries[Random().nextInt(Colors.primaries.length)]
));

chartData2.add(VTChartData(
now.add(Duration(seconds: counter * 5)),
getRandomDFPressure(min: -30.0, max: 30.0),
//Colors.primaries[Random().nextInt(Colors.primaries.length)]
));
chartData3.add(VTChartData(
now.add(Duration(seconds: counter) * 5),
getRandomDFPressure(min: -30.0, max: 30.0),
//Colors.primaries[Random().nextInt(Colors.primaries.length)]
));
chartData4.add(VTChartData(
now.add(Duration(seconds: counter * 5)),
getRandomDFPressure(min: -30.0, max: 30.0),
//Colors.primaries[Random().nextInt(Colors.primaries.length)]
));
}
List<List<VTChartData>> myChartDataList = [];
myChartDataList.add(chartData);
myChartDataList.add(chartData2);
myChartDataList.add(chartData3);
myChartDataList.add(chartData4);
myChartSeries = [];

for (int counter = 0; counter < myChartDataList.length; counter++) {
var currentChartSeries;
if (counter == 0) {
// Only have Series Controller for first series
currentChartSeries = FastLineSeries<VTChartData, DateTime>(
dataSource: myChartDataList[counter],
xValueMapper: (VTChartData currentChatData, _) => currentChatData.dateTime,
yValueMapper: (VTChartData currentChatData, _) => currentChatData.dfpressure,
color: seriesColors[counter],
legendItemText: seriesLegendItemText[counter],
width: 0.8,
animationDuration: _chartAnimationDuration,
xAxisName: "xAxis",
onRendererCreated: (ChartSeriesController controller) {
_mySeriesController = controller;
_mySeriesControllerList.add(controller);
},
);
} else {
currentChartSeries = FastLineSeries<VTChartData, DateTime>(
dataSource: myChartDataList[counter],
xValueMapper: (VTChartData currentChatData, _) => currentChatData.dateTime,
yValueMapper: (VTChartData currentChatData, _) => currentChatData.dfpressure,
color: seriesColors[counter],
legendItemText: seriesLegendItemText[counter],
width: 0.8,
animationDuration: _chartAnimationDuration,
xAxisName: "xAxis",
);
}
myChartSeries.add(currentChartSeries);
}
return Future.value(myChartSeries);
}


Do you see any 


DP Dharanitharan Palanisamy Syncfusion Team August 9, 2021 12:22 PM UTC

Hi Peter, 
 
We have looked at your request and included a sample to show you how to bind different axes to different controllers. We discovered that you are using the xAxisName property in the series, which you should only use if you need to bind to different axes, as shown in the attached sample. Otherwise, you should avoid using the axis name property in the series. Please contact us if you need any further assistance on this. 
 
 
 
Thanks, 
Dharanitharan. P 


PE Peter August 10, 2021 06:32 AM UTC

Hi

I am using xAxisName based on the sample file sent because I want 2 X-axis in my chart.

Can I have 2 X-Axises without using xAxisName?


PE Peter August 10, 2021 06:45 AM UTC

The issue here I am facing is that the X and Y values are wrong..

Perhaps my series were created or configured wrongly?


DP Dharanitharan Palanisamy Syncfusion Team August 11, 2021 01:02 PM UTC

Hi Peter, 
 
We would like to point out that if you are using two or more axes, you will need to attach the unique controller to each series, just as we did in the previous example. In the code snippet, you are creating the controller for first series alone, so create separate controller for other series will resolves your issue. If the problem still exists, recreate the issue in that sample and contact us with the information. This will assist us in analyzing your situation and providing the appropriate solution sooner. 
 
Thanks, 
Dharanitharan. P 


PE Peter August 24, 2021 09:20 AM UTC

I have created multiple controllers for each series.

I am now facing another issue; when Zoomed, or Panned, the X/Y values will be wrong.
What must I do when I zoomed and and clicked on the chart to get values?


DP Dharanitharan Palanisamy Syncfusion Team August 25, 2021 02:48 PM UTC

Hi Peter, 
 
We have reviewed your query and would want to inform you that we have provided a sample with a screen recording for the multiple axis case with zooming in our earlier response. We believe your problem is related to the use of FastLineSeries, as we eliminated some data points internally to render it faster than the other series. So, in your instance, we recommend using the LineSeries. If you still have problems after using line series, please duplicate the problem in the previously provided sample. This will assist us in analyzing your situation and providing you with a solution more quickly. 
 
Thanks, 
Dharanitharan. P 


Loader.
Up arrow icon