>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.
On Monday, August 26, 2013 10:37:08 PM UTC-4, PrithviRaj Moorani wrote: > > <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 <body> 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> > > > On Tuesday, 27 August 2013 01:41:42 UTC+5, asgallant wrote: >> >> If you would share your code or a link to the page, I will take a look >> and see what might be causing your problem. >> >> On Monday, August 26, 2013 3:32:47 PM UTC-4, PrithviRaj Moorani wrote: >>> >>> 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 <svg> and <rect> codes they are set to 400 when I inspect >>> them using google chrome but the first graph's width is different. >>> >>> Help needed. >>> Thank you >>> >> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
