I have a ColumnChart which data is sitting in a GoogleSheet
<https://docs.google.com/spreadsheets/d/1xfb9trifQA5KDPc9Nh5hBL4MJ290Mxcc1Uod2VTPzYI/edit#gid=2073092266>
I know that to define the color of each Column can be done as follow if you
are hardcoding your data
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }, *{ role: 'annotation' }* ],
['Copper', 8.94, '#b87333', *'Cu'* ],
['Silver', 10.49, 'silver', *'Ag'* ],
['Gold', 19.30, 'gold', *'Au'* ],
['Platinum', 21.45, 'color: #e5e4e2', *'Pt'* ]
]);
However, since I'm getting all my data from a Google Sheets even I had
define different colors
var optionsPieChart = {
height: 400,
title: 'Progress of the Implementation for Selected System',
colors: ['#094FA4', '#006EC1', '#009EE5', '#52BCEC',
'#89D1F3','#B5E5F9']
};
All my bars appear in the same color:
<https://lh3.googleusercontent.com/-MqpeDqNUkTk/VgRL55DXcZI/AAAAAAAAAvQ/JTE-a7-X2wE/s1600/result.JPG>
*My question is:* *How can I assign a different color to each column when
reading the data from a Google Sheets?*
THANKS!!!!!
<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript" src="Piequerywrapper.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.load('visualization', '1.0', {packages: ['charteditor']});
google.setOnLoadCallback(init);
var dataSourceUrl =
'https://docs.google.com/spreadsheets/d/1xfb9trifQA5KDPc9Nh5hBL4MJ290Mxcc1Uod2VTPzYI';
var magicIncantation =
'/gviz/tq?sheet=ImplementationProgress&headers=1&tq=';
var query;
//Establece opciones para el Pie Char
var optionsPieChart = {
height: 400,
title: 'Progress of the Implementation for Selected System',
colors: ['#094FA4', '#006EC1', '#009EE5', '#52BCEC',
'#89D1F3','#B5E5F9']
};
function init(){
var queryString = encodeURIComponent("SELECT B, C WHERE A = 'CRDB'");
var container = document.getElementById('Piechart_div');
var PieChart = new google.visualization.ColumnChart(container);
query && query.abort();
query = new google.visualization.Query(dataSourceUrl +
magicIncantation + queryString);
var queryWrapper = new QueryWrapper(query, PieChart, optionsPieChart,
container);
queryWrapper.sendAndDraw();
}
function sendAndDraw(querySelector) {
var container = document.getElementById('Piechart_div');
var PieChart = new google.visualization.ColumnChart(container);
query && query.abort();
var queryToPass = "SELECT B, C WHERE A = '" + querySelector + "'"
query = new google.visualization.Query(dataSourceUrl +
magicIncantation + queryToPass);
var queryWrapper = new QueryWrapper(query, PieChart, optionsPieChart,
container);
queryWrapper.sendAndDraw();
}
function loadEditor(querySelector) {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
//Set up the default Chart Selected
'chartType':'PieChart',
'dataSourceUrl':dataSourceUrl + magicIncantation,
'query':querySelector,
'options': {'title':'Title of Pie Chart', 'legend':'none',
'colors': ['#094FA4', '#006EC1', '#009EE5', '#52BCEC', '#89D1F3','#B5E5F9']}
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok',
redrawChart);
chartEditor.openDialog(wrapper, {});
}
// On "OK" save the chart to a <div> on the page.
function redrawChart(){
chartEditor.getChartWrapper().draw(document.getElementById('Piechart_div'));
}
</script>
</head>
<body>
<select id="SystemSelector" onChange="sendAndDraw(this.value)">
<option value="CRDB">CRDB</option>
<option value="EDW">EDW</option>
<option value="FDM">FDM</option>
<option value="Basel III">Basel III</option>
</select>
<div id="Piechart_div" style="width: 100%;"></div>
<br>
<button onclick="loadEditor(SystemSelector.value)">Change type of
Graph</button>
</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.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/1ceb324c-cf8e-4a1f-8544-dd711e57d822%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
