I'm using Google Spreadsheets in conjunction with the Google Visualization API. I like the way this bar chart appears (it keeps going way down the page):
<https://lh4.googleusercontent.com/-_6ksgUZSkVM/UdZi61jO9rI/AAAAAAAABMI/BkX3bHo8pzw/s1194/Screen+Shot+2013-07-05+at+1.08.21+PM.png> ... but when I refine one of the values at the top, for example to just a certain age-sex group, the size of the bars increases greatly so it sort of seems like the chart is trying to retain its original dimensions. I would really like the size of the bars to just stay the same as in the first image, though. This is what they look like: <https://lh4.googleusercontent.com/-5RyGKaHIU9M/UdZjelp3JsI/AAAAAAAABMQ/4uIwNFo1Njw/s1215/Screen+Shot+2013-07-05+at+1.10.42+PM.png> It gets really ugly if I stratify it down even further because the bars get so big: <https://lh5.googleusercontent.com/-l44DcyYkNAk/UdZjuQlh3KI/AAAAAAAABMY/T_l7q_KB2N0/s1065/Screen+Shot+2013-07-05+at+1.11.21+PM.png> I would love any ideas on how to make this look nicer so that they retain the original bar chart size. Here is the code I use for the bar charts: <!-- You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> RICE2: Mobile Disease Surveillance in Vietnam </title> <style> a:link {color:#000000;} /* unvisited link */ a:visited {color:#000000;} /* visited link */ a:hover {color:#000000;} /* mouse over link */ a:active {color:#000000;} /* selected link */ </style> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['controls', 'corechart']}); </script> <script type="text/javascript"> function drawVisualization() { var query = new google.visualization.Query( '//docs.google.com/spreadsheet/tq?key=XXXXXXXXX&transpose=0&headers=1&range=A1%3AJ2571&gid=0&pub=1'); query.setQuery('select B,H,G,D,sum(I),sum(J) group by D,B,H,G'); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); // Define a slider control for the Age column. var slider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'control1', 'options': { 'filterColumnIndex': 1, 'ui': {'labelStacking': 'vertical'} } }); // Define a category picker control for the Gender column var categoryPicker = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control2', 'options': { 'filterColumnIndex': 2, 'ui': { 'labelStacking': 'vertical', 'allowTyping': true, 'allowMultiple': true } } }); // Define a category picker control for the commune column var categoryPickerCommune = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control3', 'options': { 'filterColumnIndex': 0, 'ui': { 'labelStacking': 'vertical', 'allowTyping': true, 'allowMultiple': true } } }); // Define a category picker control for the commune column var categoryPickerDistrict = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control4', 'options': { 'filterColumnIndex': 3, 'ui': { 'labelStacking': 'vertical', 'allowTyping': true, 'allowMultiple': true } } }); // Define a column chart var columnChart = new google.visualization.ChartWrapper({ chartType: 'BarChart', options: { 'title': 'Incident Cases of Diarrhea and Influenza by Commune, Age (10 year groups), and Sex (0=F,1=M)', 'width':'1600', 'height':'12000', 'chartArea': {'left': 115, 'top': 15, 'right': 0, 'bottom': 0}, 'hAxis': {title: "Cases"}, 'vAxis': {title: "Commune"}, //'hAxis.viewWindowMode': 'pretty', 'isStacked': true, 'fontSize': 10, //'hAxis.showTextEvery': 4, //hAxis: {showTextEvery: 20}, }, containerId: 'chart1', view: { 'columns': [{ type: 'string', label: 'Commune, Age, Sex', // set the label to whatever you want calc: function (dt, row) { return dt.getFormattedValue(row, 0) + ', ' + dt.getFormattedValue(row, 1) + ', ' + dt.getFormattedValue(row, 2); } }, 4, 5] } }); // 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([slider, categoryPicker, categoryPickerCommune, categoryPickerDistrict], [columnChart]). // Draw the entire dashboard. draw(data); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <table cellpadding="0" cellspacing="0"> <tr> <td style='width: 50%'> <div style="font-size: small; font-family: Menlo, Lucida Sans Unicode"> RICE2: live SMS-based disease surveillance & outbreak detection in northern Vietnam </div> </td> <td style='width: 50%'> <div style="font-size: small; font-family: Menlo, Lucida Sans Unicode"><p align="right"><a href=chart.html>chart</a> | <a href=table.html>table</a> | <a href=time.html>time</a> | <a href=heatmap.html>heatmap</a> | <a href=rawdata.html>raw data</a> | <a href=index.html>home</a></p> </div> </td> </table> <div id="dashboard"> <table> <tr> <td style='width: 75px'> </td><td><div id="control4"></div><td><div id="control3"></div> <td><div id="control2"></div><td><div id="control1"></div> </tr> </table> <table> <tr> <td style='width: 100%'> <div style="float: left;" id="chart1"></div> </td> </tr> </table> </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. For more options, visit https://groups.google.com/groups/opt_out.
