Post
Ask Question

Highchart Implementation 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.

  1.            // First you have to catch the particular data in variable after that pass these value to viewbag
  2.           
  3.            var totalcount = _uow.Login.GetAll().Count();  
  4.            var chromcount = _uow.Login.Get(a => a.Browser=="Chrome").Count();  
  5.            var Firefoxcount = _uow.Login.Get(a => a.Browser == "Firefox").Count();  
  6.            var Safaricount = _uow.Login_.Get(a => a.Browser == "Safari").Count();  
  7.            float chromcounts = ((chromcount * 100) / totalcount);  
  8.            float Firefoxcounts = ((Firefoxcount * 100) / totalcount);  
  9.            float Safaricounts = ((Safaricount * 100) / totalcount);  
  10.   
  11.            ViewBag.chromcounts = chromcounts;  
  12.            ViewBag.Firefoxcounts = Firefoxcounts;  
  13.            ViewBag.Safaricounts = Safaricounts; 


  1.  
  2. // this is js for highchart and you have to pass the value to this js data section
  3. <script>  
  4.         $(function () {  
  5.             $('#container').highcharts({  
  6.                 chart: {  
  7.                     plotBackgroundColor: null,  
  8.                     plotBorderWidth: 0,  
  9.                     plotShadow: false  
  10.                 },  
  11.                 title: {  
  12.                     text: 'Browser<br>Used<br>By users',  
  13.                     align: 'center',  
  14.                     verticalAlign: 'middle',  
  15.                     y: 40  
  16.                 },  
  17.                 tooltip: {  
  18.                     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'  
  19.                 },  
  20.                 plotOptions: {  
  21.                     pie: {  
  22.                         dataLabels: {  
  23.                             enabled: true,  
  24.                             distance: -50,  
  25.                             style: {  
  26.                                 fontWeight: 'bold',  
  27.                                 color: 'white',  
  28.                                 textShadow: '0px 1px 2px black'  
  29.                             }  
  30.                         },  
  31.                         startAngle: -90,  
  32.                         endAngle: 90,  
  33.                         center: ['50%', '75%']  
  34.                     }  
  35.                 },  
  36.                 series: [{  
  37.                     type: 'pie',  
  38.                     name: 'Browser share',  
  39.                     innerSize: '50%',  
  40.                     data: [  
  41.                         ['Firefox', @Firefoxcounts],  
  42.                         ['Chrome', @chromcounts],  
  43.                         ['Safari', @Safaricounts],  
  44.   
  45.                         {  
  46.                             name: 'Proprietary or Undetectable',  
  47.                             y: 0.2,  
  48.                             dataLabels: {  
  49.                                 enabled: false  
  50.                             }  
  51.                         }  
  52.                     ]  
  53.                 }]  
  54.             });  
  55.         }); 
  1. catech the viewbag value on cshtml page and pass these local variable to js data section

  3.   var chromcounts = ViewBag.chromcounts;  
  4.    var Firefoxcounts = ViewBag.Firefoxcounts;  
  5.    var Safaricounts = ViewBag.Safaricounts;  
  6.