Google Piecharts label bug: positioning conflicting with css?

[Kasper]

Hi,

I am using the piecharts from the visualisation API, using the 3D option, to create something like this:

(screenshot is from Safari)

However, for some reason this doesnt display properly in Firefox.

Here is a screenshot from Firefox (latest version):

That is an image from the piecharts within my website. Here is an image from the piecharts outside my website (just the piecharts):

As you can see, the graph is displayed a lot different outside the website...

I think this is because my CSS is conflicting somehow with the rendering of the SVG.

That is weird actually, because it's all being rendered within an iframe (and I don't have any css pointing to iframe objects...).

What could be causing this and how can I fix it?

[asgallant]

Can you post your code, or better yet, a link to the site?

[Kasper]

Yes, here is an example:
http://test.lyxdesign.nl/chart-mockup.html

However, I've figured out why it is malfunctioning in Firefox:
When the first request is send, firefox does not handle the request properly: it seems like it only partially loads the request.
Why?
Well, when you recieve the piechart for the first time, the labels are all shown (not hidden when the area is too small for example) and not placed properly.
And when you then refresh the page, firefox reloads (and finishes) the request/piechart, and fixes the layout: hides the right labels, and places them right.

I do not know why this is though...
Do you have any idea?

[Kasper]

Ok, I've figured out a bit more.
It seems that the mockup was just working fine, because where I am using it in the website, it is initially hidden (display:none). When you press a button, the piecharts are shown (display:block).
So when you refresh the page with the piecharts visible, they are messed up.
I'm not sure why... but that is what's causing it... now I just need a solution..

Op woensdag 7 maart 2012 10:29:00 UTC+1 schreef Kasper het volgende:

[asgallant]

You need to make the div's visible before drawing the charts.  You can hide them immediately after they finish drawing by using a 'ready' event handler, like this:

var div = document.getElementById( 'piechart-'+i );
var chart = new google.visualization.PieChart(div);
div.style.display = 'block';

google.visualization.events.addListener(chart, 'ready', function () {
    div.style.display = 'none';
});

chart.draw(data, options);​ 

[Kasper]

This Sorry for the late reply, but this indeed was the problem.
However, this method did not solve it. We solved it using absolute positioning [placing it outside the div with overflow hidden, thus making it appear hidden].
Not a great solution, but it works.


Op woensdag 7 maart 2012 19:22:57 UTC+1 schreef asgallant het volgende: