How to create chart with database data using MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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


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:


How to create chart with database data using MVC




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:

How to create chart with database data using MVC




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:

How to create chart with database data using MVC



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:

How to create chart with database data using MVC


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

          


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon