Related
I would like to show a tooltip in HTML format on a structure with the data of columns 2,3,4 which are hidden.
I can not get the addeventlistener to work when I'm doing an onmouseover on a cell.
I would like the tooltip to be triggered when moving the mouse over the column 'number' (col 1).
<html>
<head>
<style>
div.google-visualization-tooltip {
width: auto;
height:auto;
background-color: red;
color: #000000;
text-align: center;
vertical-align: middle;
}
</style>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable,);
// start chart
function drawTable() {
var data = new google.visualization.DataTable();
// add columns
data.addColumn('string', 'Name');
data.addColumn('number', 'number');
data.addColumn('number', 'ok');
data.addColumn('number', 'warnning');
data.addColumn('number', 'nok');
// add data
data.addRows([
['Mike',18,10,3,5],
['Jim', 8,5,2,1],
['Alice', 12,6,3,3],
['Bob', 7,2,4,1],
['Sourav',9,1,0,8],
['Sunil', 16,15,0,1],
['Vinod', 19,14,4,1]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
table.draw(view, {allowHtml: true});
google.visualization.events.addListener(table, 'onmouseover', function(e){
setTooltipContent(data,e.row);
});
}
// set tooltip
function setTooltipContent(data,row) {
if (row != null) {
var content = '<div class="custom-tooltip" ><table border="1"><tr><td>OK</td><td>warnnig</td><td>NOK</td></tr><tr><td>' + data.getValue(row, 2) + '</td><td>' + data.getValue(row, 3) + '</td><td>' + data.getValue(row, 4) + '</td></tr></table></div>'; //generate tooltip content
var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
tooltip.innerHTML = content;
}
}
</script>
</head>
<body>
<div id='table_div'></div>
</body>
</html>
the table chart only publishes the following events...
'select', 'page', 'sort', 'ready'
also, no container for google-visualization-tooltip exists for a table chart
to get the desired result, we can wait for the chart's 'ready' event,
then listen for the 'mouseover event on the table's container <div>.
as for google-visualization-tooltip, we can just add our own...
see following working snippet...
google.charts.load('current', {packages:['table']});
google.charts.setOnLoadCallback(drawTable);
// start chart
function drawTable() {
var data = new google.visualization.DataTable();
// add columns
data.addColumn('string', 'Name');
data.addColumn('number', 'number');
data.addColumn('number', 'ok');
data.addColumn('number', 'warnning');
data.addColumn('number', 'nok');
// add data
data.addRows([
['Mike',18,10,3,5],
['Jim', 8,5,2,1],
['Alice', 12,6,3,3],
['Bob', 7,2,4,1],
['Sourav',9,1,0,8],
['Sunil', 16,15,0,1],
['Vinod', 19,14,4,1]
]);
var container = document.getElementById('table_div');
var table = new google.visualization.Table(container);
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
google.visualization.events.addListener(table, 'ready', function() {
container.addEventListener('mouseover', function (e) {
setTooltipContent(data, e);
});
container.addEventListener('mouseout', function (e) {
setTooltipContent(data, e);
});
});
table.draw(view, {allowHtml: true});
}
// set tooltip
function setTooltipContent(data, e) {
var col = null;
var row = null;
var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
if (e.type === 'mouseover') {
if (e.target.tagName === 'TD') {
col = (e.target.cellIndex);
row = (e.target.parentNode.rowIndex - 1);
}
if ((row !== null) && (col === 1)) {
var content = '<div class="custom-tooltip" ><table border="1"><tr><td>OK</td><td>warnnig</td><td>NOK</td></tr><tr><td>' + data.getValue(row, 2) + '</td><td>' + data.getValue(row, 3) + '</td><td>' + data.getValue(row, 4) + '</td></tr></table></div>'; //generate tooltip content
tooltip.innerHTML = content;
tooltip.style.display = 'block';
tooltip.style.left = (e.pageX + 16) + "px";
tooltip.style.top = (e.pageY + 16) + "px";
} else {
tooltip.style.display = 'none';
}
} else {
tooltip.style.display = 'none';
}
}
div.google-visualization-tooltip {
display: none;
position: absolute;
width: auto;
height:auto;
background-color: red;
color: #000000;
text-align: center;
vertical-align: middle;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
<div class="google-visualization-tooltip"></div>
notes
1) the script library jsapi should no longer be used.
<script src="https://www.google.com/jsapi"></script>
see the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statements, see snippet above.
2) when adding event listeners to any google chart, such as 'ready', they should be assigned before drawing the chart...
This question already has answers here:
Handling colon in element ID with jQuery
(9 answers)
Closed 5 years ago.
I'm trying to hide some element when click on this element(option value for categoryfilter on Google Chart)
<div class="goog-menuitem goog-option" role="menuitemradio" aria-checked="false" style="user-select: none;" id=":4">Middle East</div>
and
<div class="goog-menuitem goog-option" role="menuitemradio" aria-checked="false" style="user-select: none;" id=":0" aria-hidden="false"><div class="goog-menuitem-content" style="user-select: none;"><div class="goog-menuitem-checkbox" style="user-select: none;"></div>Africa</div></div>
So I wrote this code
google.visualization.events.addListener(namePicker, 'statechange', hidediv);
function hidediv() {
$("#:0.goog-menuitem.goog-option").click(function() {
document.getElementById('2000').hide();
document.getElementById('2010').hide();
document.getElementById('2017').hide();
});
$("#:4.goog-menuitem.goog-option").click(function() {
document.getElementById('2000').hide();
document.getElementById('2010').hide();
document.getElementById('2017').hide();
});
}
but I got an error
Syntax error, unrecognized expression: #:0.goog-menuitem.goog-option
Runnable Snippet
<html>
<head>
<link rel="stylesheet" href="styles_timeline.css">
</head>
<body width="880">
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
google.charts.load('current', {
'packages': ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var query1 = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1sOyYwL51uWTd7Pv4Sp_bKdxWmH-g6QA2SDHhw93_2s8/edit?usp=sharing");
//all
query1.setQuery('select * where J="Take back policy model" order by F,Y,M,N,L');
query1.send(drawDashboard);
}
function drawDashboard(response1) {
var data1 = response1.getDataTable();
//set year that<2000 to 2000
for (i = 0; i < data1.getNumberOfRows(); i++) {
var startdate = new Date(data1.getValue(i, 12));
var y = startdate.getFullYear();
if (y < 2000) {
r = data1.getValue(i, 12);
//console.log(i);
startdate.setFullYear(2000);
data1.setValue(i, 12, startdate);
}
}
//set start date to previous row end date - groupByRowLabel
for (var row = 1; row < data1.getNumberOfRows(); row++) {
if (data1.getValue(row - 1, 5) == data1.getValue(row, 5) && data1.getValue(row - 1, 6) == data1.getValue(row, 6)) { //if the previous one has the same label
if (data1.getValue(row - 1, 13) > data1.getValue(row, 12)) { // if the previous end date is greater than the start date of current row
data1.setValue(row - 1, 13, data1.getValue(row, 12)) // set the previous end date to the start date of current row
}
}
}
var view1 = new google.visualization.DataView(data1);
view1.setColumns([
//index column 0
{
type: 'string',
id: 'Country',
calc: function(dt, row) {
//return countryname statename - policies // USA New York - WEEE
return dt.getFormattedValue(row, 5) + " " + dt.getFormattedValue(row, 22) + " - " + dt.getFormattedValue(row, 6)
}
},
//index column 1
{
type: 'string',
id: 'region',
calc: function(dt, row) {
return dt.getFormattedValue(row, 8)
}
}
//index column 2
, {
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function(dt, row) {
var country = dt.getFormattedValue(row, 5)
var policy = dt.getFormattedValue(row, 6)
var dataname = dt.getFormattedValue(row, 8)
var dropname = dt.getFormattedValue(row, 11)
var formatter = new google.visualization.DateFormat({
pattern: "MMMM yyyy"
});
var startdate = formatter.formatValue(dt.getValue(row, 12));
//var startdate = dt.getFormattedValue(row, 12)
var comment = dt.getFormattedValue(row, 15)
//colorValues.push(dt.getFormattedValue(row, 6))
return '<br><div id="country">' + country + " - " + policy + '<br><br></div> ' +
'<div id="header1">Dominant (E)PR policy model:<br></div>' +
'<div id="dropname">' + dropname + '<br><br></div>' +
'<div id ="header2">Since : </div><div id="date">' + startdate + " " + 'to current</div><br><br><br>' +
'<div id ="comment">' + comment + '<\/div>'
}
},
//style role
{
type: 'string',
id: 'color',
role: 'style',
calc: function(dt, row) {
return dt.getFormattedValue(row, 25)
}
},
//index column 3,4 start-enddate
12, 13,
]);
var chart1 = new google.visualization.ChartWrapper({
chartType: 'Timeline',
//dataTable: 'data1',
containerId: 'colormap1',
options: {
width: 870,
height: 800,
//colors: colorValues,
timeline: {
groupByRowLabel: true,
rowLabelStyle: {
fontSize: 14,
width: 800,
},
showBarLabels: false
},
hAxis: {
minValue: new Date(2010, 0, 0),
maxValue: new Date(2017, 0, 0)
},
tooltip: {
isHtml: true
},
}
});
var namePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnIndex': '1',
'ui': {
'labelStacking': 'vertical',
'caption': 'Choose a Region',
'cssClass': 'filter',
'selectedValuesLayout': 'aside',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(namePicker, chart1);
// Draw the dashboard.
dashboard.draw(view1);
google.visualization.events.addListener(chart1, 'ready', function() {
var svgParent = colormap1.getElementsByTagName('svg')[0];
svgParent.parentNode.style.top = '40px';
Array.prototype.forEach.call(colormap1.getElementsByTagName('text'), function(text) {
if ((text.getAttribute('text-anchor') === 'end') &&
(parseFloat(text.getAttribute('x')) < 200)) {
text.setAttribute("x", "5");
text.setAttribute("text-anchor", "start");
}
if ((text.getAttribute('text-anchor') === 'middle') && (parseFloat(text.getAttribute('x')) < 850)) {
var groupLabel = text.cloneNode(true);
groupLabel.setAttribute('x', '850');
groupLabel.innerHTML = '2017';
groupLabel.setAttribute('y', '971.05');
groupLabel.setAttribute('font-family', 'Arial');
groupLabel.setAttribute('font-size', '13');
svgParent.appendChild(groupLabel);
}
})
})
google.visualization.events.addListener(chart1, 'select', tableSelectHandler);
function tableSelectHandler() {
var selection = chart1.getChart().getSelection()[0];
var chartDataView = chart1.getDataTable();
var rowindex = chartDataView.getTableRowIndex(selection.row);
var cnid = data1.getValue(rowindex, 0);
var polid = data1.getValue(rowindex, 1);
var strid = data1.getValue(rowindex, 2);
//var sid = (strid) - 1;
var statecode = data1.getValue(rowindex, 4);
//if (selection.length > 0) {
//http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
//}
}
google.visualization.events.addListener(namePicker, 'statechange', hidediv);
function hidediv() {
$("#:0.goog-menuitem.goog-option").click(function() {
document.getElementById('2000').hide();
document.getElementById('2010').hide();
document.getElementById('2017').hide();
});
$("#:4.goog-menuitem.goog-option").click(function() {
document.getElementById('2000').hide();
document.getElementById('2010').hide();
document.getElementById('2017').hide();
});
}
}
</script>
<div id="dashboard_div">
<div id="2000" style="z-index:1;position: fixed;top: 70px;left: 168px;font-family: Arial;font-size: 13;color:red;">2000</div>
<div id="2010" style="z-index:1;position: fixed;top: 70px;left: 556px;font-family: Arial;font-size: 13;color:red;">2010</div>
<div id="2017" style="z-index:1;position: fixed;top: 70px;left: 850px;font-family: Arial;font-size: 13;color:red;">2017</div>
<div id="filter_div"></div>
<!--chart_div!-->
<div id='colormap1' style="position:fixed;">
</div>
</div>
</body>
</html>
anyone know how to make this works? thank you.
According to How do I select an element by an ID that has characters used in CSS notation? you need to write:
$("#\\:0.goog-menuitem.goog-option")
Using Google Charts Transition Animation, I have created a chart that can be redrawn upon clicking on the button below the chart (the full functioning code can be found below). Once the button is clicked, the chart displays new values and a new title.
I change the title in the function drawChart using the following piece of code:
options['title'] = 'Monthly ' + (current ? 'Test A' : 'Test B') + ' Production by Country';
Now to my problem: I would also like to change the title of the horizontal axis upon clicking on the button. Without a button (in a static version), this can be achieved by adding the following code to the options:
hAxis: {title: 'Axis Title'}
When I add the following piece of code to my function (behind the title adjustment shown above), however, nothing changes:
options['hAxis.title'] = 'Title ' + (current ? 'Test A' : 'Test B');
Does anyone know how I need to change the code above to get the axis title to change?
Here is my complete code:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80]
// Treat first row as data as well.
], true);
var data2 = google.visualization.arrayToDataTable([
['Mon', 23, 23, 39, 42],
['Tue', 34, 34, 59, 64],
['Wed', 55, 52, 79, 80]
// Treat first row as data as well.
], true);
// Create and populate the data tables.
var data = [];
data[0] = data1;
data[1] = data2;
var options = {
legend:'none'
};
var current = 0;
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Test A' : 'Test B');
});
options['title'] = 'Monthly ' + (current ? 'Test A' : 'Test B') + ' Production by Country';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<input type="button" value="Next day" id="b1" />
</body>
</html>
Thanks a lot!!
The easiest way I found to do it is first define hAxis in options:
var options = {
hAxis: {title: "Axis Title"},
legend:'none'
};
And then you add this line of code below your addListener function:
options.hAxis.title = (current ? 'Test A' : 'Test B')
I have a page that displays data in a form of a Pie Chart. I use Google Charts to do this. Here's the code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Goal Name', 'No. of times Requested'],
['Frank.net Life Cover', 226],
['Frank.net Hospital Cash Back', 147],
['Frank.net Salary Protection', 228],
['King Price Car Insurance', 328],
['Momentum Medical Aid', 493],
['Oplan Health Cover', 185],
['Youi Quote', 33],
]);
var options = {
title: 'Most Requested Sponsors'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
</script>
<div id="piechart2" style="width: 700px; height: 400px; position: relative;"></div>
And here's a working JS FIDDLE:
http://jsfiddle.net/yRdW3/
Now, I need help on displaying the percentage and total next to each sponsor name on the legend. I have no idea how to achieve this. I want it to look similar to this:
Check this fiddle example. It is your code with attached legend (idea from first comment, total calculation and some minor errors corrected).
Basic idea is to set legend option of chart to none and than you have to build your own legend.
If you load that code into browser the legend will be positioned to the right but you have to set proper CSS rules to get everything right (I'm not so familiar with CSS). But you have the basic idea how to do that.
And for different sets of legend colors you can check color brewer
There is a way to do this utilizing the built-in legend. Essentially you can utilize the fact that the chart is rendered in SVG, and you can select and modify elements in the SVG the same way you select regular HTML elements. The basic idea is you:
Select the labels in the chart's legend, and iterate through the collection. They are text tags, and you can figure out the selector using Firebug or Chrome Developer Tools.
Use the index of the element to select the total of the associated row in the chart's DataTable (or insert your logic here for calculating whatever value you want to display).
Modify the text of the label element to append your calculated value.
See my Codepen for a working example: http://codepen.io/breich/pen/mVPJwo
/**
* Selector for chart element.
*/
var chartSelector = '#chart';
/**
* Selector used to get label elements inside the rendered chart.
* Your mileage may vary if you configure your chart different than
* me. Use Firebug or Developer Tools to step through the SVG and
* determine your label selector.
*/
var labelSelector = '> g:eq(1) g text';
/**
* This is our data. For simplicity sake, doing inline and not AJAX.
*/
var data = [
[ 'Apples', 10],
[ 'Oranges', 20 ],
[ 'Peaches', 30 ],
[ 'Pears', 40 ],
[ 'Bananas', 50 ]
];
// Load Google Charts
google.load('visualization', '1.1', { packages: ['corechart', 'line'] });
// Callback when API is ready
google.setOnLoadCallback(function() {
/*
* Setup the data table with your data.
*/
var table = new google.visualization.DataTable({
cols : [
{ id : 'name', label : 'Name', type : 'string' },
{ id : 'value', label : 'Value', type : 'number' }
]
});
// Add data to the table
table.addRows( data );
// Google Charts needs a raw element. I'm using jQuery to get the chart
// Container, then indexing into it to get the raw element.
var chartContainer = $(chartSelector)[0];
// Create the Google Pie Chart
var chart = new google.visualization.PieChart(chartContainer);
// Draw the chart.
chart.draw(table, { title : 'Classifications' });
/*
* This is the meat and potatoes of the operation. We really require
* two things: #1) A selector that will get us a list of labels in the
* legend, and #2) The DataTable powering the chart. We'll cycle
* through the labels, and use their index to lookup their value.
* If you have some higher-level math you need to do to display a
* different value, you can just replace my logic to get the count
* with your's.
*/
// The <svg/> element rendered by Google Charts
var svg = $('svg', chartContainer );
/*
* Step through all the labels in the legend.
*/
$(labelSelector, svg).each(function (i, v) {
/*
* I'm retrieving the value of the second column in my data table,
* which contains the number that I want to display. If your logic
* is more complicated, change this line to calculate a new total.
*/
var total = table.getValue(i, 1);
// The new label text.
var newLabel = $(this).text() + '(' + total + ')';
// Update the label text.
$(this).text( newLabel );
});
});
You can do this creating a column for tooltip and use your first column as legend. Check this FIDDLE
var dataArray = [
['Frank.net Life Cover', 226],
['Frank.net Hospital Cash Back', 147],
['Frank.net Salary Protection', 228],
['King Price Car Insurance', 328],
['Momentum Medical Aid', 493],
['Oplan Health Cover', 185,],
['Youi Quote', 33],
];
var total = getTotal(dataArray);
// Adding tooltip column
for (var i = 0; i < dataArray.length; i++) {
dataArray[i].push(customTooltip(dataArray[i][0], dataArray[i][1], total));
}
// Changing legend
for (var i = 0; i < dataArray.length; i++) {
dataArray[i][0] = dataArray[i][0] + " " +
dataArray[i][1] + " requests, " + ((dataArray[i][1] / total) * 100).toFixed(1) + "%";
}
// Column names
dataArray.unshift(['Goal Name', 'No. of times Requested', 'Tooltip']);
var data = google.visualization.arrayToDataTable(dataArray);
Using arrayToDataTable, you need to set the role tooltip in "Tooltip" column:
data.setColumnProperty(2, 'role', 'tooltip');
data.setColumnProperty(2, 'html', true);
Note: If you are creating the dataTable dynamically just call addColumn with this signature:
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
And in options add tooltip: { isHtml: true }:
var options = {
title: 'Most Requested Sponsors',
width: 900,
height: 400,
tooltip: { isHtml: true }
};
function drawChart() {
var dataArray = [['Yes', <?php echo $member_yes_vote;?>],
['No', <?php echo $member_no_vote;?>],
['Total', 0],];
var total = getTotal(dataArray);
for (var i = 0; i < dataArray.length; i++)
{ dataArray[i].push(customTooltip(dataArray[i][0], dataArray[i][1], total));
}
for (var i = 0; i < dataArray.length; i++)
{
if(dataArray[i][0] == "Total")
{
dataArray[i][0] = dataArray[i][0] + " " + total + " Votes, " + ((total/total) * 100).toFixed(1) + "%";
}
else
{
dataArray[i][0] = dataArray[i][0] + " " + dataArray[i][1]+ " Votes, " + ((dataArray[i][1] / total) * 100).toFixed(1) + "%";
}
}
dataArray.unshift(['Vote Type', 'Number of Vote', 'Tooltip']);
var data = google.visualization.arrayToDataTable(dataArray);
data.setColumnProperty(2, 'role', 'tooltip');
data.setColumnProperty(2, 'html', true);
var options = {
chartArea:
{
left:40,top:20,width:'90%',height:'90%'
},
is3D: true,
slices: {0: {color: '#1a8ec5'}, 1:{color: '#da4638'}},
pieSliceText: 'value-and-percentage',
sliceVisibilityThreshold:0,
tooltip: { isHtml: true }
};
var chart = new google.visualization.PieChart(document.getElementById('Question_count_graph'));
chart.draw(data, options);
}
function customTooltip(name, value, total)
{
if(name == "Total")
{
return name + '<br/><b>' + total + ' (' + ((total/total) * 100).toFixed(1) + '%)</b>';
}
else
{
return name + '<br/><b>' + value + ' (' + ((value/total) * 100).toFixed(1) + '%)</b>';
}
}
function getTotal(dataArray)
{
var total = 0;
for (var i = 0; i < dataArray.length; i++)
{
if(dataArray[i][0] == "Total")
{}
else
{
total += dataArray[i][1];
}
}
return total;
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
Here is the code which i have used to show the legend value with percentage and total field
Can someone tell me how to achieve the following effect:
When I select a slice in the Pie Graph I want to show some kind of
Visual representation of the Slice selection.
Either by moving the selected slice away from the graph so that it
stands out on its own.
or By drawing a white border on the slice to show that the
respective slice was selected.
Has anyone done anything similar, if so can you please post some code.
I did a lot of search in this group and elsewhere but was not able to
find anything. Its hard to believe that core plot cant support this
animation.
JS fiddle link
Pi Chart Code is:
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 5],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 6],
['Sausage', 3] ]);
var colors = ["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#aaaa11","#22aa99","#994499"];
var legend = document.getElementById('legend');
var lis = [];
var total = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
// increment the total
total += data.getValue(i, 1);
// get the data
var label = data.getValue(i, 0);
var value = data.getValue(i, 1);
// create the legend entry
lis[i] = document.createElement('li');
lis[i].setAttribute('data-row',i);
lis[i].setAttribute('data-value',value);
lis[i].id = 'legend_' + data.getValue(i, 0);
lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';" ></div>' + label + ': ' + value +'</span>';
// append to the legend list
legend.appendChild(lis[i]);
}
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {
title: 'How Much Pizza I Ate Last Night',
width: 300,
height: 300,
colors: colors,
legend: {
position: 'none'
}
});
$('#legend li').click(function(){
chart.setSelection([{row:$(this).data('row'),column:null}]);
})
}
The PieCharts don't have any visual indication of which slice is selected, so you will have to change the chart options and redraw the chart to get the effect you want. Something like this should do it:
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 5],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 6],
['Sausage', 3],
['Peppers', 5],
['Tomatoes', 2],
['Meatballs', 4],
['Extra Cheese', 3]
]);
var colors = ["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#aaaa11","#22aa99","#994499"];
var legend = document.getElementById('legend');
var lis = [];
var total = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
// increment the total
total += data.getValue(i, 1);
// get the data
var label = data.getValue(i, 0);
var value = data.getValue(i, 1);
// create the legend entry
lis[i] = document.createElement('li');
lis[i].setAttribute('data-row',i);
lis[i].setAttribute('data-value',value);
lis[i].id = 'legend_' + data.getValue(i, 0);
lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';" ></div>' + label + ': ' + value +'</span>';
// append to the legend list
legend.appendChild(lis[i]);
}
var options = {
title: 'How Much Pizza I Ate Last Night',
width: 300,
height: 300,
colors: colors,
legend: {
position: 'none'
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
$('#legend li').hover(function () {
options.slices = options.slices || {};
// clear all slice offsets
for (var x in options.slices) {
options.slices[x].offset = 0;
}
// set the offset of the slice associated with the hovered over legend entry
options.slices[$(this).data('row')] = options.slices[$(this).data('row')] || {};
options.slices[$(this).data('row')].offset = 0.1;
chart.draw(data, options);
}, function () {
options.slices = options.slices || {};
// clear all slice offsets
for (var x in options.slices) {
options.slices[x].offset = 0;
}
chart.draw(data, options);
})
//fixing incorrect percent-values
.each(function(i,o){$(o).append(' ('+(Math.round(1000 * $(o).data('value') / total) / 10)+'%)');});
}
see working example in jsfiddle: http://jsfiddle.net/asgallant/2JWQY/31/