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 File → New → Project. 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 .
Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.
Now, a new project will be created as shown below.
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.
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;
usingDotNet.Highcharts.Enums;
usingDotNet.Highcharts.Helpers;
usingDotNet.Highcharts.Options;
using System;
usingSystem.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespaceWebApplication1.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. |
|
