Create chart using highchart in MVC

In this article I am going to explain how to create chart using Highchart in MVC

In previous article I have explained how to create chart with database data usingMVC, how to upload and download File using MVC and how to show/display messagein MVC.

Description:

I want to show state wise population in chart using Highchart.

 Implementation:

I have created a table Tb_Population and insert some dummy record into it.

Create a new mvc project. First of all install Highcharts using package manager console. Run the below given command:

Install-Package DotNet.Highcharts

Model

    public partial class Tb_Population

    {

        public int Id { get; set; }

        public string StateName { get; set; }

        public Nullable<long> TotalPopulation { get; set; }

    }

Add controller

Add empty controller to project. Import the Highchart namespaces.

using DotNet.Highcharts;

using DotNet.Highcharts.Helpers;

using DotNet.Highcharts.Options;

using DotNet.Highcharts.Enums;

using DotNet.Highcharts.Attributes;

Complete code of controller

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using DotNet.Highcharts;

using DotNet.Highcharts.Helpers;

using DotNet.Highcharts.Options;

using DotNet.Highcharts.Enums;

using DotNet.Highcharts.Attributes;

using MVC_Project.Models;

namespace MVC_Project.Controllers

{

    public class ChartController : Controller

    {

        DemoEntities1 db = new DemoEntities1();

        //

        // GET: /Chart/

public ActionResult Index()

        {

            var statepopulation = db.Tb_Population.ToList();

            var statename = statepopulation.Select(i => i.StateName).ToArray();

            var population = statepopulation.Select(i => new object[] { i.TotalPopulation }).ToArray();

            var chart = new Highcharts("Chart")  

            //set credit to hide highchart wtaremark

                .SetCredits(new Credits{Enabled = false})

            //legend

             .SetLegend(new Legend

             {

                 Align = HorizontalAligns.Right,

                 VerticalAlign = VerticalAligns.Top,

                 Y = 20,

                 Floating = true,

                 BorderWidth = 0

             })

            //Chart title

            .SetTitle(new Title {Text="State wise Population"})

            //Chart type

            .InitChart(new Chart {DefaultSeriesType = ChartTypes.Bar})

                .SetXAxis(new XAxis { Categories = statename })

                .SetSeries(new Series {Data = new Data(population)});

            return View(chart);

        }  

}

}

Add view

Add view for index action.  After that link CDN of Jquery and highchart js. Add the chart to display:

@model DotNet.Highcharts.Highcharts

@(Model)

Complete code of view

@{

    ViewBag.Title = "chart tutorial in mvc";

}

<h2>Chart tutorial</h2>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/modules/exporting.js"></script>

@model DotNet.Highcharts.Highcharts

@(Model)