.NET Highcharts With ASP.NET MVC

This article will demonstrate how to implement .NET Highcharts with ASP.NET MVC application.

Highcharts is a JavaScript library to implement charting functionality like a 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 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.



Just follow the below steps to complete this demonstration.

STEP 1 Create a project in ASP.NET MVC

Open Visual Studio 2015 and click on "New Project". From the "New Project" window, choose web from the Installed Templates and select ASP.NET Web Application. Next, provide a suitable name like “HighchartsWithMVC”, choose location, and click OK.

Next, the Windows will ask to select project template, so we just need to select MVC and change authentication as “No Authentication” and click the OK button. It will take a few seconds to create the application.

Now, our ASP.NET MVC application is ready.

STEP 2 Install .NET Highcharts

To install DotNet.Highcharts in your application, just right click your project from Solution Explorer and choose "Manage NuGet Packages". It will open the NuGet Package Manager from where we can search the required packages. Search for “Dotnet.Highcharts” from the search textbox as following and install it with the latest version.

We can also install it from Package Manager console. Go to "Tools: menu and select NuGet Package Manager and choose “Package Manager Console”.



To install this package, just type the following command.

Install-Package DotNet.Highcharts



It will fetch all the dependencies and install it.

If you open the Solution Explorer, you will find the Highcharts script in Scripts folder. You can also find the reference of DotNet.Highcharts in the References section.



STEP 3 Create Highcharts

Now, it is time to create a chart using Highcharts. Therefore, for this demonstration, I will create a column chart that shows the comparison of runs made in respective years by Sachin and Dhoni. This example is only for explaining.

First, I'm going to create a chart to initialize with basic configuration, such as the type of chart, background color, border etc., and provide a suitable name for it.

Highcharts columnChart = new Highcharts("columnchart");

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

        });

To set title and sub title, we have to define text for chart.

columnChart.SetTitle(new Title()
       {
           Text = "Sachin Vs Dhoni"
       });

       columnChart.SetSubtitle(new Subtitle()
       {
           Text = "Played 9 Years Together From 2004 To 2012"
       });

We can also define the axis of the chart like what should render on xAxis and yAxis. Using SetXAxis and SetYAxis method, we can define the category of the axis, type, and title as well.

columnChart.SetXAxis(new XAxis()
        {
            Type = AxisTypes.Category,
            Title = new XAxisTitle() { Text = "Years", Style = "fontWeight: 'bold', fontSize: '17px'" },
            Categories = new[] { "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012" }
        });

        columnChart.SetYAxis(new YAxis()
        {
            Title = new YAxisTitle()
            {
                Text = "Runs",
                Style = "fontWeight: 'bold', fontSize: '17px'"
            },
            ShowFirstLabel = true,
            ShowLastLabel = true,
            Min = 0
        });

To set the data with series, we can use SetSeries() method where we need to provide a name for series and data which will bind with series.

columnChart.SetSeries(new Series[]
 {
     new Series{

         Name = "Sachin Tendulkar",
         Data = new Data(new object[] { 812, 412, 628, 1425, 460, 972, 204, 513, 315 })
     },
     new Series()
     {
         Name = "M S Dhoni",
         Data = new Data(new object[] { 19, 895, 821, 1103, 1097, 1198, 600, 764, 524, })
     }
 }

The whole code for Index action for Home controller is as following.

using DotNet.Highcharts;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Options;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace HighchartsWithMVC.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            Highcharts columnChart = new Highcharts("columnchart");

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

            });

            columnChart.SetTitle(new Title()
            {
                Text = "Sachin Vs Dhoni"
            });

            columnChart.SetSubtitle(new Subtitle()
            {
                Text = "Played 9 Years Together From 2004 To 2012"
            });

            columnChart.SetXAxis(new XAxis()
            {
                Type = AxisTypes.Category,
                Title = new XAxisTitle() { Text = "Years", Style = "fontWeight: 'bold', fontSize: '17px'" },
                Categories = new[] { "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012" }
            });

            columnChart.SetYAxis(new YAxis()
            {
                Title = new YAxisTitle()
                {
                    Text = "Runs",
                    Style = "fontWeight: 'bold', fontSize: '17px'"
                },
                ShowFirstLabel = true,
                ShowLastLabel = true,
                Min = 0
            });

            columnChart.SetLegend(new Legend
            {
                Enabled = true,
                BorderColor = System.Drawing.Color.CornflowerBlue,
                BorderRadius = 6,
                BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFADD8E6"))
            });

            columnChart.SetSeries(new Series[]
            {
                new Series{

                    Name = "Sachin Tendulkar",
                    Data = new Data(new object[] { 812, 412, 628, 1425, 460, 972, 204, 513, 315 })
                },
                new Series()
                {
                    Name = "M S Dhoni",
                    Data = new Data(new object[] { 19, 895, 821, 1103, 1097, 1198, 600, 764, 524, })
                }
            }
            );

            return View(columnChart);
        }
}

STEP 4 Rendering Highcharts on UI

Just move to Index.cshtml of home controller and add the following code that will render this column chart on UI.

@model DotNet.Highcharts.Highcharts

@{
    ViewBag.Title = "Highcharts Examples";
}

<div class="jumbotron">
    <h3>DotNet Highcharts Example in Asp.Net MVC</h3>
    <p><a href="http://dotnet.highcharts.com/" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>

<div class="row">
    <div>

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

To render Highchart on client side, it requires Highcharts.js. So, just add the Highchart.js on _Layout.cshtml file as following.

Note - Please make sure that the jQuery is initialized before body tag otherwise it will throw an error.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>


    @Scripts.Render("~/bundles/bootstrap")
    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Once everything is completed, run the application. It will render a column comparison chart as following.

Conclusion

Today, we have seen server side implementation of dotnet highcharts with asp.net mvc application.

I hope this post helps you. Please put your feedback using comments, which will help me improve for the next post. If you have any doubts, please ask in the comments section.