How to create chart with database data using MVC

In this article I am going to explain how to create chart with database using MVC

In previous articles I have explained how to upload and download File using MVC, howto show/display message in MVC and how to get Date, Time, Day, Month, Year,Hour, Minute and Second from date in Sql server.

Description:

I want to show state wise population of Indian states on chart. We have lot of options like jquery based high charts and Jqplot, chart control, chart web helpers etc. You can create more than 30 types of charts like area, bar, column, bubble etc. using chart web helpers. In this tutorial I am going to implement chart using web helpers.

 Implementation:

I have created table Tb_Population. Insert some records into it.

Id	int
StateName	varchar(200)
TotalPopulation	bigint

Now add the web helper’s library to project.  Run the below command in package manager console:

Install-Package microsoft-web-helpers

Model (Tb_Population.cs) :

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.

Complete code of controller:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Helpers;

using MVC_Project.Models;

namespace MVC_Project.Controllers

{

    public class ChartController : Controller

    {

        DemoEntities1 db = new DemoEntities1();

        //

        // GET: /Chart/

        public ActionResult Index()

        {

            var chart = db.Tb_Population.ToList();

            var population = new Chart(width: 600, height: 600, theme: ChartTheme.Blue)

            .AddTitle("State wise Population")

            .AddSeries(

            chartType: "Column",

            xValue: chart,xField:"StateName",

            yValues:chart,yFields:"TotalPopulation"

            ).Write();

            return null;

        }

            }

}

Add View

After the add view for index action.

Source of Index.cshtml

@{

    ViewBag.Title = "chart tutorial in mvc";

}

<h2>Chart tutorial</h2>

<img src="@Url.Action("Column")" alt="Population State wise" />

Output:

Bubble Chart example:

Controller code:

public ActionResult Index()

        {

            var chart = db.Tb_Population.ToList();

            var population = new Chart(width: 600, height: 600, theme: ChartTheme.Blue)

            .AddTitle("State wise Population")

            .AddSeries(

            chartType: "bubble",

            xValue: chart,xField:"StateName",

            yValues:chart,yFields:"TotalPopulation"

            ).Write();

            return null;

        }

View:

@{

    ViewBag.Title = "chart tutorial in mvc";

}

<h2>Chart tutorial</h2>

<img src="@Url.Action("Column")" alt="Population State wise" />

Output:

Bar chart example:

Controller code:

  public ActionResult Index()

        {

            var chart = db.Tb_Population.ToList();

            var population = new Chart(width: 600, height: 600, theme: ChartTheme.Blue)

            .AddTitle("State wise Population")

            .AddSeries(

            chartType: "bar",

            xValue: chart,xField:"StateName",

            yValues:chart,yFields:"TotalPopulation"

            ).Write();

            return null;

        }

View

@{

    ViewBag.Title = "chart tutorial in mvc";

}

<h2>Chart tutorial</h2>

<img src="@Url.Action("Column")" alt="Population State wise" />

Output:

Pie chart example:

Controller code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Helpers;

using MVC_Project.Models;

namespace MVC_Project.Controllers

{

    public class ChartController : Controller

    {

        DemoEntities1 db = new DemoEntities1();

        //

        // GET: /Chart/

        public ActionResult Index()

        {

            var chart = db.Tb_Population.ToList();

            var population = new Chart(width: 600, height: 600, theme: ChartTheme.Blue)

            .AddTitle("State wise Population")

            .AddLegend()

            .AddSeries(

            chartType: "pie",

            xValue: chart,xField:"StateName",

            yValues:chart,yFields:"TotalPopulation"

            ).Write();

            return null;

        }

            }

}

View:

@{

    ViewBag.Title = "chart tutorial in mvc";

}

<h2>Chart tutorial</h2>

<img src="@Url.Action("Column")" alt="Population State wise" />

Output:

As I earlier you can create more than 30 types of chart. You have to set chartype.