It's properly:
bar: {
groupWidth: 20
}
On Friday, July 5, 2013 10:49:06 PM UTC-4, Spencer James wrote:
>
> Thanks for the reply. I can't seem to get groupWidth to have any effect,
> though. I removed the height specification for the chart and then varied
> the groupWidth option by orders of magnitude (and also tried every variant
> on syntax I could think of):
>
> 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,
> * 'bar.groupWidth': '500',*
> '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]
>
> }
>
>
>
> });
>
>
> but it continues to look like this. It seems like the groupWidth isn't
> having any effect.
>
> [image: Inline image 1]
>
>
> On Fri, Jul 5, 2013 at 9:28 PM, asgallant <[email protected]<javascript:>
> > wrote:
>
>> 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<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<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
>>> ">
>>>
>>> <html xmlns="http://www.w3.org/1999/**xhtml<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<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'<http://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 a topic in the
>> Google Groups "Google Visualization API" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/google-visualization-api/tM385bKbDCs/unsubscribe
>> .
>> To unsubscribe from this group and all its topics, send an email to
>> [email protected] <javascript:>.
>> To post to this group, send email to
>> [email protected]<javascript:>
>> .
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>>
>>
>
>
--
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.
