Wednesday, 28 December 2016

Google Chart In MVC using JQuery

Tags



My Model:-Name(Emp_tb)

namespace final1.Models
{
    using System;
    using System.Collections.Generic;
 
    public partial class Emp_tb
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public Nullable<int> Age { get; set; }

    }
}




My Controller:- Name(ChartController)

namespace final1.Controllers
{
    public class ChartController : Controller
    {
        DemoEntities db = new DemoEntities();
        // GET: Chart

        public ActionResult Index()
        {
            return View();
        }
        public JsonResult Chart()
        {
            var data = db.Emp_tb.ToList();
            return Json(data, JsonRequestBehavior.AllowGet);

        }
    }
}


My View(index.cshtml)

For reference see the below link :
https://developers.google.com/chart/interactive/docs/gallery/barchart

@{
    ViewBag.Title = "Chart";
}

<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 src="https://www.gstatic.com/charts/loader.js"></script>


<script type="text/javascript">
 
    google.load("visualization", "1", { packages: ["corechart"] });

 
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        alert("chart");
        debugger;
        //controller name
        $.post('/Chart/Chart/', {}, function (data) {


            var dt = new google.visualization.DataTable();

            dt.addColumn('string', 'Name');
            dt.addColumn('number', 'Age');

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


            //var options = {
            //    title: 'Indian Language Use',
            //    legend: 'none',
            //    pieSliceText: 'label',
            //    slices: {
            //        4: { offset: 0.2 },
            //        12: { offset: 0.3 },
            //        14: { offset: 0.4 },
            //        15: { offset: 0.5 },
            //    }
            //};


               

            //Normal
            var options = {
                title: "Name and Age",
                 //3D & 2D
                 is3D : false
             //donut chart //   pieHole: 0.4
          };


            // Rotating pie chart

            //var options = {
            //    legend: 'none',
            //    pieSliceText: 'label',
            //    title: 'Swiss Language Use (100 degree rotation)',
            //    pieStartAngle: 45,
            //};


            // donit chart
            //var options = {
            //    pieHole: 0.5,
            //    pieSliceTextStyle: {
            //        color: 'black',
            //    },
            //    legend: 'none'
            //};


            //Bar graph
            //var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
            //chart.draw(dt, options);

            //pie chart 3-D
            var chart = new google.visualization.PieChart(document.getElementById('chart'));
            chart.draw(dt, options);
        });
    }
</script>

<fieldset>
    <legend>Chart from google Chart</legend>
    <div id="chart" style="height: 500px"></div>
</fieldset>


EmoticonEmoticon