I don't want to show the legends on the side of the chart but i would like to show both the legend and the values on mouse hover only. Example, when user hovers the mouse over the pie chart; i want to show the country name and total revenue in the tooltip.
<script src="Scripts/jquery-1.8.3.js"></script>
<script src="Scripts/excanvas.js"></script>
<script src="Scripts/Chart.js"></script>
<script type="text/javascript">
$(function () {
LoadChart();
$("[id*=rblChartType] input").bind("click", function () {
LoadChart();
});
});
function LoadChart() {
var chartType = parseInt($("[id*=rblChartType] input:checked").val());
$.ajax({
type: "POST",
url: "test.aspx/GetChart",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("#dvChart").html("");
$("#dvLegend").html("");
var data = eval(r.d);
var el = document.createElement('canvas');
$("#dvChart")[0].appendChild(el);
//Fix for IE 8
if ($.browser.msie && $.browser.version == "8.0") {
G_vmlCanvasManager.initElement(el);
}
var ctx = el.getContext('2d');
var userStrengthsChart;
switch (chartType) {
case 1:
userStrengthsChart = new Chart(ctx).Pie(data);
break;
case 2:
userStrengthsChart = new Chart(ctx).Doughnut(data);
break;
}
for (var i = 0; i < data.length; i++) {
var div = $("<div />");
div.css("margin-bottom", "10px");
div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + data[i].color + "'></span> " + data[i].text);
$("#dvLegend").append(div);
}
},
failure: function (response) {
alert('There was an error.');
}
});
}
</script>
aspx
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:RadioButtonList ID="rblChartType" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Pie" Value="1" Selected="True" />
<asp:ListItem Text="Doughnut" Value="2" />
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td>
<div id="dvChart">
</div>
</td>
</tr>
<tr>
<td>
<div id="dvLegend">
</div>
</td>
</tr>
</table>
here is the article link: http://www.aspsnippets.com/Articles/Using-HTML5-Canvas-charts-in-ASPNet.aspx
Thanks