I did a few cursory Google searches to see how people had implemented the
ability to click on a slice of a pie chart and have it explode that slice
out, and then click on other slices to explode them out instead. I couldn't
find anything so I made my own. I just wanted to share it with you guys in
case anyone else wants this functionality. Or better yet, if there's a much
better way of doing it that someone can point me to!
-----------------------------------
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Fund');
data.addColumn('number', 'Percent Allocation');
data.addRows([
['Balanced Fund', 3],
['Money Market', 1],
['Target Retirement 2015', 1],
['Vegas Trip', 1],
['Scratch Tickets', 2]
]);
// Set chart options
var options = { 'title':'Retirement Investments',
'titleTextStyle':{
color:'black',
fontSize:'40',
bold: 'true'},
'legend':'labeled',
'pieSliceText':'none',
'is3D':'false',
'tooltip':{
showColorCode:'true',
text:'percentage'
},
'slices':{}
};
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.selectedSlice = -1;
// The event listener to explode out the slices
function selectListener(){
var temp = chart.getSelection();
var selectedItem = temp[0];
if (selectedItem) {
var rowNumber = parseInt(selectedItem.row);
if(chart.selectedSlice != -1){ // If we have a
selection, unexplode it
options.slices[chart.selectedSlice] = {offset:'0'};
}
if(chart.selectedSlice == rowNumber){ // If this is already
selected, unselect it
chart.selectedSlice = -1;
}else{ // else explode it
options.slices[rowNumber] = {offset:'.2'};
chart.selectedSlice = rowNumber;
}
chart.draw(data, options);
// See comments below
$("text:contains(" + "Retirement Investments" +
")").attr({'x':'276', 'y':'67'})
}
}
google.visualization.events.addListener(chart, 'select',
selectListener);
chart.draw(data, options);
/* This is a jquery work-around to center the title of the chart
The x and y position of the title can be set with relative
coordinates to the upper-left
of the graph div. Whenever a change to font size or div size these
numbers will need to be
adjusted to bring the title back into proper position
The other alternative is an HTML solution posting a header centered
above the div
*/
$("text:contains(" + "Retirement Investments" +
")").attr({'x':'276', 'y':'67'})
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:1000; height:500; border:1px
solid;"></div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
