sontd
sontd

Reputation: 435

Pie chart custom tooltip

I tried to customize tooltip for google pie chart but I cannot success. Is there anyway to custom the pie tooltip? I need a tooltip like this: Pie with tooltip

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', p: {html:true}});
data.addRows([
['Woman',100,'Woman Number'],['Man',200,'Man Number'],['Couple',300,'Couple Number']         
]);
var options = {                  
                 'width':360,
                'height':200,   
                tooltip: {isHtml: true},                
                colors: ['#fda4b7', '#7eb9de', '#a5d454']
            };
            var chart = new     google.visualization.PieChart(document.getElementById('chartid'));     

            chart.draw(data, options); 

Upvotes: 2

Views: 4293

Answers (2)

sontd
sontd

Reputation: 435

Finally I found the way to change the tooltip HTML for Pie Chart.

google.visualization.events.addListener(chart, 'onmouseover', function (e) { 
    // e.row contains the selected row number in the data table
    $(".google-visualization-tooltip").html("your html here");
});

Upvotes: 3

olaf
olaf

Reputation: 65

Maybe this will be usefull to you. I made a piechart by myself. It's light and you can customize it: http://jsfiddle.net/cbWC4/5/

You create a cake:

//create the pieces of the pie (size, Name, color, relative size-will be calculatet later)
var p1= new Kuchenstueck(33,"Stueck1","949bc2",0); 
var p2= new Kuchenstueck(10,"Stueck2","5d5f6c",0); 
var p2= new Kuchenstueck(20,"Stueck3","96ccae",0); 

var kuchen = {kuchenstuecke: [p1,p2,p3], auffuellen:true, absoluteGroesse:0, mx:180, my:180, r:180, imgSizeX:360, imgSizeY:360};

and apend it to a html element:

$(".torte").append(createKuchen(kuchen));

please note: some parameters are not yet implemented and kuchen is the german word for pie :)

Upvotes: 0

Related Questions