Re-sizing google charts with fluid bootstrap layout

Question

I am using google charts with twitter bootstrap in rails application.

In fluid layout if the span width decreases, the chart overflows its parent div.

Can google chart width be given in percentages?

Please help.

Update

I am using google_visualr gem.

Here is my controller code.

def home

  # Indents
  indent_status_table = GoogleVisualr::DataTable.new
  indent_status_table.new_column('string', 'STATUS')
  indent_status_table.new_column('number', 'COUNT')
  indent_status_table.add_rows(1)
  indent_status_table.set_cell(0, 0, 'Open')
  indent_status_table.set_cell(0, 1, 100)

  opts   = { :title => 'INDENT STATUS', :is3D => true }
  @indent_status_chart = GoogleVisualr::Interactive::PieChart.new(indent_status_table, opts)

end

And here is my html.erb code

<div id='shipment_status_chart' style="width:100%; height:200px"></div>
<%= render_chart @shipment_status_chart, 'shipment_status_chart' %>

And in java script code.

$(function() {
  $(window).resize(function(){
    drawChart();
  });   

}); 

Answer 1

You can specify the chart width in the HTML

<div id="chart_div" style="width:100%; height:300px"></div>

From Google Charts documentation:

Specifying the size in HTML - A chart can take a few seconds to load and render. If you have the chart container already sized in HTML, the page layout won't jump around when the chart is loaded.

Here is a Fiddle showing 100% width.

Update
To resize the chart when the window changes size, you can use jQuery to update the chart size.

$(document).ready(function () {
    $(window).resize(function(){
        drawChart();
    });
});

Here is a Fiddle showing 100% width with update on screen resize.

Answer 2

I'm using Google Charts with ng-google-chart.js and in order to make my charts responsive I've added style="max-width:100%"

Example:

<div class="row">
  <div class="col-md-3">
    <div google-chart style="max-width:100%" chart="chart"/>
  </div>
  <div class="col-md-3">
    <div google-chart style="max-width:100%" chart="chart"/>
  </div>
  <div class="col-md-3">
    <div google-chart style="max-width:100%" chart="chart"/>
  </div>
  <div class="col-md-3">
    <div google-chart style="max-width:100%" chart="chart"/>
  </div>
</div>