1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Chart Selection

Chart Selection

Hi.

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



8 Replies
DG Durga Gopalakrishnan Syncfusion Team July 15, 2021 02:11 PM UTC

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); 
} 


Kindly revert us if you have any concerns 

Regards, 
Durga G 


VL Vladilen July 15, 2021 04:55 PM UTC

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



DG Durga Gopalakrishnan Syncfusion Team July 16, 2021 03:53 PM UTC

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); 
        }, 


Please revert us if you have any concerns. 

Regards, 
Durga G

VL Vladilen July 17, 2021 11:30 AM UTC

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

DG Durga Gopalakrishnan Syncfusion Team July 19, 2021 12:58 PM UTC

Hi Vladilen, 

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

Regards, 
Durga G

DG Durga Gopalakrishnan Syncfusion Team July 20, 2021 03:20 PM UTC

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); 
        } 


Kindly revert us if you have any concerns. 

Regards, 
Durga G 


VL Vladilen July 26, 2021 12:04 PM UTC

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.


DG Durga Gopalakrishnan Syncfusion Team July 27, 2021 03:36 PM UTC

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); 
                 } 
           } 
} 


Kindly revert us if you have any concerns. 

Regards, 
Durga G 


Loader.
Up arrow icon