Chart Selection

[Vladilen]

Hi.

How can I find out the list of pointIndex highlighted in selection 'DragXY'?

[Durga Gopalakrishnan]

Hi Vladilen, 

Greetings from Syncfusion. 

We request you to use dragComplete event to get the selected points in the chart. We have printed selectedDataValues in console for your reference. Please check with below snippet and sample. 

dragComplete: (args: IDragCompleteEventArgs) =>{ 

           console.log(args.selectedDataValues); 

} 

Sample : https://stackblitz.com/edit/mjwjfx 

Kindly revert us if you have any concerns 

Regards, 

Durga G 

[Vladilen]

Thanks for the quick response. But I need the index of the point in the series, not its value.

[Durga Gopalakrishnan]

Hi Vladien, 

We suggest you to use seriesRender even to store the pointIndex and seriesIndex of data points internally and access its values in dragComplete event based on selected points. We have modified sample based on your requirement.  

dragComplete: (args: IDragCompleteEventArgs) =>{ 

           for(var s = 0; s< args.selectedDataValues.length; s++){ 

                 for(var d = 0; d < args.selectedDataValues[s].length; d++){ 

                    var result = seriesCollection[s].filter(obj => { 

                        return obj.x === args.selectedDataValues[s][d].x && obj.y === args.selectedDataValues[s][d].y 

                      }) 

                      data1.push(result); 

                 } 

           } 

           console.log(data1); 

        }, 

        seriesRender: (args: ISeriesRenderEventArgs) =>{            

            for(var i = 0; i< args.data.length; i++){ 

                point = {x : args.data[i].x, y: args.data[i].y, pointIndex : i, seriesIndex : args.series.index} 

                data.push(point); 

            } 

            seriesCollection.push(data); 

        }, 

Sample : https://stackblitz.com/edit/mjwjfx-gzq4az 

Please revert us if you have any concerns. 

Regards, 

Durga G

[Vladilen]

Hi, Durga.

Thanks for the answer. But this solution does not work for: "locale: 'ru-RU', primaryXAxis: {valueType: 'DateTime', labelFormat: 'MMM-yy'}". In this case, an array with empty values ​​is created: "(3) [Array (0), Array (0), Array (0)]".

Best regards, Vladilen

Attachment: 20210717_142833_a3606e36.rar

[Durga Gopalakrishnan]

Hi Vladilen, 

We are analyzing your reported scenario. We will check this and update the status within two business days(21^st July 2021). We appreciate your patience until then. 

Regards, 

Durga G

[Durga Gopalakrishnan]

Hi Vladilen, 

Thanks for being patience. We request you to check the y values alone to get the selected values while using culture. We have modified sample and attached for your reference. 

dragComplete: (args: IDragCompleteEventArgs) =>{ 

            console.log(args.selectedDataValues); 

           for(var s = 0; s< args.selectedDataValues.length; s++){ 

                 for(var d = 0; d < args.selectedDataValues[s].length; d++){ 

                    var result = seriesCollection[s].filter(obj => { 

                        return obj.y === args.selectedDataValues[s][d].y 

                      }) 

                      data1.push(result); 

                 } 

           } 

           console.log(data1); 

        } 

Sample : https://stackblitz.com/edit/jt2na3 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[Vladilen]

Hi, Durga.

Sorry for the delay - I was away.

Your modified example does not work when there are multiple points with the same y value.

Best regards, Vladilen.

[Durga Gopalakrishnan]

Hi Vladilen, 

We have checked both x and y values to filter the selected data from collection to resolve the reported scenario. We have modified sample and attached for your reference. Please check with below snippet and sample.  

dragComplete: (args: IDragCompleteEventArgs) =>{ 

           for(var s = 0; s< args.selectedDataValues.length; s++){ 

                 for(var d = 0; d < args.selectedDataValues[s].length; d++){ 

                    var result = seriesCollection[s].filter(obj => { 

                        return (Date.parse(obj.x) === Date.parse(args.selectedDataValues[s][d].x as any) && obj.y === args.selectedDataValues[s][d].y) 

                      }) 

                      data1.push(result); 

                 } 

           } 

} 

Sample : https://stackblitz.com/edit/jt2na3-udxkas 

Kindly revert us if you have any concerns. 

Regards, 

Durga G