Color bars by name
This chart draws bars in different colors, depending on their name.
by secretgspot
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>
<div id="creativeCommons" style="text-align: center; width: 400px;">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to color bars by name</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>
JavaScript
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addRows([
['Germany', 700],
['USA', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['Russia', 800]
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data,
options: {
// setting the "isStacked" option to true fixes the spacing problem
isStacked: true,
height: 300,
width: 600
},
view: {
// set the columns to use in the chart's view
// calculated columns put data belonging to each country in the proper column
columns: [0, {
type: 'number',
label: 'Germany',
calc: function (dt, row) {
return (dt.getValue(row, 0) == 'Germany') ? dt.getValue(row, 1) : null;
}
}, {
type: 'number',
label: 'USA',
calc: function (dt, row) {
return (dt.getValue(row, 0) == 'USA') ? dt.getValue(row, 1) : null;
}
}, {
type: 'number',
label: 'Brazil',
calc: function (dt, row) {
return (dt.getValue(row, 0) == 'Brazil') ? dt.getValue(row, 1) : null;
}
}, {
type: 'number',
label: 'Canada',
calc: function (dt, row) {
return (dt.getValue(row, 0) == 'Canada') ? dt.getValue(row, 1) : null;
}
}, {
type: 'number',
label: 'France',
calc: function (dt, row)...