Hello Everyone,
I've researched this many times and haven't found a way to lock the total
row in a Google Chart Table, so that it does not get sorted and stays
locked as the last row on my table.
Below is my current code for the chart and table. Thank you in advance for
any advice.
Regards,
Noel
[image: Total Row Locking.jpg]
<!DOCTYPE html>
<html>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type='text/javascript'
src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
<script type='text/javascript'
src='//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript"
src="https://www.google.com/jsapi?fake=.js";></script>
<style id="compiled-css" type="text/css">
.google-visualization-table-td {
text-align: left !important;
}
.header {
background-color: #1977CF;
font-size: 14px;
color: white;
height: 50 px;
position: relative;
}
.right-text {
text-align: left;
}
.grey-background {
background-color: #F2F2F2;
}
.yellow-background {
background-color: #FEF200;
}
.white-background {
background-color: white;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Country', '2019', '2018','Varience'],
[' Unites States ', 1398 , 1417 , -19 ],
[' Japan ', 1854 , 2195 , -341 ],
[' Germany ', 2633 , 2149 , 484 ],
[' United Kingdom ', 4900 , 5633 , -733 ],
[' China ', 1894 , 2198 , -304 ],
[' France ', 1216 , 1045 , 171 ],
[' Spain ', 1053 , 1073 , -20 ],
[' Portugal ', 1147 , 1117 , 30 ],
[' Brazil ', 2224 , 2008 , 216 ],
[' Canada ', 405 , 506 , -101 ],
[' Argetina ', 252 , 294 , -42 ],
[' Hong Kong ', 899 , 689 , 210 ],
[' Russia ', 1258 , 1103 , 155 ],
]);
// Define which column shows up/down arrows
var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 3);
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control3',
options: {
filterColumnLabel: 'Country',
ui: {
label: '',
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: true,
caption: 'Country'
}
}
});
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control4',
'options': {
'filterColumnLabel': 'Services',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart1',
options: {
width: 430,
height: 300,
title: '',
//is3D: true,
pieHole: 0.4,
chartArea: {
left: 15,
top: 15,
right: 0,
bottom: 0
},
legend: {
alignment: 'center',
position: 'right'
},
pieSliceText: 'number'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
view: {
columns: [0, 1]
}
});
// Define a table style
var cssClassNames = {
'headerRow': 'header',
'tableRow': '',
'oddTableRow': 'grey-background',
'selectedTableRow': '',
'hoverTableRow': 'yellow-background',
'headerCell': 'gold-border',
'tableCell': '',
'rowNumberCell': ''};
// Define a table
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart2',
options: {
width: '350px',
showRowNumber: false,
allowHtml: true,
cssClassNames: cssClassNames,
}
});
google.visualization.events.addListener(pie, 'ready', function () {
var dt = pie.getDataTable().toDataTable();
var totals = google.visualization.data.group(dt, [{
type: 'number',
column: 0,
// make all values the same
modifier: function () {return 0;}
}], [{
type: 'number',
column: 1,
aggregation: google.visualization.data.sum
}, {
type: 'number',
column: 2,
aggregation: google.visualization.data.sum
}, {
type: 'number',
column: 3,
aggregation: google.visualization.data.sum
}]);
dt.addRow(['Total', totals.getValue(0, 1), totals.getValue(0, 2),
totals.getValue(0, 3)]);
table.setDataTable(dt);
table.draw();
});
// Create a dashboard
new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([categoryPicker], [table, pie], [stringFilter, table]).
// Draw the entire dashboard.
draw(data, {'allowHtml':true, 'cssClassNames': 'cssClassNames'});
changeOptions = function() {
pie.setOption('is3D', true);
pie.draw();
};
changeOptions2 = function() {
pie.setOption('is3D', false);
pie.draw();
};
}
</script>
<body>
<div id="dashboard">
<table>
<tbody>
<tr style="vertical-align: top;">
<td style="width: 300px; font-size: 1em;">
<div style="border: 0px solid #ccc; margin-left: 0px;
margin-top: 0px; padding-right:20px" id="chart1"></div>
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 110px; display: table-cell;"> <div>
<button style="margin: 0em 1em 1em 1em"
onclick="changeOptions();">
Make 3D
</button>
</div>
<script type="text/javascript">
function changeOptions() {
pie.setOption('is3D', true);
pie.draw();
}
</script> </div>
<div style="display: table-cell;"> <div>
<button onclick="changeOptions2();">
Make Flat
</button>
</div>
<script type="text/javascript">
function changeOptions2() {
pie.setOption('is3D', false);
pie.draw();
}
</script> </div>
</div>
</div>
</td>
<td style="width: 300px;">
<div style="margin: 0em 10em 1em 0em"
id="control3"></div>
<div style="float: left;" id="chart2"></div>
</td>
</tr>
</tbody>
</table>
</div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rEhUp"
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>
</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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/e0ecbc84-3d99-4460-8262-5903fffbbdc5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
