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 <[email protected]>
> 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 <[email protected]> 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.
> > Pass the method a value in the form '[{row: index}]' where 'index' is
> the
> > index of the row that should be shown as selected.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> To post to this group, send email to
> [email protected].
> To unsubscribe from this group, send email to
> [email protected]<google-visualization-api%[email protected]>
> .
> For more options, visit this group at
> http://groups.google.com/group/google-visualization-api?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
![http://data-gov.tw.rpi.edu/images/ajax-loader.gif"](http://data-gov.tw.rpi.edu/images/ajax-loader.gif"){kind=link}