Can not change bar width in column chart

6,522 views
Skip to first unread message

New programmer

unread,
Jun 6, 2018, 1:10:01 PM6/6/18
to Google Visualization API
I have created a column chart and wanted to increase the bar size as currently its a very thin line. Tried using bar: {groupWidth: "95%"} but there is no change and the chart is not affected by this code. Any help is much appreciated.

New programmer

unread,
Jun 6, 2018, 1:54:38 PM6/6/18
to Google Visualization API
here is the code that I have been using if it could help anyone figure out where I am going wrong:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Commuter Calculator</title>
  
<script type="text/javascript" src="https://www.google.com/jsapi">
</script> 

  <script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});

function initialize() {
        var opts = {sendMethod: 'auto'};
        // Replace the data source URL on next line with your data source URL.
        var query = new google.visualization.Query('url……goes….. here', opts);         
        
        // Optional request to return only column C .
        query.setQuery('select C');

        // Send the query with a callback function.
        query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

    var data = response.getDataTable();

  var options = {
    title: 'Company Performance',
bar: {
    groupWidth: 30
}


  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

      google.setOnLoadCallback(initialize);

</script>
</head>

<body>
  <div id="chart_div" style="width: 800px; height: 500px; align: center"></div>
</body>
</html>

Daniel LaLiberte

unread,
Jun 6, 2018, 2:26:00 PM6/6/18
to Google Visualization API
Since you left out your data, we can't help much, but you probably have more than one row with the same domain value or very close values, which causes the bars to be the minimum width of 1.

If you want each domain value to be treated discretely, not using continuous axis values, then convert your domain data to strings, or add hAxis: { type: 'category' }

You should also switch to the newer versions by changing how you load Google Charts.  See   https://developers.google.com/chart/interactive/docs/basic_load_libs#update-library-loader-code

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/6fc7a6fa-1c8f-455a-b815-52f963b0527d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--

New programmer

unread,
Jun 6, 2018, 3:08:02 PM6/6/18
to Google Visualization API
Thanks for your post! I tried adding hAxis: { type: 'category' } and also changed the way of loading the chart but still I am having the same thin bars.

I have attached the graph that I am getting. Also, my data is very small and is like 5-7 data is plotted in the graph
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.


--
sample2.jpeg

Daniel LaLiberte

unread,
Jun 6, 2018, 3:16:49 PM6/6/18
to Google Visualization API
Your screenshoot indeed shows thin bars, but we can't tell how it was generated from the data and options. It would be best if you can create a jsfiddle that demonstrates the problem.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.


--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/396a0960-dcdf-4aa4-9905-888d076ff5d1%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.


--

New programmer

unread,
Jun 6, 2018, 3:18:43 PM6/6/18
to Google Visualization API
Also one more point is that when I hard code the data, I am getting the width properly and the issue occurs only when I fetch data from spreadsheet in my google drive

New programmer

unread,
Jun 11, 2018, 9:12:02 AM6/11/18
to Google Visualization API
Hello,

--> Here is my JS fiddle file link...


--> Also here is a sample spreadsheet link... 


Please help me in resolving it...

Louis Gale

unread,
Jun 14, 2018, 11:18:45 PM6/14/18
to Google Visualization API
New programmer - i could not get your JSFiddle to work out of the box ...  However out of the goodness of my heart i created a new fiddle here that works http://jsfiddle.net/eksamdyn/3/

As you can see, your issue is simply as Daniel stated above - you have many 'null' X-axis values that are causing the chart to be horizontally 'squished' which causes the chart to render each bar as thick as it can, which is 1 pixel.  The solution is to filter your data so only the populated entries are shown:

select B, AQ where B is not null

Also note that i used columns B and AQ rather than the ones you had in your fiddle, as these were sparsely populated, but the concept is the same. 

Lakshmi Priya

unread,
Jun 15, 2018, 8:00:03 PM6/15/18
to google-visua...@googlegroups.com

Thanks a lot for all your help!!! Really appreciate it!!!

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

Luis Serrano

unread,
Aug 9, 2018, 9:27:42 AM8/9/18
to Google Visualization API
Thanks for the answer and the explanation but idk why, the code dont work, it shows me this message: Data column(s) for axis #0 cannot be of type string×

May be im the wrong cause im really new on this.

Ponni Mano

unread,
Aug 14, 2018, 12:22:37 PM8/14/18
to Google Visualization API
Screen shot u r SQL data
Reply all
Reply to author
Forward
0 new messages