Reputation: 435
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
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
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