Doughnut Chart in chart.js
HTML
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="myChart" width="390" height="390"></canvas>
<div id="t" class="ft circle" style="display:none" >$100.23M</div>
CSS
.ft{
background:#bbaabb;
position:absolute;
display:none;
}
.circle{
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
text-align:center;
background:#aa9966
}
JavaScript
var data = [{
value: 30,
color: "#FA797A",
highlight: "#F7464A"
}, {
value: 50,
color: "#E2EAE9",
highlight: "#E1D9D9"
}, {
value: 100,
color: "#D4CCC5",
highlight: "#D2BCB5"
}, {
value: 40,
color: "#949FB1",
highlight: "#928EA1"
}, {
value: 120,
highlight: "#C69CBE",
color: "#C89DCE"
}
]
var options = {
animation: false,
showTooltips: true,
segmentStrokeWidth:2,
percentageInnerCutout:80,
segmentShowStroke : true,
segmentStrokeColor : "#fff",
tooltipTemplate : "",
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
};
//Get the context of the canvas element we want to select
var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var top = $(".ft").position().top;
var left = $(".ft").position().left;
c.click(function(e){
var activePoints = myNewChart.getSegmentsAtEvent(e);
if(activePoints.length == 1){
var chart = $("#myChart");
var chartCenterX = chart.position().left + chart.width()/2;
var chartCenterY = chart.position().top + chart.height()/2;
var arc = activePoints[0];
var arcCenter = calc(arc.startAngle, arc.endAngle, arc.outerRadius, arc.innerRadius, chartCenterX, chartCenterY);
var arcCenterX = arcCenter.x;
var arcCenterY = arcCenter.y;
$(".ft").css({"left": arcCenterX-$("#t").width()/2, "top":arcCenterY-$("#t").height()/2, "display":"block"});
$(".ft").text("$"+arc.value+"M");
$(".ft").show();
}
else{
$(".ft").hide();
}
});
var ctx = document.getElementById("myChart").getContext("2d");
/*************************************************************************/
myNewChart...