{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 放荡不羁爱自由 的问题《How to add link to a part google pie chart》','https://www.manongdao.com/q-921874.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
My question maybe a little confuse so I will explain.
I used Google Charts to make a simple pie chart. It works great. What I need know is to be able to link all section/part of the pie to display a jquery modal/dialog popup.
I searching for a long time but still can't found anything close to that.
Thanks all for reading and hope someone can help me :)
Here my code to display my chart
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Clan');
data.addColumn('number', 'Vampire');
data.addRows([
<? foreach($this->toDisplay as $oClan)
{
echo "['".$oClan->getName()."', ".count($oClan->getMembers()).']';
echo ", ";
} ?>
]);
var options = {'title':'Effectif des clans',
'width':600,
'height':600};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body>
<div id="chart_div"></div>
</body>
Here the code with the listener that do what I wanted :)
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Clan');
data.addColumn('number', 'Vampire');
data.addRows([
<? foreach($this->toDisplay as $oClan)
{
echo "['".$oClan->getName()."', ".count($oClan->getMembers()).']';
echo ", ";
} ?>
]);
var options = {'title':'Effectif des clans',
'width':600,
'height':600};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var topping = data.getValue(selectedItem.row, 0);
alert('The user selected ' + topping);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
This is a difficult question, and this is not a complete response, but a hint on how you could solve this issue.
In this kind of situations, there are 3 cases:
God, if you exist, forgive me for writing this. If you can't code it or hook it, hack it. You can use the insepctor to study the structure of the generated SVG after the rendering, and build a nice jQuery selector and patch the svg.
The third method has a lot of drawbacks, including the following (but not only):
But it may in some cases be the only way. It depends on how much you want it and if, knowing the drawbacks and hidden costs you are ready to pay that price.
Have a look to the select event; you can setup your own listener to react on click in the pie slices (icCube has an example here).