Draw Pie chart using Google chart in MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Draw Pie chart using Google chart in MVC

In this article I am going to explain how to draw Pie chart using Google chart in MVC application.


Draw Pie chart using Google chart in MVC

Implementation:
I have created a table tb_population and insert some dummy records.
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 new empty controller to project and create json action method to retrieve data from database..

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;
using System.Web.WebPages.Html;
using System.Web.Mvc.Html;

namespace MVC_Project.Controllers
{
    public class ChartController : Controller
    {
        DemoEntities1 db = new DemoEntities1();
        //
        // GET: /Chart/
        public ActionResult Index()
        {

            return View();
        }
        public JsonResult Chartd()
        {
            var data = db.Tb_Population.ToList();
            return Json(data,JsonRequestBehavior.AllowGet);

        }
            }
}

Add view
Add view for index action.

Complete code of index.cshtml:
@{
    ViewBag.Title = "Google Chart API";
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        $.post('/Chart/Chartd/', {}, function (data) {
            var dt = new google.visualization.DataTable();

            dt.addColumn('string', 'StateName');
            dt.addColumn('number', 'TotalPopulation');

            for (var i = 0; i < data.length; i++) {
                dt.addRow([data[i].StateName, data[i].TotalPopulation]);
            }

            var options = {
                title: "State wise Population",
                is3D : true
            };

            var chart = new google.visualization.PieChart(document.getElementById('chart'));
            chart.draw(dt, options);
        });

    }
</script>

<fieldset>
    <legend>Google Chart API tutorial</legend>
    <div id="chart" style="height: 400px"></div>
</fieldset>

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