<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.
