The problem is that you keep the height the same, so two things are happening here: 1) the data points are being evenly dispersed through the vAxis, so when you cut the number of points in half, you double the spacing between points, and 2) with more space between points, the bars draw wider. You can set the width of your bars at a fixed value by setting the bar.groupWidth option to an integer value of the width of the bars in pixels. The spacing you can fix by changing the height of the chart based on the number of rows of data you have.
On Friday, July 5, 2013 2:16:25 AM UTC-4, Spencer James wrote: > > 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.
