Click and retrieve the binded item

[Dario]

I have a chart binded to CouriersStatsList that is a  List<MyPocoObject>:


-- Code --

     <SfChart @ref="@ChartObj" Title="Courier Stats">

                <ChartEvents OnPointClick="@PointClickHandler"></ChartEvents>

                <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

                <ChartSeriesCollection>

                    <ChartSeries DataSource="@CouriersStatsList" XName="CourierDescription" YName="TotalBoxesDone" Fill="green" Type="ChartSeriesType.StackingColumn">

                    </ChartSeries>

                    <ChartSeries DataSource="@CouriersStatsList" XName="CourierDescription" YName="MeatBoxesToDo_PreviousDays" Fill="darkred" Type="ChartSeriesType.StackingColumn">

                    </ChartSeries>

                    <ChartSeries DataSource="@CouriersStatsList" XName="CourierDescription" YName="MeatBoxesToDo_Today" Fill="red" Type="ChartSeriesType.StackingColumn">

                    </ChartSeries>

                    <ChartSeries DataSource="@CouriersStatsList" XName="CourierDescription" YName="FishBoxesToDo_PreviousDays" Fill="DarkBlue" Type="ChartSeriesType.StackingColumn">

                    </ChartSeries>

                    <ChartSeries DataSource="@CouriersStatsList" XName="CourierDescription" YName="FishBoxesToDo_Today" Fill="DeepSkyBlue" Type="ChartSeriesType.StackingColumn">

                    </ChartSeries>

                </ChartSeriesCollection>

            </SfChart>

-- End Code --

I want to retrieve the "MyPocoObject" or at least a key/tag  on StackingColumn click.

I tried with :

-- Code --

 public void PointClickHandler(IPointEventArgs args)

 {

    MyPocoObject clickedPoco =   args.????  //WHAT TO DO HERE ?

  }
-- End Code --

What is the best approach to retreive the item from datasource ? or at least a tag/key/reference to the single object ?

Thanks

[Srihari Muthukaruppan]

Hi Dario, 

 

We have analysed your query. From that, we can get the seriesIndex and pointIndex in the pointclick event in the args. Based on that we can filter the datasource as shown in the below code snippet. Please find the sample, code snippet and screenshot. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PointClickEvent-1999471734.zip 

 

Code Snippet:  

<SfChart @ref="Chartobj" Title="Mobile Game Market by Country"> 

    <ChartEvents OnPointClick="@PointClickHandler" /> 

         // add your additional code here 

    <ChartSeriesCollection> 

        // add your additional code here 

    </ChartSeriesCollection> 

</SfChart>  

 

// add your additional code here 

public void PointClickHandler(IPointEventArgs args) 

    { 

        var point = args.Point; 

        var series = args.Series; 

        var seriesIndex = Convert.ToInt32(args.SeriesIndex); 

        var pointIndex = Convert.ToInt32(args.PointIndex); 

        var datasource = Chartobj.Series[seriesIndex].DataSource; 

        var xValue = DataSource[pointIndex].x; 

        var yValue = DataSource[pointIndex].y; 

    } 

 

Screenshot: 

 

 

Let us know if you have any concern. 

 

Regards, 

Srihari M 

[Dario]

Thank you.

[Srihari Muthukaruppan]

Hi Dario,  

 

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari 

[Jason Bishop]

Hello Syncfusion,

This example doesn't seem to work anymore?

'SfChart' does not contain a definition for 'Series' and no accessible extension method 'Series' accepting a first argument of type 'SfChart' could be found (are you missing a using directive or an assembly reference?) 

I looked at your API reference and SfChart indeed does not contain a defintion for Series.  How would I handle this now?

[Durga Gopalakrishnan]

Hi Jason, 

We have removed the complex object properties from chart in latest version. As of now, you can access direct properties from chart instance. You can get the clicked column, point and its series from arguments of OnPointClick event. We suggest you to follow the below snippet to access datasource of current series. 

public void PointClickHandler(PointEventArgs args) 

    { 

        var point = args.Point; 

        var series = args.Series; 

        var seriesIndex = Convert.ToInt32(args.SeriesIndex); 

        var pointIndex = Convert.ToInt32(args.PointIndex);         

        var datasource = args.Series.DataSource; 

        var xValue = DataSource[pointIndex].x; 

        var yValue = DataSource[pointIndex].y; 

    } 

Please mention whether you to need to access other series datasource while a point. Kindly revert us if you have any concerns. 

Regards, 

Durga G