Pie Chart: Legend Alignment

the_lorax

unread,

Aug 30, 2009, 1:43:46 AM8/30/09

to Google Visualization API

I have been using the Pie Chart using the Google Visualization API and
have noticed that when the length of the text in the legend exceeds a
certain length, part of the text gets cut off. The only way to make
sure that all the text is included in the legend is to not define
width of the chart and just let it go to full. However, even having
full width charts is a problem because it floats the legend to the far
right of the chart, leaving a large gap of whitespace between the
legend and the chart itself.

Has anyone else experiences this problem and found a solution or is it
just a bug with the API?

Thanks
the_lorax

MC Get Vizzy

unread,

Aug 30, 2009, 10:02:25 AM8/30/09

to google-visua...@googlegroups.com

are you using google.visualization.ImagePieChart?

the_lorax

unread,

Aug 31, 2009, 3:58:27 AM8/31/09

to Google Visualization API

I'm using the pie chart from from here
http://code.google.com/apis/visualization/documentation/gallery/piechart.html

Here is any example of what happens, hope it helps:

[URL=http://www.picturepush.com/public/2196460][IMG]http://
www2.picturepush.com/photo/a/2196460/220/2196460.png[/IMG][/URL]

Thanks for your response
the_lorax

MC Get Vizzy

unread,

Aug 31, 2009, 5:56:18 AM8/31/09

to google-visua...@googlegroups.com

I haven't been able to reproduce this. could you send a code snippet or a link to a live example?

the_lorax

unread,

Aug 31, 2009, 7:23:27 AM8/31/09

to Google Visualization API

Basically, the thing that causes this problem is the increase in
legendFontSize. The reason I increased the font size is because the
legend text is otherwise unreadable.Try removing the legendFontSize
option from the query as well to see what happens. It would be great
if google could make options to better manipulate the legend and chart
separately.

---------------------CODE START---------------------
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work - this is some extra text');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat - this is some extra text');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute - this is some extra text');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV - this is some extra text');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep - this is some extra text');
data.setValue(4, 1, 7);

var chart = new google.visualization.PieChart
(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title:
'My Daily Activities',

legendFontSize:12});
}
</script>
</head>

<body>
<div id="chart_div"></div>
</body>
</html>

---------------------CODE END---------------------

Hope this helps
Thanks Again
the_lorax

>
On Aug 31, 9:56 pm, MC Get Vizzy <getvi...@google.com> wrote:
> I haven't been able to reproduce this. could you send a code snippet or a
> link to a live example?
>

> On Mon, Aug 31, 2009 at 10:58 AM, the_lorax <simeon.wisl...@gmail.com>wrote:
>
>
>
>
>
> > I'm using the pie chart from from here
>

> >http://code.google.com/apis/visualization/documentation/gallery/piech...

>
> > Here is any example of what happens, hope it helps:
>

> > [URL=http://www.picturepush.com/public/2196460][IMG]http://<http://www.picturepush.com/public/2196460%5D%5BIMG%5Dhttp://>
> > www2.picturepush.com/photo/a/2196460/220/2196460.png[/IMG][/URL]<http://www2.picturepush.com/photo/a/2196460/220/2196460.png%5B/IMG%5D...>

Dieter Krachtus

unread,

Sep 1, 2009, 7:25:36 AM9/1/09

to Google Visualization API

my bad. I knew this issue for a while but forgot to report it.

workaround until the issue is resolved:
http://groups.google.com/group/google-visualization-api/browse_thread/thread/938633f336f681a1?hl=en

Cheers,
Dieter

the_lorax

unread,

Sep 2, 2009, 2:02:54 AM9/2/09

to Google Visualization API

Thank You Dieter Krachtus, you're an absolute legend, can't believe I
never thought of setting the legend to the left. I had tried the
bottom and top and they both didn't work either because the legends
got bunched up and overlapped. I will give the left alignment a go.
Hope Google fixes the bug soon.

Thanks Again
the_lorax

On Sep 1, 11:25 pm, Dieter Krachtus <dieter.krach...@googlemail.com>
wrote:

> my bad. I knew this issue for a while but forgot to report it.
>

> workaround until the issue is resolved:http://groups.google.com/group/google-visualization-api/browse_thread...
>
> Cheers,
> Dieter

Dieter Krachtus

unread,

Sep 2, 2009, 9:27:13 AM9/2/09

to Google Visualization API

Thanks,

funny word-play: 'you are an absolute legend' ;)

Hehe...I guess this means I am a legend without alignment. Perhaps one
should allow setting the legend distance to the pie 'absolutely'
although I would prefer automatic layout.

Perhaps you want to star/follow this issue I opened:
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=44

Cheers,
Dieter

Reply all

Reply to author

Forward