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
Post a Comment