Labels on Interactive Pie Charts

[Jré]

Hey everyone,

Is it possible to put labels (text) on slices of interactive pie
charts?

For example: in this example the labels on the slices are percentages
http://code.google.com/apis/visualization/documentation/gallery/piechart.html#Example
I'd like it to say Work, Commute, Sleep, etc. instead.

Thanks in advance!
Jré

[Jinji]

This is not documented yet, but you can add pieSliceText: 'value' to your options.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
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.

[Jré Sarenac]

Thanks Jinji!
I've been trying to get it to work but haven't been successful yet.
I've tried all of the following to get it to work:

...
google.load('visualization', '1', {packages: ['piechart']});
...
_piechart.draw(data, {pieSliceText: 'work'|'commute'|'sleep'});
_piechart.draw(data, {pieSliceText: 'work','commute','sleep'});
_piechart.draw(data, {pieSliceText: 'work,commute,sleep'});
...

Where have I been going wrong?

Thanks!
Jré

[Iombe]

This is what you want pieSliceText: 'label'.
in addition i found out you can use pieSliceText: 'value' to show
7,11,2,2,2 or pieSliceText: 'percentage' which is the default setting.

new
google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"So, how was your day?",pieSliceText: 'label'});

On Aug 15, 12:38 pm, Jré Sarenac <sarena...@gmail.com> wrote:
> Thanks Jinji!
> I've been trying to get it to work but haven't been successful yet.
> I've tried all of the following to get it to work:
>
> ...
> google.load('visualization', '1', {packages: ['piechart']});
> ...
> _piechart.draw(data, {pieSliceText: 'work'|'commute'|'sleep'});
> _piechart.draw(data, {pieSliceText: 'work','commute','sleep'});
> _piechart.draw(data, {pieSliceText: 'work,commute,sleep'});
> ...
>
> Where have I been going wrong?
>
> Thanks!
> Jré
>

> On Sun, Aug 15, 2010 at 8:28 AM, Jinji <jinji....@gmail.com> wrote:
> > This is not documented yet, but you can add pieSliceText: 'value' to your
> > options.
>

> > On Thu, Aug 12, 2010 at 9:20 PM, Jré <sarena...@gmail.com> wrote:
>
> >> Hey everyone,
>
> >> Is it possible to put labels (text) on slices of interactive pie
> >> charts?
>
> >> For example: in this example the labels on the slices are percentages
>

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

> >> I'd like it to say Work, Commute, Sleep, etc. instead.
>
> >> Thanks in advance!
> >> Jré
>
> >> --
> >> You received this message because you are subscribed to the Google Groups
> >> "Google Visualization API" group.
> >> To post to this group, send email to
> >> google-visua...@googlegroups.com.
> >> To unsubscribe from this group, send email to

> >> google-visualizati...@googlegroups.com<google-visualization-api%2Bunsu...@googlegroups.com>
> >> .

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

> > google-visualizati...@googlegroups.com<google-visualization-api%2Bunsu...@googlegroups.com>
> > .

[Jinji]

Yes, all of this is correct (I got confused when I suggested 'value' when 'label' was what needed).

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[Jré Sarenac]

Thanks for the help!  I got that to work but only with the corechart package.
Is it possible to get this to work with the piechart package?
The reason that I need to use the piechart package is that I need to be able to animate the pie selection (I'm using it as a menu). 

Here is the code:

<code>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

      google.load('visualization', '1', {packages: ['piechart']});

    </script>
    <script type="text/javascript">

      var _pieChart = false;
      
      function drawPieChart() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Menu Options');
        data.addColumn('number', 'Option');
        data.addRows(5);
        data.setValue(0, 0, 'Crafts');
        data.setValue(0, 1, 20);
        data.setValue(1, 0, 'Projects');
        data.setValue(1, 1, 20);
        data.setValue(2, 0, 'Resume');
        data.setValue(2, 1, 20);
        data.setValue(3, 0, 'Blog');
        data.setValue(3, 1, 20);
        data.setValue(4, 0, 'About Me');
        data.setValue(4, 1, 20);
      
        // Create and draw the chart
        _pieChart = new google.visualization.PieChart(document.getElementById('pie_chart'));
        google.visualization.events.addListener(_pieChart, 'ready', readyHandler);
        
        _pieChart.draw(data, {legend:"none", is3D:true, backgroundColor: {stroke:null, fill:null, strokeSize:0}, pieSliceText: 'label'});

      }   
      
      function readyHandler() {
        google.visualization.events.addListener(_pieChart, 'select', mouseClickHandler);
      }
      function mouseClickHandler() {
          var selection = _pieChart.getSelection();
        var currentSelection = 0;

        //first selection has only length 1 because there is no 'previous' selection
        if(selection.length == 1)
        {
          currentSelection = selection[0].row;
        }
        //all other selections are: selection[0] = previous, selection[1] = current
        else
        {
          currentSelection = selection[1].row;
        }
          
        switch(currentSelection)
          {
           case 1:
              location.href = ('http://www.google.com');             
             break;
            case 2:
                location.href = ('http://www.google.com');
                break;
            case 3:
                location.href = ('http://www.google.com');
                break;
           case 4:
              location.href = ('http://www.google.com');
              break;
            default:
              location.href = ('http://www.google.com');
         }
      
          _pieChart.setSelection([{row:currentSelection, column:null}]);
      }
      
      google.setOnLoadCallback(drawPieChart);
    </script>

  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="pie_chart" style="width: 600px; height: 400px;"></div>
  </body>
</html>

</code>

[Viz Kid]

There is no such option in the piechart package.

[Jré Sarenac]

Thanks for your prompt reply!  Does the corechart package have similar animation capabilities as the piechart package?
Or are there any plans to implement pieSliceText: 'label to the piechart package?

Jré

[Viz Kid]

We are considering different ways of indicating the selection of slices in the corechart package, however I'm not sure when this will be available.

We will probably not add new features to the piechart package.