1

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>
Shruthi R
  • 1,863
  • 4
  • 39
  • 77
  • can you provide some of the generated code about the chart? – sissy Feb 18 '14 at 08:33
  • I have attached chart's HTML code along with question. – Shruthi R Feb 18 '14 at 09:41
  • Take a look here http://stackoverflow.com/questions/8919076/how-to-make-a-svg-element-expand-or-contract-to-its-parent-container and here http://stackoverflow.com/questions/644896/how-do-i-scale-a-stubborn-svg-embedded-with-the-object-tag – sissy Feb 18 '14 at 10:02
  • The only way to make the Visualization API charts "responsive" is to hook a resize event handler on the `window` object, and call the chart's `draw` method again. – asgallant Feb 18 '14 at 18:04
  • study this https://developers.google.com/chart/interactive/docs/ – core114 Sep 18 '17 at 11:12

1 Answers1

0

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 :-)

Community
  • 1
  • 1
user2423959
  • 836
  • 1
  • 13
  • 27