Height in graphs

35 views
Skip to first unread message

samuel.ma...@bbva.com

unread,
Sep 21, 2015, 1:59:54 PM9/21/15
to Google Visualization API
I'm having issues with setting the height in graphs

With this code if I open the HTML file in the browser I get

  <div id="Piechart_div" style="width:100%; height:100%;"></div> 

Which is the desirable result


However, pasting the code in script.google my graph shrink to (width is fine, it is just the height which seams to not be working fine)

However, it does not matter if I change the width or height it always shows like the image below, so really neither the width or height appear to work

THANK YOU SO MUCH 







Daniel LaLiberte

unread,
Sep 21, 2015, 2:13:18 PM9/21/15
to Google Visualization API
Hi Samuel,

We can't tell from your description of the problem what might be happening.  You'll have to give us enough code to reproduce the problem.

As a guess, I bet there the problem involves the way you are specifying the width and height of the chart in the options.

--
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 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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/a0405779-5970-462d-a6a1-9557282d0c99%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
Message has been deleted

samuel.ma...@bbva.com

unread,
Sep 21, 2015, 2:37:11 PM9/21/15
to Google Visualization API
In addition to my email, I notice that in the options definition below, If I change the width to Pixels (For Ex: width:'50' ) the chart will change, however, it seams not to understand for %. 

Am I doing something wrong in the definition of %? height: '50%',

I was able to successfully change the width and height in pixels and see the changes. But it seams that when I change it to % doesn't work so I'm guessing I'm doing something wrong.


Thanks again


       var optionsPieChart = {
          allowHtml: true,
          width: '50',
          height: '50%',
          title: 'This is the title On Pie Chart',
          vAxis: {title: 'Selected Metric'},
          hAxis: {title: 'Quarter'},
          seriesType: 'bars',
          series: {3: {type: 'line'}},
          colors: ['#094FA4', '#52BCEC','#DF3A01', '#088A08', '#89D1F3','#B5E5F9']
        };




On Monday, September 21, 2015 at 1:13:18 PM UTC-5, Daniel LaLiberte wrote:
Hi Samuel,

We can't tell from your description of the problem what might be happening.  You'll have to give us enough code to reproduce the problem.

As a guess, I bet there the problem involves the way you are specifying the width and height of the chart in the options.
On Mon, Sep 21, 2015 at 1:59 PM, <samuel.ma...@bbva.com> wrote:
I'm having issues with setting the height in graphs

With this code if I open the HTML file in the browser I get

  <div id="Piechart_div" style="width:100%; height:100%;"></div> 

Which is the desirable result


However, pasting the code in script.google my graph shrink to (width is fine, it is just the height which seams to not be working fine)

However, it does not matter if I change the width or height it always shows like the image below, so really neither the width or height appear to work

THANK YOU SO MUCH 







--
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 google-visualization-api+unsub...@googlegroups.com.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

Daniel LaLiberte

unread,
Sep 21, 2015, 2:42:17 PM9/21/15
to Google Visualization API
The reason a percentage height or width in the chart is not doing what you expect is that the container element is not doing what you expect.  It actually shrinks to its contents, which is 0 x 0 when there is nothing in it.   If you specify a particular container size, then the percentage size in the chart will be relative to that size.  There are other ways to get the same effect, but in general, make sure your container is doing what you expect without the chart.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
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 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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2d9291ae-d6db-4494-b639-113048002172%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

samuel.ma...@bbva.com

unread,
Sep 21, 2015, 2:55:41 PM9/21/15
to Google Visualization API
So I was able to control the width with the following code in red and by change the % number the graphs changes to that size. However, The blue code for the height does not work.



function init(){
      var queryString = encodeURIComponent("SELECT E, F, G, H, I WHERE D = 'Asset Growth Rate' AND (B = 'BBVA Compass' OR C = 'BBT')");
      var container = document.getElementById('Piechart_div');
      var PieChart = new google.visualization.ComboChart(container);
      container.style.width = "50%";
      container.style.height = "100%";
      query && query.abort();
      query = new google.visualization.Query(dataSourceUrl + magicIncantation + queryString);
      var queryWrapper = new QueryWrapper(query, PieChart, optionsPieChart, container);
      queryWrapper.sendAndDraw();
    }



To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
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 google-visualization-api+unsub...@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.

Daniel LaLiberte

unread,
Sep 21, 2015, 3:09:04 PM9/21/15
to Google Visualization API
Actually, I was incorrect about specifying the height or width option as a percentage.   It doesn't work yet, though I expected it would.   At this time, the width and height options can only be the number of pixels.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

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



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
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 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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/b654f2b7-f311-4cae-98a7-2241eba16a81%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

samuel.ma...@bbva.com

unread,
Sep 21, 2015, 3:20:51 PM9/21/15
to Google Visualization API
ok, Thanks for your reply.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
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 google-visualization-api+unsub...@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.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
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 google-visualization-api+unsub...@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.
Reply all
Reply to author
Forward
0 new messages