How to change the css style for Google charts

Question

In rails 3.2.13 project, I am using google charts for reports, but graph is not aligned properly.

Graph should be in responsive format(not fixed format). Now Height & Width of this chart is in 'px' format, I need to change in '%' format. How can I change CSS style for google chart?

I am using below gem for charts

gem 'reporter', '0.0.14.alpha' , :git => "https://github.com/kpvarma/reporter.git"

In views, outer div container contains 100% width

<div id="<%= container_id %>" style="float:left;width: 100%;"></div>

Generated HTML code is

 <div id="self_users_chart" style="float: left; width: 100%; position: relative;"><div dir="ltr" style="position: relative; width: 676px; height: 200px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="676" height="200" style="overflow: hidden;"><defs id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_0"><rect x="84" y="38" width="508" height="124"></rect></clipPath></defs><rect x="0" y="0" width="676" height="200" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="604" y="38" width="60" height="31" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="604" y="38" width="60" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="621" y="48.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Jobs</text></g><rect x="604" y="38" width="12" height="12" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="604" y="57" width="60" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="621" y="67.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Applic...</text><rect x="621" y="57" width="43" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><rect x="604" y="57" width="12" height="12" stroke="none" stroke-width="0" fill="#dc3912"></rect></g></g><g><rect x="84" y="38" width="508" height="124" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(#_ABSTRACT_RENDERER_ID_0)"><g><rect x="84" y="161" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="130" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="100" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="69" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="38" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect></g><g><rect x="84" y="161" width="508" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g><g><path d="M211.25,69.25L464.75,130.75" stroke="#3366cc" stroke-width="2" fill-opacity="1" fill="none"></path><path d="M211.25,161.5L464.75,130.75" stroke="#dc3912" stroke-width="2" fill-opacity="1" fill="none"></path></g></g><g></g><g><g><text text-anchor="middle" x="211.25" y="176.86666666666665" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">13 Feb, 2014</text></g><g><text text-anchor="middle" x="464.75" y="176.86666666666665" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">17 Feb, 2014</text></g><g><text text-anchor="end" x="72" y="165.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">0</text></g><g><text text-anchor="end" x="72" y="134.95" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">1</text></g><g><text text-anchor="end" x="72" y="104.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">2</text></g><g><text text-anchor="end" x="72" y="73.45" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">3</text></g><g><text text-anchor="end" x="72" y="42.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">4</text></g></g></g><g><g><text text-anchor="middle" x="338" y="193.5333333333333" font-family="Arial" font-size="12" font-style="italic" stroke="none" stroke-width="0" fill="#222222">Time</text></g><g><text text-anchor="middle" x="36.7" y="100" font-family="Arial" font-size="12" font-style="italic" transform="rotate(-90 36.7 100)" stroke="none" stroke-width="0" fill="#222222">Events</text></g></g><g></g></svg></div></div><div style="display: none; position: absolute; top: 210px; left: 686px; white-space: nowrap; font-family: Arial; font-size: 12px;">Applic...</div><div></div></div>

Answer 1

I'm not sure if the below would be helping in your conversion but the standard conversion is as below.

1em = 12pt = 16px = 100%.

It can be found at this link

please update if this is helpful. Also you can refer Converting width from percentage to pixels for similar question.

Also there is a calculator online found here, where in you give the pixel-width and you get in percentage.

Happy Coding :-)