Controlling Chart Bordering White Space?
3,547 views
Skip to first unread message
Ken Burkhalter
Dec 14, 2014, 10:58:16 AM12/14/14
to google-visua...@googlegroups.com
The Line Chart I have generated seems to have excessing white space bordering it. I have been able to trim the top and left sides, but the bottom is excessive and although I have tried to change every chartArea option I can think of to try, I have not been successful.
Here is an example, where the new Google Chart is displayed on a page with others (not yet converted).
There is no html inserted spacing between the chart elements, so all the space is associated with the Google Chart itself. Here is the page code...
<body>
<div id="chart_div" style="width: 775px; height: 350;" align:="left"></div>
<img src="logtemp/week.jpg" alt="The Week Temps" /><br />
<br />
<img src="logtemp/month.jpg" alt="The Month Temps" />
</body>And here is the displayed result...
The red boxed area is all excessing white space that I would like to trim as much as possible.
Is this possible?
Thanks.
Daniel LaLiberte
Dec 14, 2014, 2:23:57 PM12/14/14
to google-visua...@googlegroups.com
Hi Ken,
You also can adjust the height of the overall chart, separate from the 'chartArea'. If your div height is 350, this should be used to determine the default chart size, but I can't tell what else you are doing with your chart options without seeing the code. So try:
var options = {
height: 350,
chartArea: {
height: 350
}
}
--
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.
For more options, visit https://groups.google.com/d/optout.
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
Ken Burkhalter
Dec 15, 2014, 8:22:49 AM12/15/14
to google-visua...@googlegroups.com
Daniel-
Thank you. That was it. I made the chart height 15px smaller than the chart.chartArea.height and that left a nice small white space border.
I guess none are so blind as they that cannot see. Like so many things in life, once you understand something it is obvious, but until then a mystery.
I was very puzzled why there were two height (and width) properties, never stopping to think that one was a chart option and the other a chartArea option. Once that became clear it is obvious how to use them.
As a newbie I suggest someone consider a small bit of explanatory text in the 'Using Google Charts" Chart Galleries help 'chartArea.height' and 'height' (also widths) area that says for example...
That would make things a lot clearer for anyone trying to learn about the use of charting.
-ken b
Thank you. That was it. I made the chart height 15px smaller than the chart.chartArea.height and that left a nice small white space border.
I guess none are so blind as they that cannot see. Like so many things in life, once you understand something it is obvious, but until then a mystery.
I was very puzzled why there were two height (and width) properties, never stopping to think that one was a chart option and the other a chartArea option. Once that became clear it is obvious how to use them.
As a newbie I suggest someone consider a small bit of explanatory text in the 'Using Google Charts" Chart Galleries help 'chartArea.height' and 'height' (also widths) area that says for example...
| |
chartArea.height | number or string | auto | Chart area height. See also
'height' option to adjust the chart size within the chart
area. |
That would make things a lot clearer for anyone trying to learn about the use of charting.
-ken b
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/7sD67KFpUhk/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/d/optout.
-- -ken burkhalter
Daniel LaLiberte
Dec 15, 2014, 8:40:57 AM12/15/14
to google-visua...@googlegroups.com
Glad you got it working, Ken.
We are planning to add a section to the documentation calling special attention to the sizing issues. As you suggest, clarifications in the relevant option descriptions will also help.
Ken Burkhalter
Dec 15, 2014, 9:59:44 AM12/15/14
to google-visua...@googlegroups.com
Daniel-
Apparently I spoke too soon. I seems I've taken one step forward and two steps back.
Using your suggested code, I eliminated the unwanted vertical spacing but then later noticed that my chart A-axis labels dropped the last label. The axis should have been labeled from 0-24, but was then just 0-23.
So I thought that perhaps I needed to also add "width" control like your "height" suggestions.
As soon as I did that, I then lost all of the x-axis labels and tick marks. The chart was cropped right thru the minimum x-axis tick line, slicing off the bottom half of the lower y-axis label as well as all of the x-axis labels. (Note red outlined area on image below)...
Apparently I spoke too soon. I seems I've taken one step forward and two steps back.
Using your suggested code, I eliminated the unwanted vertical spacing but then later noticed that my chart A-axis labels dropped the last label. The axis should have been labeled from 0-24, but was then just 0-23.
So I thought that perhaps I needed to also add "width" control like your "height" suggestions.
As soon as I did that, I then lost all of the x-axis labels and tick marks. The chart was cropped right thru the minimum x-axis tick line, slicing off the bottom half of the lower y-axis label as well as all of the x-axis labels. (Note red outlined area on image below)...
No matter what I have tried with the Var options settings, I can't fix this issue. If I make the "height" considerably smaller than the "chartArea.height" the chart resizes appropriately but is still cropped. I've tried different browsers, and three different computers, and restarted my web server in case this was a caching issue somewhere but to no avail. There is nothing I can do that will restore an uncropped chart now. I even removed all style parameters from the html chart_div entry in the page body code. Nothing seems to make a difference! The chart remains cropped at the bottom no matter what. I also can find no chart config options that I might have inadvertently changed or dropped.
There seems to be "memory" somewhere but I'll be danged if I can find it.
I have attached my html page code as well as the csv file that drives the chart creation, and the img file just below the google chart, if case it helps you discover what the heck is going on.
If you can advise the cure for this AND the lost last x-axis tick mark label (24) I would sure be a happy camper! :-)
This seems like voo-doo dust has gotten into the works somehow.
[:-)}
Daniel LaLiberte
Dec 15, 2014, 10:20:05 AM12/15/14
to google-visua...@googlegroups.com
Ken,
You may have gotten the wrong idea about the 'height' vs 'chartArea.height' The 'chartArea' is the part inside the axes, where the drawing of the data is displayed. The overall chart contains the chartArea, surrounded by the top, bottom, left, and right areas. The 'height' is for the total chart size, including the chartArea.height. So the 'height' should generally be larger than the 'chartArea.height', not smaller. (I see now that your suggested comment got it backwards.) Same for 'width' and 'chartArea.width'.
Another thing that might be going on is if the html element you put the chart in has a height, that could override whatever you specify for the chart itself. Also, your second chart might be positioned such that it covers up the bottom of the first chart. Your chartTemps.html doesn't seem to have the content I would need to tell what is going on, but maybe you can figure it out from here.
--
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.
For more options, visit https://groups.google.com/d/optout.
Ken Burkhalter
Dec 15, 2014, 10:36:18 AM12/15/14
to google-visua...@googlegroups.com
You nailed it on all fronts!
Got 'er going correctly now!!!!
Definite need for clearer language in the documentation.
To me at least, the explanation seems counter intuitive, but once explained makes sense.
Thanks again for helping me get over the hump.
[:-)}
Got 'er going correctly now!!!!
Definite need for clearer language in the documentation.
To me at least, the explanation seems counter intuitive, but once explained makes sense.
Thanks again for helping me get over the hump.
[:-)}
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/7sD67KFpUhk/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/d/optout.
-- -ken burkhalter
Reply all
Reply to author
Forward
0 new messages