Need an Info About Google Api Pie Charts

[uma pathy]

Hi ,

Can anyone guide me in

google.visualization.events.addListener(chart, 'select',
selectHandler);

helping me to finish my required task , I am using Google API PIE
Charts ,in my requirement click of the chart an event has to occur it
works with listener but not working for repeatedly so can i know there
is any other events to handle this ....

Regards,
Umapathy M

[asgallant]

Can you post your code?

[uma pathy]

<apex:page controller="Portalpiecharteyeview">

<apex:outputPanel id="chart_div">   

                    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

                    <script type="text/javascript">

                     google.load("visualization", "1", {packages: ["piechart" ]});

                     google.setOnLoadCallback(drawPieChart); 

                     var chart;

                     var data;

                     function drawPieChart() {

                        var data = new google.visualization.DataTable( eval( '({!AccountInfo})' ) );

                        chart = new google.visualization.PieChart( 

                        document.getElementById('{!$Component.chart_div}')

                      );

                    

                      chart.draw(data, {width: 500, height: 250, 

                            legend: 'Bottom',  

                            smoothLine: true, 

                            title: 'This is the Account Chart', 

                            is3D: true ,

                            backgroundColor: {stroke:'none', strokeSize: 0},

                            

                            });

                        

                      //  alert(' Charrtttt-- > '+chart);

                        

                        google.visualization.events.addListener(chart, 'select', selectHandler);

                        PieChart.setSelection(chart.getSelection());

                    

                        function selectHandler(e) {

                            alert('The user selecte ' + chart.getSelection()[0].row);

                            document.getElementById('{!$component.result}').value = data.getValue(chart.getSelection()[0].row,0);

                            

                            var valParameter = document.getElementById('page:form:valParameter');

                            valParameter.value = document.getElementById('{!$component.result}').value;

                            

                            

                            //var buttoncall = document.getElementById('page:form:pgBlock:SectionforChart:BudCall');

                            

                            //alert(' Button to Call --> '+buttoncall);

                            //buttoncall.click();

                            callMyFirstFn();

                        }

                     }

                     

                     function databudget(){

                        datatoget(

                            document.getElementById("result").value

                        );

                     }

                    </script>

                    

            </apex:outputPanel>

</apex:page>

.....class............

public with sharing class Portalpiecharteyeview {

public String AccountInfo{get; set;}

Public Portalpiecharteyeview()

{

AccountVisible();

}

Public void AccountVisible(){

        

     // AccountInfo  = '{cols: [{id: "Col1", label: "Account Name", type: "String"},{id: "Col2", label: "Amount", type: "Integer"}], rows: [{c:[{v: "A"},{v: 10.0}]},{c:[{v: "B"},{v: 20.0}]]}';;

       AccountInfo  =  '{cols: [{id: "Col1", label: "Account Name", type: "String"},{id: "Col2", label: " Amount", type: "Integer"}], rows: [{c:[{v: "A"},{v: 10.0}]},{c:[{v: "B"},{v: 20}]},{c:[{v: "C"},{v: 30.0}]},{c:[{v: "D"},{v: 50.0}]},{c:[{v: "G"},{v: 60}]},{c:[{v: "H."},{v: 40}]},{c:[{v: "I"},{v: 10.0}]},{c:[{v: "K"},{v: 20}]},{c:[{v: "L"},{v: 40}]}]}';

        

        

    }

 

}

the thing is now i am getting the selected data when i create the action event for the selected item i am not getting the selected data .how to handle it can u quide me on that

On Tue, Dec 20, 2011 at 7:41 PM, asgallant <drew_g...@abtassoc.com> wrote:

Can you post your code?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/2gvz6_mSDVEJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Roni Biran]

As far as I see it, your data object is not defined outside of the drawing function, thus not allowing you to access it in the selectHandler function.

Try defining it outside. In this way, you'll be able to access it inside any function, including the selectHandler.

[asgallant]

There are a couple of things going on here:

1) you have "var data" in your code twice - one has scope in your document, while the second has scope only inside the drawing function.  Unless you have functions outside the drawing function that references data and chart, you don't need to declare them outside.  If you do need to reference them outside, get rid of the second "var" keyword.

2) you reference a "PieChart" variable in the drawing function, but this is not defined anywhere.

3) you are using the old PieChart API - there's nothing wrong with doing so if you need one of the features that didn't get ported over to the new version, but if you're not using them, the new one is better, IMHO.

You can also pass the select handler function itself as a parameter when adding the event listener, which avoids any possible scope issues with the chart and data table variables.  See one way you could do this here: http://jsfiddle.net/x9vaD/