Dot Net Sea: working with google chart in mvc

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Mvcchart.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public JsonResult GetData()
        {
            return Json(CreateCompaniesList(), JsonRequestBehavior.AllowGet);
        }

        private IEnumerable<Company> CreateCompaniesList()
        {
            List<Company> companies = new List<Company>();

            Company company = new Company() { Expense = 1200, Salary = 2000, Year = new DateTime(2012, 1, 1).ToString("yyyy/MM") };
            Company company1 = new Company() { Expense = 1300, Salary = 2100, Year = new DateTime(2012, 2, 1).ToString("yyyy/MM") };
            Company company2 = new Company() { Expense = 1240, Salary = 2000, Year = new DateTime(2012, 3, 1).ToString("yyyy/MM") };
            Company company3 = new Company() { Expense = 1100, Salary = 3300, Year = new DateTime(2012, 4, 1).ToString("yyyy/MM") };
            Company company4 = new Company() { Expense = 140, Salary = 1100, Year = new DateTime(2012, 5, 1).ToString("yyyy/MM") };
            Company company5 = new Company() { Expense = 1500, Salary = 1900, Year = new DateTime(2012, 6, 1).ToString("yyyy/MM") };

            companies.Add(company);
            companies.Add(company1);
            companies.Add(company2);
            companies.Add(company3);
            companies.Add(company4);
            companies.Add(company5);

            return companies;
        }


    }
}
=================================================================
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.get('/Home/GetData', {},
    function (data) {
        var tdata = new google.visualization.DataTable();

        tdata.addColumn('string', 'Year');
        tdata.addColumn('number', 'Salary M');
        tdata.addColumn('number', 'Expense');

        for (var i = 0; i < data.length; i++) {
            tdata.addRow([data[i].Year, data[i].Salary, data[i].Expense]);
        }

        var options = {
            title: "mukesh Salary For the current year"
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(tdata, options);
    });
        }
    </script>
</head>
<body>
    <div>
        <div id="chart_div" style="width: 900px; height: 500px;">
        </div>
    </div>
</body>
</html>
======================================================================
class

public class Company
    {
       public int Expense {get;set;}
        public int Salary {get;set;}
        public string Year { get; set; }
    }
======================================================
Result

Dot Net Sea

Saturday, 6 September 2014

working with google chart in mvc

No comments:

Post a Comment