chart series data

[Yuri Gusko]

Hi,

I'm using doughnut chart control like shown below. I want to alert  appropriate x-series data on double click. For example, double click on the green section of the chart (see attached picture) should alert "Installed", double click on the blue section  - "Manufactured".

Is it way to do this?

Thanks

<ej-chart id="container" can-resize="true" theme="Office365" >

                <e-legend visible="true" />

                <e-chart-series>

                    <e-series label-position="@ChartLabelPosition.Inside" name="Neck" x-name="Status" y-name="Count" type="@SeriesType.Doughnut">

                        <e-datamanager json="ViewBag.datasource"></e-datamanager>

                        <e-marker><e-data-label visible="true" horizontal-text-alignment="Center" enable-contrast-color="true" vertical-text-alignment="Center"><e-font font-size="15px"></e-font></e-data-label></e-marker>

                    </e-series>

                </e-chart-series>

            </ej-chart>

<script>

$("#chartNeckTag").ejChart({

        chartDoubleClick: function (args) {

            alert(...);

                

         }

</script>

Attachment: doughnut_1a475f05.rar

[Baby Palanidurai]

Hi Yuri, 

  

Thanks for using syncfusion products, 

  

We have analyzed your query. We can achieve your requirement by binding double click event to chart container and on double click, using target id we can find the point index.  

 Please find the code snippet below to find the index of the point. By finding the point index, we have displayed its x value of the point in the alert box. 

  

document.getElementById("container").addEventListener("dblclick", myFunction); 

    function myFunction() { 

  // Get the chart instance here 

        var chart = document.getElementById('container').ej2_instances[0]; 

        if (event.target.id.indexOf('Point_') > -1) { 

            var id = event.target.id; 

// Find point and series index here 

            var indexes = (id.replace("line-container", '')).replace('_Series_', '').replace('_Point', '').split("_"); 

            alert(chart.series[0].points[parseInt(indexes[1])].x); 

        } 

    } 

  

Screenshot: 

 

Sample for your reference, can be find from below link, 

 http://www.syncfusion.com/downloads/support/forum/137186/ze/accumulation-785939251  

  

Kindly revert us, if you have any concerns.  

   

Thanks,  

Baby 

[Yuri Gusko]

I hope I'll manage to translate your example to EJ1 which I'm using in the my project.. Thanks a lot!

[Baby Palanidurai]

Hi Yuri,  

 

     If it is EJ1, we are having chartdoubleclick event in chart itself. As for your requirement, we have prepared sample in EJ1. 

Please find the below code snippet to achieve your requirement in EJ1. 

  

       <ej-chart id="container" chart-double-click="chartdoubleclick"> 

    </ej-chart> 

    

// 

   function chartdoubleclick(args) { 

         var chart = $('#container').ejChart('instance'); 

         if (args.data.id.indexOf('Point') > -1) { 

             var id = args.data.id; 

            // Find point and series index here  

             var indexes = (id.replace("container_svg", '')).replace('_Series', '').replace('Point','').split("_"); 

             alert(chart.model.series[0].points[parseInt(indexes[1])].x); 

             }  

 

         } 

Screenshot: 

 

Sample for your reference, can be find from below link, 

 http://www.syncfusion.com/downloads/support/forum/137186/ze/sample-2114048767  

  

Kindly revert us, if you have any concerns.  

   

Thanks,  

Baby