.NET Highcharts With ASP.NET MVC

In this article we will see how to implement DotNet Highcharts with Asp.Net MVC application.

Highcharts is a JavaScript library to implement charting functionality like line chart, bar chart, column chart etc. We can create different types of charts using highcharts. Today with this article, I will try to show you how to create Highcharts in Asp.Net MVC from server side.

We see the chart using ASP.NET MVC from the server side. Here, server-side means that everything will be created on the server and only the displaying part will happen at the client side. You can find more details on http://dotnet.highcharts.com/

Step-1: File New Project >> ASP .NET Web application

Choose MVC as application

Step-2: Install .NET Highcharts using Nuget Package Manger

You can isntall the package using Nuget Package manager Console also like below;

Install-Package DotNet.Highcharts

Step-3: Now, it is time to create a chart using Highcharts. Therefore, for this demonstration, we will create a column chart that shows the "Best batting average in successful ODI run-chases".

Initialize the Chart

      Highcharts columnChart = new Highcharts("columnchart");  
       columnChart.InitChart(new Chart()  
       {  
         Type = DotNet.Highcharts.Enums.ChartTypes.Column,  
         Style = "fontWeight: 'bold', fontSize: '17px'",  
         Width=900,  
         BackgroundColor = new BackColorOrGradient(System.Drawing.Color.AliceBlue),  
         BorderColor = System.Drawing.Color.LightBlue,  
         BorderRadius = 0,  
         BorderWidth = 2  
       });  

Set Title, X-Axis and Y-Axis

columnChart.SetTitle(new Title()  
       {  
         Text = "Best batting average in successful ODI run-chases"  
       });  
       columnChart.SetXAxis(new XAxis()  
       {  
         Type = AxisTypes.Category,  
         Title = new XAxisTitle() { Text = "Batsman", 

            Style = "fontWeight: 'bold', fontSize: '17px'" },  
         Categories = new[] { "MS Dhoni", "Virat Kohli", "Michael Bevan", "Dinesh Chandimal", "AB DE Villiers", "Joe Root", "Mike Hussy", "Michael Clarke", "Angelo Mathews", "Graham Thorpe" },  
       });  
       columnChart.SetYAxis(new YAxis()  
       {  
         Title = new YAxisTitle()  
         {  
           Text = "Average Wining Runs",  
         },  
           ShowFirstLabel = true,  
           ShowLastLabel = true,  
           Min = 0  
       }); 

Step-4: Add the SeriesData to show the Chart like below

columnChart.SetSeries(new Series[]  
       {  
         new Series{  
           Name = "Wining average",  
           Data = new Data(new object[] { 99.85,99.04,86.25,85.30,82.77,77.80,74.10,73.86,70.75,70.75  })  
         },  
       }

Step-5: Change the "Index.cshtml" as like below

<div class="row">  
   <div>  
     <div class="col-md-12 col-md-6">  
       @(Model)  
     </div>  
   </div>  
   </div>  

Step-6: Also make the change in "Layout.cshtml" like below, add the HighChart JS file.

<script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>

Step-7: All the changes has been changed, now run the application and see the output.

 Please find the Source code in  Github







Summary

 In this tutorial we discussed about how to create .NET Highcharts using ASP .NET MVC in Server Side. If have any question related to this topic then give your comments.