CODEWITHSUNDEEP
chartsgoogle-visualization
Yasir Siddiqui
Yasir Siddiqui

Reputation: 435

show different slice text compared to legend in google pie chart

I want to show slightly changed text on each google pie chart slice.

In above below you will see we have legends as

work,eat,commute,watch tv,sleep

and we have same text on slices

work,eat,commute,watch tv,sleep

all i want is show different text on each slice e.g.

work-daily,eat-3times,commute-once a day,watch tv-daily,sleep-daily

but legends text should remain as mentioned above.

I don't have option to draw legends outside the chart using jquery.

Any help will be appreciated.

      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
            pieSliceText: 'label',
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="piechart" style="width: 900px; height: 500px;"></div>

Upvotes: 2

Views: 2275

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

Remove the pieSliceText (this is for showing the piechart in separated slices and can give weird results if not used correctly), then add an extra column that defines the tooltips :

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addColumn({type: 'string', role: 'tooltip'});    
data.addRows([
   ['Work', 11, 'work-daily'],
   ['Eat', 2, 'eat-3 times'],
   ['Commute', 2, 'commute-once a day'],
   ['Watch TV', 2, 'watch tv-daily'],
   ['Sleep', 7, 'sleep-daily']
]);

demo -> http://jsfiddle.net/y6e6bkdf/

You can change the legend titles by code once the chart has been drawn :

google.visualization.events.addListener(chart, 'ready', function() {
    var svg = document.getElementById('piechart').querySelector('svg'),
        legend = svg.querySelectorAll('g')[1].querySelectorAll('text');
    legend[0].textContent = 'work-daily';
    legend[1].textContent = 'eat-3 times';
    legend[2].textContent = 'commute-once a day';
    legend[3].textContent = 'watch tv-daily';
    legend[4].textContent = 'sleep-daily';
});

demo -> http://jsfiddle.net/w4weh1qy/

enter image description here

Sorry if this answer seems weird or exaggerated, but sad to say I dont know any other way to change the titles of a piechart legend.

Upvotes: 3

Related Questions