Use Dotnet.HighCharts for ASP.NET MVC4

If you are working on ASP.NET MVC4 and want to have rich charts and trends for your application, DotNet.HighCharts is a great option. You don’t have to manually write all necessary Javascript,JQuery and other stuffs. You can directly code using C# and DotNet.HighChart will convert it for you. All you have to pass the chart as a model data to the view by the controller.

Here I will demonstrate a simple example to create an area chart using ASP.NET MVC4 and DotNet.HighChart.

You can download the librad samples from http://dotnethighcharts.codeplex.com/.

step 1. Create a MVC application project using ASP.NET MVC4 web application template.Select “Basic” as project template and “Razor” View Engine.

Step 2. Install DotNet.HighCharts using Nuget. Go to package manager console and use the following command:

Install-Package DotNet.HighCharts

Step 3: Create a new Controller “HomeController” . we will be using default Empty MVC controller template to create the controller.

Step 4: Add a view “Index”. Leave all the default settings, as shown below.

step 5: Add reference to javascript files (Jquery 1.5 and highChart.js) to your index view.

<script src="~/Scripts/jquery-1.5.1.min.js"></script>
<script src="~/Scripts/Highcharts-2.2.1/js/highcharts.js"></script>

Note: if you add higher versions of jquery (Such as 1.8 ) ,  there might be some issue, and the chart might not be visible.So, you have to manually add jquery 1.5 for best result with Highcharts-2.2.1

Step 5:  use the following code for creating a chart model inside HomeController.cs

   public ActionResult Index()
        {
            //Create Series 1
            var series1 = new Series();
            series1.Name = "Area Series 1";
            Point[] series1Points =
                {
                    new Point() {X = 0.0, Y = 0.0},
                    new Point() {X = 10.0, Y = 0.0},
                    new Point() {X = 10.0, Y = 10.0},
                    new Point() {X = 0.0, Y = 10.0}
                };
          series1.Data = new Data(series1Points);

            //Create Series 2
           var series2 = new Series();
            series2.Name = "Area Series 1";
            Point[] series2Points =
                {
                    new Point() {X = 5.0, Y = 5.0},
                    new Point() {X = 15.0, Y =5.0},
                    new Point() {X = 15.0, Y = 15.0},
                    new Point() {X = 5.0, Y = 15.0}
                };
          series2.Data = new Data(series2Points);

            //Create List of Series and Add both series to the collection
            var chartSeries = new List<Series>();
            chartSeries.Add(series1);
            chartSeries.Add(series2);

            //Create chart Model
            var chart1 = new Highcharts("Chart1");
            chart1
                .InitChart(new Chart(){DefaultSeriesType = ChartTypes.Area})
                .SetTitle(new Title() {Text = "Chart1"})
                .SetSeries(chartSeries.ToArray());

            //pass Chart1Model using ViewBag
            ViewBag.Chart1Model = chart1;

            return View();
        }

Here I am adding two series using SeriesArray and passed into the .SetSeries. You can set the default series chart type by using DefaultSeriestype or you can set it to individual series also.

You can pass the chart model using ViewBag,ViewData or directory through View Constructor. I am using ViewBag here.

Step 6: Add the following code to the “index” view

@((DotNet.Highcharts.Highcharts)ViewBag.Chart1Model)

to display the chart on your view.

The result is shown below:

08-05-2013-HighChartResult

You can use HighCharts to create great trends. You can tweak it as per your need.

Advertisements

Abhishek is a software architect, developer and Pluralsight author. He is very passionate about working with data especially in the field of machine learning. He has authored several courses on machine learning which are available on Pluralsight. He has been involved in several software development projects, which involves various machine learning techniques. His work focuses on architecting and developing applications especially in the area of monitoring, optimization, pattern recognition, and fault detection. His professional interests include software design patterns, agile practices, and various technologies such as WCF, WF, WPF, Silverlight, SQL Server, Entity Framework and ASP.NET MVC. He is also a Microsoft Certified Professional (HTML5, Javascript, CSS3).

Tagged with: , , , ,
Posted in ASP.NET MVC, C#, Technical
3 comments on “Use Dotnet.HighCharts for ASP.NET MVC4
  1. Dhaval says:

    It helped create a chart. Indeed a good article..
    But I could not understand some parts. Can you help me ??

  2. Massimo says:

    Hi, Thanks for your post. It works fine !
    I was wandering how to add a simple series like this (he doesn’t work).

    string bufferStr = “100.0,110.0,120.0,150.0”;
    string[] bufferArray = bufferStr.Split(‘,’);

    var series4 = new Series();
    series4.Name = “Area Series 4”;
    series4.Data = new Data(bufferArray);

    Thanks,
    Massimo

  3. Vahap says:

    hey,
    when i tried to download the package, i got that error.
    Do you think this problem based on internet connection ?
    Install-Package : The operation has timed out
    At line:1 char:16
    + install-package <<<< DotNet.HighCharts
    + CategoryInfo : NotSpecified: (:) [Install-Package], WebException
    + FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About Me


Software Architect, Developer & Pluralsight Author

Software Architect, Developer & Pluralsight Author, Twitter Handle :

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 116 other followers

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my current or previous employer's view in anyway.
Live Feed
%d bloggers like this: