Can someone tell me what's wrong with my code? I've successfully generated a doughnut chart using Chart.js, as well as a legend, but I'd like the corresponding segment of the chart to highlight with a tooltip when I hover over each item in the legend, just like how it does on this page
I tried copying over and modifying the code used on that exact page, but I can't get it to work. Advice and help appreciated!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src='Chart.js'></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="race" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
<ul class="doughnut-legend">
<li><span style="background-color:#40af49"></span>African American</li>
<li><span style="background-color:#ac558a"></span>Other</li>
<li><span style="background-color:#f05541"></span>Multi-Racial, Not Hispanic</li>
<li><span style="background-color:#3ac2d0"></span>Hispanic/Latino</li>
<li><span style="background-color:#faaf3c"></span>Asian</li>
<li><span style="background-color:#4287b0"></span>White/Caucasian</li>
</ul>
<script>
var pieData = [
{
value: 24.8,
color: "#40af49",
label: "African American"
},
{
value : 2.9,
color : "#ac558a",
label: "Other"
},
{
value : 5.7,
color : "#f05541",
label: "Multi-Racial, Not Hispanic"
},
{
value : 19.1,
color : "#3ac2d0",
label: "Hispanic/Latino"
},
{
value : 6.5,
color : "#faaf3c",
label: "Asian"
},
{
value : 41,
color : "#4287b0",
label: "White/Caucasian"
}
];
var race = new Chart(document.getElementById("race").getContext("2d")).Doughnut(pieData, { tooltipTemplate : "<%if (label){%><%=label%>: <%}%><%= value %>%", animateRotate: true });
var legendHolder = document.createElement('div');
legendHolder.innerHTML = race.generateLegend();
// Include a html legend template after the module doughnut itself
helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){
helpers.addEvent(legendNode, 'mouseover', function(){
var activeSegment = race.segments[index];
activeSegment.save();
race.showTooltip([activeSegment]);
activeSegment.restore();
});
});
helpers.addEvent(legendHolder.firstChild, 'mouseout', function(){
race.draw();
});
canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);
</script>
</body>
</html>
Can someone tell me what's wrong with my code? I've successfully generated a doughnut chart using Chart.js, as well as a legend, but I'd like the corresponding segment of the chart to highlight with a tooltip when I hover over each item in the legend, just like how it does on this page
I tried copying over and modifying the code used on that exact page, but I can't get it to work. Advice and help appreciated!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src='Chart.js'></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="race" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
<ul class="doughnut-legend">
<li><span style="background-color:#40af49"></span>African American</li>
<li><span style="background-color:#ac558a"></span>Other</li>
<li><span style="background-color:#f05541"></span>Multi-Racial, Not Hispanic</li>
<li><span style="background-color:#3ac2d0"></span>Hispanic/Latino</li>
<li><span style="background-color:#faaf3c"></span>Asian</li>
<li><span style="background-color:#4287b0"></span>White/Caucasian</li>
</ul>
<script>
var pieData = [
{
value: 24.8,
color: "#40af49",
label: "African American"
},
{
value : 2.9,
color : "#ac558a",
label: "Other"
},
{
value : 5.7,
color : "#f05541",
label: "Multi-Racial, Not Hispanic"
},
{
value : 19.1,
color : "#3ac2d0",
label: "Hispanic/Latino"
},
{
value : 6.5,
color : "#faaf3c",
label: "Asian"
},
{
value : 41,
color : "#4287b0",
label: "White/Caucasian"
}
];
var race = new Chart(document.getElementById("race").getContext("2d")).Doughnut(pieData, { tooltipTemplate : "<%if (label){%><%=label%>: <%}%><%= value %>%", animateRotate: true });
var legendHolder = document.createElement('div');
legendHolder.innerHTML = race.generateLegend();
// Include a html legend template after the module doughnut itself
helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){
helpers.addEvent(legendNode, 'mouseover', function(){
var activeSegment = race.segments[index];
activeSegment.save();
race.showTooltip([activeSegment]);
activeSegment.restore();
});
});
helpers.addEvent(legendHolder.firstChild, 'mouseout', function(){
race.draw();
});
canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);
</script>
</body>
</html>
1 Answer
Reset to default 7Where you are trying to use 'helpers' and 'canvas' you do not have scope for them.
Helpers refers to Chartjs helpers, this can be easily added by creating
var helpers = Chart.helpers
Canvas refers to you race variables canvas so just add
race.chart.canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);
here is a fiddle with it working