DotNet.Highcharts Report in MVC 4

If you want beautiful chart report like below in MVC 4, DotNet.Highcharts is one of the solution. It’s a javascript solution, and must easy to understand and use in the web application.

In this blog, I will show you step by step if your solution is MVC 4.

 

Step 1, Download and install DotNet.Hightcharts into your Visual Studio solution from either Manage NuGet Packages window or from Package Manager Console

Install-Package DotNet.Highchars

 

Step 2, Verify installed package:

1. DLL reference in References folder

2. Highcharts-3.0.1 folder and javascript files in Scripts folder

 

Step 3, Add two script reference, jQuery.js and Modernizr.js (version doesn’t matter, my jQuery 1.7.1 & modernizr 2.5.3)

 

Note:

The place of these 2 scripts is quite important, I spend around 3 hours to realize it. It must happen BEFORE Body Section. Later, I will show you why.

 

Step 4, Create a new Report controller and Index Action.

public ActionResult Index()
{
    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
        .SetXAxis(new XAxis
                    {
                        Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                    })
        .SetSeries(new Series
                    {
                        Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                    });

    return View(chart);
}

 

Step 5, Add a BundleConfig in BundleConfig.cs of App_Start folder, "~/Scripts/Highcharts-3.0.1/js/highcharts.js"

 

Step 6, Add a new View, Index with strongly-typed Hightcharts Model class

 

Step 7, In the Index.cshtml, add code of part 2 & 3

@(Model)

@section Scripts {
    @Scripts.Render("~/bundles/HighChart")
}

 

Step 8, Complie and run the solution, click on Report to show the chart

 

Step 9, View HTML source to understand why jQuery & Modernizr must BEFORE body section.

It’s because DotNet.Highcharts will generate javascript code (point 2 in below picture) and the place is between body section.

 

Addtional Reference:

https://dotnethighcharts.codeplex.com/