Introduction:

In this article we will learn how to use Google chart in asp.net mvc or how to bind Google chart data from database in mvc with example.

Description:

Google Chart is a powerful control for creating interactive charts. here we will discuss the Pie charts of Google in Asp.net Mvc. So let us start Pie chart type controls data binding from database step-by-step.

index.cshtml

 @{
    Layout = null;
}
 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title> Google Pie Chart</title>
<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>   
</head>
<body>    <script>      google.load("visualization", "1", { packages: ["corechart"] });
            $(function ()            {
      drawChart();            });
        function drawChart() {          $.post("/Tutorials/GetJsonData",
            function (result) { 
                var dt = new google.visualization.DataTable();
                dt.addColumn('string', 'MonthName');
                dt.addColumn('number', 'Count');
               
                for (var i = 0; i < result.length;i++) {
                    dt.addRow([result[i].month,result[i].count]);
                }
                var options = {
                    title: "Month wise calculation",
                    is3D: true
                };
              var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
              chart.draw(dt, options);               
             });      }
</script>
        <div id="chart_div" style="width: 700px; height: 400px;">
        </div>
    </body>
</html>

 

TutorialsController:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace Jquery.Controllers
{        public class TutorialsController : Controller        {
            public ActionResult Index()            {
            return View();            }
            [HttpPost]            public JsonResult GetJsonData()            {
            Month[] obj = new Month[]  
            {
                new Month()  
                {    
                  
                  month = "january"
                  count = 9 
                }, 
                new Month()  
                { 
                   
                    month = "february"
                             count = 11 
                }, 
                 new Month()  
                { 
                   
                    month = "march"
                    count =5 
                },  
                new Month()  
                { 
                   
                    month = "april"
                    count = 20 
                }  
               
            };
            return Json(obj, JsonRequestBehavior.AllowGet);               }
     }
        public class Month        {                public string month { get; set; }
                public int count { get; set; }
        }
}


Output:




I hope it will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.