Click event of 2D pie chart

[sabbu]

Hi everybody,

I am loading the 2D pie chart rendering using javascript.I am using the json for chart data like this:

 

 var ChartData= {

           "chart": {

             "showlabels": "0",

             "showvalues": "1",

             "showlegend":"1",

             "legendposition":"bottom",

             "caption" : "Outcomes By Category" ,

             "animation" : "1"

 

 

           },

           "data": [

             { "label" : "week1", "value" : "14" },

             { "label" : "week1", "value" : "196" },

             { "label" : "week1", "value" : "2" },

             { "label" : "week1", "value" : "157" }

           ]

         }

 

var fchart= $("#myChart");

fchart.insertFusionCharts({

               swfUrl: "angular/vendor/fusionCharts/Pie2D.swf",

               dataSource: ChartData,

               dataFormat: "json",

               width: "300",

               height:"300" 

             });

 

 

SO is it possible to call the javascript method when user click on pie chart section.Is there is any call back method in chart that get fired when user click one of the section of pie chart.

 

Any help will be really appreciated.

 

Thanks

Sabin

[Haritha]

Hi Sabin,

 

Welcome to FusionCharts Forum   

 

Yes, it is possible to call a JavaScript method when a user clicks on a Pie slice of a Pie chart.  You can use the attribute "link" and specify the JavaScript function that you want to call as its value.

 

FusionCharts XT provides two ways of setting JavaScript functions as links:

 

1. j- prefix : Just place the function name after the j- notation. The function will be evaluated as a standard JavaScript function and anything placed after the function name separated by a - (dash) will be passed as a single String parameter to the function. 

 

For example, 

{ "label" : "week1", "value" : "196","link" : "j-myJS-USA,235" }

 

2. JavaScript: prefix : provide single or multiple JavaScript functions or statements after JavaScript: prefix. 

 

For example,

{ "label" : "week1", "value" : "196","link" : "JavaScript: myJS('USA',235);" }

For more information, you may please refer : http://docs.fusioncharts.com/charts/contents/DrillDown/JavaScript.html

 

Hope this helps.

[sabbu]

Thanks Haritha for your quick respond.

 

I am using the fusion chart along with angualrjs , so let me try your suggestion. I am not sure your suggestion may or may not work for angular.

 

Thanks

Sabin

[Haritha]

Hi Sabin,

 

The "link" attribute works for Angular Gauge as well. You may use it on the "dial" element of the Angular gauge to call a JavaScript function when a user clicks on the dial.

Eg. 
<dials>
    <dial value="92" rearExtension="10" link='JavaScript: myJS('USA',235);'/>
</dials>

 

Hope this helps.

[sabbu]

Hi Haritha,

I am not talking about angular Gauge.I mean angular js. AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications You can look at this http://angularjs.org/.

 

Thanks

Sabin

[Haritha]

Hi Sabin,

 

Apologies for the previous communication.

 

Yes, it is possible to use the "link" attribute to call a JavaScript function while using AngularJS. The JavaScript function can be written in the view page while the link attribute can be specified in the JSON data.

 

Hope this helps.