Thursday, November 24, 2016

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. 

          


1 comment:

  1. using System.Linq;
    using System.Web.Mvc;
    using System.Web.Helpers;
    using WebApplication6.Controllers;

    namespace firstdbentities.Controllers
    {
    public class HomeController : Controller

    {
    firstdbEntities db= new firstdbEntities();
    //
    // GET: /Chart/
    public ActionResult Index()
    {
    var chart = db.piechart.ToList();
    var population = new Chart(width: 600, height: 600, theme: ChartTheme.Blue)
    .AddTitle("Health Checkup")
    .AddSeries(
    chartType: "pie",
    xValue: chart, xField: "Month",
    yValues: chart, yFields: "Values"
    ).Write();
    return null;
    }

    }
    }



    error:

    Error CS1061 'object' does not contain a definition for 'ToList' and no accessible extension method 'ToList' accepting a first argument of type 'object' could be found (are you missing a using directive or an assembly reference?)

    ReplyDelete