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 Column and Stacked Column charts of Google in Asp.net Mvc. So let us start column 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 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.ColumnChart(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.

2 comments

  1. google chart with viewbage
    11/30/2017 6:52:20 AM

    Use It.

     In controller          

    ViewBag.List = JsonConvert.SerializeObject(obj);

     

    In view Page

     

    var data = '@Html.Raw(@ViewBag.list)';          

                result = $.parseJSON(data);

                for (var i = 0; i < result.length; i++) {

                    dt.addRow([result[i].month, result[i].count]);

                }



Leave a comment

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

you may also like