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 Total",
                    is3D: true
                };
              var chart = new google.visualization.LineChart(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:


google line chart in asp.net mvc


I hope it will help to you.

comments


Leave a comment

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

You may also like