<https://lh3.googleusercontent.com/-dHXlHtUUZ8o/UTAbXsEUU8I/AAAAAAAABR8/tnxbyyGdYzU/s1600/sample.jpg> I am going to be publishing upwards of 300 gauges and and drill down charts that look like the above. Asgallant was gracious enough to help me work out the code for this. I am realizing that with as many as 16 gauges per page it's hard to zero in on the ones that are in red and yellow where we need to concentrate our efforts. I want to figure out a way to stylize (color) the labels (not the date) so that you can look at these gauge clusters and quickly distinguish.
I have stripped out my page code and setup a example sheet to show you how I'm doing this. I was wondering if anyone has any ideas on how I could conditionally manage the label colors? I know it's probably not polite to paste a bunch of code here, but I don't know if there is some idea I'm missing in the HTML/CSS to do this or if there is some way to do it with additional JavaScript or even possibly the value I'm grabbing from the sheet? So here it is. <!DOCTYPE html> <head runat="server"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Gauge Cluster</title> <link rel="stylesheet" href="gauges_bulk.css" /> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['gauge']}); google.setOnLoadCallback(queryValue); function queryValue () { var query = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=A1&key=0AhCv9Xu_eRnSdEJOdzFNTHM0RkZfbGd2Nm01M2ZoR1E&gid=0'); query.send(function (response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); // fetch the data from range cell (row, column) into the span "bx" document.getElementById('a1').innerHTML = data.getValue(0, 0); }); } google.setOnLoadCallback(queryValue1); function queryValue1 () { var query = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=B1&key=0AhCv9Xu_eRnSdEJOdzFNTHM0RkZfbGd2Nm01M2ZoR1E&gid=0'); query.send(function (response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data1 = response.getDataTable(); // fetch the data from range cell (row, column) into the span "bx" document.getElementById('b1').innerHTML = data1.getValue(0, 0); }); } google.setOnLoadCallback(drawVisualization); //The following metrics are in a sheet named Quality BSC Reporting 2013 (15) function drawVisualization() { //Abuse and Neglect Gauge var wrapper1 = new google.visualization.ChartWrapper({ chartType: 'Gauge', dataSourceUrl: 'https://spreadsheets.google.com/spreadsheet/tq?range=C1&key=0AhCv9Xu_eRnSdEJOdzFNTHM0RkZfbGd2Nm01M2ZoR1E&gid=0', containerId: 'visualization1', options: { min: 90, max: 100, redFrom: 90, redTo: 93, yellowFrom: 93, yellowTo: 97, greenFrom: 97, greenTo: 100, } }); wrapper1.draw(); } </script> </head> <body> <table class="gaugetable" style="width: 960px"> <tbody> <tr valign="top"> <td><span id="a1"></span><br /><span id="b1"></span></td> </tr> <tr valign="top"> <td><div id="visualization1" style="width: 125px; height: 122px;"></div></td> </tr> </tbody> </table> <hr align="center" width="70%" /> </div> </body> </html> Thanks, Dave -- 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?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
