Highchart Implementation in .Net MVC

Here i am going to explain how to implement the semi circle donut chart in .net MVC.

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, multiple type chart types.

// First you have to catch the particular data in variable after that pass these value to viewbag
var totalcount = _uow.Login.GetAll().Count();
var chromcount = _uow.Login.Get(a => a.Browser=="Chrome").Count();
var Firefoxcount = _uow.Login.Get(a => a.Browser == "Firefox").Count();
var Safaricount = _uow.Login_.Get(a => a.Browser == "Safari").Count();
float chromcounts = ((chromcount * 100) / totalcount);
float Firefoxcounts = ((Firefoxcount * 100) / totalcount);
float Safaricounts = ((Safaricount * 100) / totalcount);
ViewBag.chromcounts = chromcounts;
ViewBag.Firefoxcounts = Firefoxcounts;
ViewBag.Safaricounts = Safaricounts;

// this is js for highchart and you have to pass the value to this js data section
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>Used<br>By users',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', @Firefoxcounts],
['Chrome', @chromcounts],
['Safari', @Safaricounts],
{
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
]
}]
});
});

catech the viewbag value on cshtml page and pass these local variable to js data section
var chromcounts = ViewBag.chromcounts;
var Firefoxcounts = ViewBag.Firefoxcounts;
var Safaricounts = ViewBag.Safaricounts;