trigger piechart slice to pop up by selecting markers on a google map

[Parasound]

Hi there,

I have a google map where I have several markers and when I click on
them so far I managed to trigger the appearence of a piechart next to
the map but I would like to trigger the associating slice of the pie
chart to pop out each time I select the related point on the map.

In other words it would be great for me if the following would take
place.

When I click on a legend of the pie chart, the associating slice pops
out. How can I trigger this to run when instead of clicking the
legend, I click the associating point on the map? Is this possible?


Thanks

[Matt]

First I'm assuming you are using the 'old' PieChart and not the new PieChart that is in 'corechart'.  

If that is the case then you can use the setSelection() method on the PieChart to make a slice of the pie stand out as selected.  Pass the method a value in the form '[{row: index}]' where 'index' is the index of the row that should be shown as selected.

[Parasound]

Thanks a lot I will give it a try, but just to ask if i was to use the
corechart is the procedure somehow different?

ps if someone has already done that, I would appreciate an example

Thanks again

On 3 Φεβ, 23:08, Matt <mlsand...@gmail.com> wrote:
> First I'm assuming you are using the 'old' PieChart and not the new PieChart
> that is in 'corechart'.  
>

> If that is the case then you can use the setSelection()<http://code.google.com/apis/visualization/documentation/reference.htm...>method on the PieChart to make a slice of the pie stand out as selected.

[Ioannis Parapontis]

Hello there,

I tried the proposed solution of Setselection with no luck so far. I would therefore like some help in triggering piechart slices to pop up when markers are selected on gmap. Below is a sample of the code that so far only manages to reach up to the point where the piechart appears when any marker is selected. However as I said before I would like a similar functionality to the legend selection, that is when a legend of the piechart is selected, the associating slice pops up and I would like this to happen when the associating marker on the map is selected also.

Thanks 

///////////////////////////////

// Function drawMap

// Initializes the query and service to pull the data

///////////////////////////////      

       function drawMap() 

  {

     

var query = new google.visualization.Query(queryurl);

//send query with callback function

query.send(handleQueryResponse);

};

  

 

///////////////////////////////

// Function handleQueryResponse

// Checks for query errors, then processes

///////////////////////////////      

function handleQueryResponse(response) 

{

 

// Check for query response errors.

      if (response.isError()) 

{

           alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

      return;

       }

      

//gets the query result as a DataTable object

var data = response.getDataTable();

     

// Make sure our data isn't empty.

        if (null==data) 

         return;

// var newdata = data; get all available data coming from Q

var newdata =new google.visualization.DataTable();

      newdata.addColumn('number', 'CRIME_CODE');

      newdata.addColumn('string', 'DATE');

      newdata.addColumn('string', 'NAME');

      newdata.addColumn('number', 'TOTAL_CRIMES');

      newdata.addColumn('string', 'CRIME_TYPE');

      newdata.addColumn('string', 'CRIME_STATUS');

      newdata.addColumn('string', 'Address');

      newdata.addColumn('number', 'Latitude');

      newdata.addColumn('number', 'Longitude');

//Declare global helping variables

//Helping var for pie chart

var viewpie = new google.visualization.DataView(newdata);          

//Helping var for google map 

var viewmap = new google.visualization.DataView(newdata);

for (var i = 0; i < data.getNumberOfRows(); i++ )

{

var row = [];

row [0] = data.getValue(i,0);

row [1] = data.getValue(i,1);

        row [2] = data.getValue(i,2);

        row [3] = data.getValue(i,3);

        row [4] = data.getValue(i,4);

        row [5] = data.getValue(i,5);

        row [6] = data.getValue(i,6);

        row [7] = data.getValue(i,7);

        row [8] = data.getValue(i,8);

newdata.addRow(row);

}

//Map options

      var options = {};

options['height'] = 680;

options['title'] = 'Γεωγραφικη Αναπαρασταση εμπλεκομενων ΓΑΔ';

options['enableScrollWheel'] = true;

options['showTip'] = true;

options['useMapTypeControl'] = true;

options['legend'] = 'none';

options['showRowNumber'] =true;

options['axisFontSize'] =11;

//Filter the original table to get only the desired columns  using setColumns():

viewmap.setColumns([7, 8, 2]);

//Now draw the map using this viewmap as a customized data table:

 

var map

                map = new google.visualization.Map(document.getElementById('visualization_Map'));

             map.draw(viewmap, options);  

          

//Add listener to map visualization to draw piechart

    

    google.visualization.events.addListener(map,'select', function()

{

// Get map selection

var selection = map.getSelection();                                          

// Get data of selected state on map                                            

var row = selection[0].row;

var crime_date = data.getValue(row,1)

var gad_name = data.getValue(row,2)

var total_crimes = data.getValue(row,3)

var crime_typ = data.getValue(row,4)

var crime_stat = data.getValue(row,5)

// Set chart options                                            

var optionspie = {};

optionspie['is3D'] = true;

optionspie['title'] = 'Ανθρωποκτονιες ανα ΓΑΔ 02/2010';

optionspie['titleFontSize']=13;

optionspie['pieJoinAngle'] = 0;

optionspie['width'] = 850;

optionspie['height'] = 680;

optionspie['legendFontSize']=9;

optionspie['legend'] = 'right';

// Add data to chart                                    

var chartdata = new google.visualization.DataTable();                                          

var ewdata =new google.visualization.DataTable();

ewdata.addColumn('number', 'CRIME_CODE');

ewdata.addColumn('string', 'DATE');

ewdata.addColumn('string', 'NAME');

ewdata.addColumn('number', 'TOTAL_CRIMES');

ewdata.addColumn('string', 'CRIME_TYPE');

ewdata.addColumn('string', 'CRIME_STATUS');

ewdata.addColumn('string', 'Address');

ewdata.addColumn('number', 'Latitude');

ewdata.addColumn('number', 'Longitude');

ewdata.addRows(selection[0].row);

var viewpie = new google.visualization.DataView(ewdata);

  viewpie.setColumns([2, 3]);

// Set chart canvas                                            

var container = document.getElementById('visualization_Pie');

// Draw chart to canvas                                        

var pie = new google.visualization.PieChart(container);

pie.draw(viewpie, optionspie);        

                                        });

</script></head>

<!-- Presentation Content -->

<table >

<tr>

<td style="width: 900px;" ><div id= 'visualization_Map'style="height:680px"><p><img src="http://data-gov.tw.rpi.edu/images/ajax-loader.gif" alt="loading ..."></p></div></td>

    <td style="width: 1000px;background:lightblue"><div id= 'visualization_Pie'><p>click a General Police Dept on the map to reveal associating data on a pie-chart </p></div>

</td>

</tr>

</table>

</center></body>

</html>

2011/2/3 Parasound <parap...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
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.

[Matt]

Attached an HTML file that exhibits the behavior.  This only works for the old Pie Chart.  The new one in corechart does not seem to support the slice slide out feature.  Also, calling setSelection() on the new chart does not cause a visual effect.