<svg> and <rect> inline style problem

PrithviRaj Moorani

unread,

Aug 26, 2013, 3:32:47 PM8/26/13

to google-visua...@googlegroups.com

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

asgallant

unread,

Aug 26, 2013, 4:41:42 PM8/26/13

to google-visua...@googlegroups.com

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.

PrithviRaj Moorani

unread,

Aug 26, 2013, 10:37:08 PM8/26/13

to google-visua...@googlegroups.com

google.load('visualization', '1', {packages: ['corechart']});

</script>

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>

</div>

</div>

asgallant

unread,

Aug 27, 2013, 1:30:42 AM8/27/13

to google-visua...@googlegroups.com

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.

PrithviRaj Moorani

unread,

Aug 27, 2013, 11:07:32 AM8/27/13

to google-visua...@googlegroups.com

Yes, I am using some tab-based UI. I will try out your suggested methods. Thank you!!

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/J5E0WEixnas/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all

Reply to author

Forward