ruby on rails - Re-sizing google charts with fluid bootstrap layout -


i using google charts twitter bootstrap in rails application.

in fluid layout if span width decreases, chart overflows parent div.

can google chart width given in percentages?

please help.

update

i using google_visualr gem.

here 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 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();   });     });  

you can specify chart width in html

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

from google charts documentation:

specifying size in html - chart can take few seconds load , render. if have chart container sized in html, page layout won't jump around when chart loaded.

here fiddle showing 100% width.

update
resize chart when window changes size, can use jquery update chart size.

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

here fiddle showing 100% width update on screen resize.


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -