Piechart not rendering correct in IE with 99.99% slice

554 views
Skip to first unread message

Gilles Haverbeke

unread,
Sep 1, 2011, 4:19:06 AM9/1/11
to google-visua...@googlegroups.com
Hi,

I'm experiencing problems with the Visualisation API in the "corechart" package. When I'm using the following code, the "big slice" is not rendered at all in IE. The rest of the Chart (legend, title etc) is rendered as it should. In Chrome and Firefox the chart is rendered OK.

function drawChart() {
  var data = new google.visualization.DataTable();

  data.addColumn('string', 'Task');
  data.addColumn('number', 'Hours per Day');

  data.addRows(2);
  data.setValue(0, 0, 'Work');
  data.setValue(0, 1, 10000);
  data.setValue(1, 0, 'Eat');
  data.setValue(1, 1, 1);

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
}


Is there any way to workaround this problem, or can this issue be fixed? 

Thanks in advance. 

Best regards,
  Gilles

Roni Biran

unread,
Sep 1, 2011, 5:01:01 AM9/1/11
to google-visua...@googlegroups.com
In the pie options you have "sliceVisibilityThreshold". This is the visibility threshold for showing slices. The default value is 1/720. Change it and you'll see your data.

chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities', sliceVisibilityThreshold: 1/100000 });

Good luck,

Roni

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/1Se0cU4wdIcJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

Gilles Haverbeke

unread,
Sep 1, 2011, 5:23:21 AM9/1/11
to Google Visualization API
Hi Roni,

Thanks for your quick reply. I'm afraid your comment does not fix my
problem.

The "sliceVisibilityThreshold" only controls whether the "very small"
slices are grouped together to a single "Other" slice. If I enable
this feature as you suggest, the only thing that changes is that the
tiny slice is displayed as "Eat" instead of "Other". The big "Work"
slice is still not shown in Internet Explorer. (tested IE6, 7 and 9,
all showing the same behavior)

Best regards,
Gilles

On Sep 1, 11:01 am, Roni Biran <roni.bi...@gmail.com> wrote:
> In the pie options you have "sliceVisibilityThreshold". This is the
> visibility threshold for showing slices. The default value is 1/720. Change
> it and you'll see your data.
>
> chart.draw(data, {width: 450, height: 300, title: 'My Daily
> Activities',* **sliceVisibilityThreshold:
> 1/100000 *});

Roni Biran

unread,
Sep 1, 2011, 5:47:00 AM9/1/11
to google-visua...@googlegroups.com
It appears that IE have an issue with small numbers. If one of the data items is lower 1/1080 of the total items. the chart is destroyed.
In IE, you might want to normalize your data to that scale.

Roni

Gilles Haverbeke

unread,
Sep 1, 2011, 5:54:59 AM9/1/11
to Google Visualization API
Hi,

Thanks again for your reply. I already considered to normalize the
data, but the data shown is representing absolute numbers and is
unfortunately not subject to normalization. Because there is no option
to show a different number in the tooltip (the real data) then the
data in the data table used to scale the slices (the "normalized"
data) this is not an option.

Is there another way to work around this "small number" problem?

Best regards,
Gilles

Roni Biran

unread,
Sep 1, 2011, 6:17:39 AM9/1/11
to google-visua...@googlegroups.com
This is not so true. You can change the output text as you like. Use this code instead of yours:

Yours (does not work)
data.addRows(2);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 10000);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 1);

New (works)
data.addRows([
  ['Work', { v: 1000, f: '10000'}],
  ['Eat', { v: 1, f: '1' ]
]);

i.e. You can write in the value fields (v) the normalized data and in the format fields (f) the raw data.

Good luck,

Roni
Reply all
Reply to author
Forward
0 new messages