Implement Chart using DotNet HighCharts in ASP.NET MVC

In this article, I am going to explain you how to implement chart using DotNet HighCharts in ASP.NET MVC. Here we will create chart using hard-coded value but in later articles I will explain draw chart from database. Below is step by step tutorial.

Creating ASP.NET MVC Empty Application

Now the next step is to create ASP.NET MVC empty application as shown below.
Go to FileNewProject. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .

Creating asp.net mvc 5 application

Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.

Selecting asp.net mvc 5 empty template

Now, a new project will be created as shown below.

Asp.net mvc 5 empty folder structure

Installing DotNet.HighCharts

Now the next step is DotNet.HighCharts. Go to TOOLS → Library Package Manager → Manage NuGet Packages for Solution.. and a new window will open. Type and search for DotNet.HighChart and click on Install button as shown below. Once installed successfully, you can check DotNet.HighChart in references folder.

Adding DotNet.HighCharts
Installing DotNet.HighCharts

You can also install by using Package Manager Console.
Go to TOOLS → Library Package Manager → Package Manager Console → write Install-Package DotNet.HighCharts and press enter. This will install DotNet.HighCharts in application.

Adding Controller

Next step is to add Controller to application. Add a new empty Controller class named as HomeController. After adding controller, a new action method will be created. Replace all code with below code.

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 WebApplication1.Controllers
{
  public class HomeController : Controller
  {
      //
      // GET: /Home/
    public ActionResult Index()
    {
      Highcharts myChart = new Highcharts("Chart");

      // initializing chart
      myChart.InitChart(new Chart()
      {
          // Define chart type
          Type = DotNet.Highcharts.Enums.ChartTypes.Column,
          ZoomType = ZoomTypes.Xy,
          BorderColor = System.Drawing.ColorTranslator.FromHtml("#6666ff"),
          BorderRadius = 5,
          BorderWidth = 1,
          BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#fff9e6")),//new BackColorOrGradient(System.Drawing.Color.Green),
          Style = "fontWeight: 'bold', fontSize: '17px'",

      });

      // setting title
      myChart.SetTitle(new Title()
      {
          Text = "HightChart in ASP.NET MVC"
      });

      // setting subtitle
      myChart.SetSubtitle(new Subtitle()
      {
          Text = "Month-Wise Sales by Each Person"
      });

      // setting XAxis
      myChart.SetXAxis(new XAxis()
      {
          Type = AxisTypes.Category,
          Title = new XAxisTitle() { Text = "Months", Style = "fontWeight: 'bold', fontSize: '17px'" },
          Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec" }
      });

      // setting YAxis Labels
      myChart.SetYAxis(new YAxis()
      {
          Title = new YAxisTitle()
          {
              Text = "Total Sales",
              Style = "fontWeight: 'bold', fontSize: '17px'"
          },
          ShowFirstLabel = true,
          ShowLastLabel = true,
          Min = 0
      });

      // Actual data in object array
      myChart.SetSeries(new Series[] 
      { 
          new Series
 
              Name = "Rahul"
              Data = new Data(new object[] { 25,30,85,90,35,75,99,100,10,5,15,40 }) ,
          }, 
          new Series() 
          { 
              Name = "Deepak"
              Data = new Data(new object[] { 75,99,125,30,85,90,35,100,10,5,15,40  }) 
          } ,
          new Series() 
          { 
              Name = "John"
              Data = new Data(new object[] { 75,99,5,15,40,125,30,85,90,35,100,10 }) 
          },
      }
      );

      // applying css
      myChart.SetLegend(new Legend
      {
          Enabled = true,
          BorderWidth = 2,
          BorderColor = System.Drawing.Color.Green,
          BorderRadius = 5,
          //BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFADD8E6"))

          //Align = HorizontalAligns.Right,
          //VerticalAlign = VerticalAligns.Top,
          //Y = 20,
          //Floating = true,

      });

      return View(myChart);
    }
  }
}

Adding View

Now the next step is to add View. Right click on Index ActionResult method, click Add View, give your View name as Index, Take Empty Template(Without Model) and Uncheck Partial view and layout page and click on Add.

Now, a View with Index name will be created. Go to Views/Home folder and open Index.cshtml file and replace all code with below code.

@{
    Layout = null;
}

@{
    ViewBag.Title = "Implement HighChart in ASP.NET MVC";
}

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

@model DotNet.Highcharts.Highcharts
@(Model)
Output can be seen as below.
Implement chart using DotNet HighCharts


Share this

Related Posts

Previous
Next Post »