svg> and <rect> inline style bug in google line charts

Question

I want to change the width to 100% in my google line chart. The container is already set to 100% width. I have three graphs on my webpage one of my graphs is actually showing the perfect width which I set to 100% but rest of the graphs are not showing specified size i.e. 100%. What could be the problem?

I checked the and codes they are set to 400 when I inspect them using google chrome but the first graph's width is different.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
    var follower1 = parseInt(<?php echo json_encode($followersvalue2); ?>);
    var follower2 = parseInt(<?php echo json_encode($followersvalue3); ?>);
    var follower3 = parseInt(<?php echo json_encode($followersvalue4); ?>);
    var follower4 = parseInt(<?php echo json_encode($followersvalue5); ?>);

    var tweets1 = parseInt(<?php echo json_encode($tweetsvalue2); ?>);
    var tweets2 = parseInt(<?php echo json_encode($tweetsvalue3); ?>);
    var tweets3 = parseInt(<?php echo json_encode($tweetsvalue4); ?>);
    var tweets4 = parseInt(<?php echo json_encode($tweetsvalue5); ?>);

    var kscore1 = parseInt(<?php echo json_encode($kscorevalue2); ?>);
    var kscore2 = parseInt(<?php echo json_encode($kscorevalue3); ?>);
    var kscore3 = parseInt(<?php echo json_encode($kscorevalue4); ?>);
    var kscore4 = parseInt(<?php echo json_encode($kscorevalue5); ?>);

    var date1 = "<?php echo $previousDate2; ?>";
    var date2 = "<?php echo $previousDate3; ?>";
    var date3 = "<?php echo $previousDate4; ?>";
    var date4 = "<?php echo $previousDate5; ?>";

  function drawVisualization() {

    var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Followers');
  data.addRows([
      [date4,  follower4],
      [date3,  follower3],
      [date2,  follower2],
      [date1,  follower1]

  ]);

    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 100+'%', height: 400,
                    vAxis: {maxValue: 10}}
            );
  }

    /* Function for Tweets Graph
    * To be displayed in Tweets Tab
    * :)
    */

    function drawVisualizationTweets(){
        var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date'); 
  data.addColumn('number', 'Tweets'); 
  data.addRows([
    [date4,  tweets4],
    [date3,  tweets3],
    [date2,  tweets2],
    [date1,  tweets1] 

  ]);


    new google.visualization.LineChart(document.getElementById('visualization2')).
        draw(data, {curveType: "function",
                    width: 100+'%', height: 400,
                    vAxis: {maxValue: 10}}
            );
  }

    /* Function for Kloutscore Graph
    * To be displayed in KloutScore Tab
    * :)
    */
    function drawVisualizationKscore(){
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'KloutScore');
        data.addRows([
            [date4, kscore4],
            [date3, kscore3],
            [date2, kscore2],
            [date1, kscore1]
        ]);

        new google.visualization.LineChart(document.getElementById('visualization3')).
            draw(data, {curveType: "function",
                       width: 100+'%', height: 400,
                       vAxis: {maxValue: 10}}
                );            
    }

    google.setOnLoadCallback(drawVisualization);
    google.setOnLoadCallback(drawVisualizationTweets);
    google.setOnLoadCallback(drawVisualizationKscore);

   </script>

and in I have

     <div id="tab-1" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block;">
        <div id="visualization" style="width: 100%; height: 400px;"></div>
    </div>

    <div id="tab-2" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
        <div id="visualization2" style="width: 100%; height: 400px;"></div>
    </div>

    <div id="tab-3" aria-labelledby="ui-id-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
        <div id="visualization3" style="width: 100%; height: 400px;"></div>
     </div>
</body>

Help needed. Thank you

Answer 1

From the id's of your divs, I am guessing that you are using some sort of tab-based UI, right? If so, that is the source of your problem. The second and third tab divs on the page would be hidden when you are trying to draw the chart, which messes up the API's ability to fetch the dimensions of the container divs for the second and third charts. To fix this, you can do one of two things: either draw the charts before instantiating the tab interface, or set up event handlers on your tabs that draw each chart when its container tab is first opened.