Google Charts with MVC3

//Google Charts with MVC3

Google Charts with MVC3

By |2012-11-25T15:42:23+00:00November 25th, 2012|Categories: Programming|1 Comment

In this blog I am going to talk about how to add the powerfull Google Charts to your asp.net MVC 3 Application. Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.

Step 1: Create a new project

Go to File –> New Project –> Web –> Asp.Net MVC 3 Application

Step 2:Javascript files and libraries

add the following javascript files to head of your page

<script type="text/javascript" src="/Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Step 3: Add Client Javascript and Html

 <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');
        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: "Expenses, Salary For the current year"
        };

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

Note here we are making an ajax request to “/Home/GetData” to get data from server and assign data to google chart api

Step 4: Add ServerSide

  public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

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

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

            Company company = new Company() {  Expense = 200, Salary = 1000, Year = new DateTime(2012, 1, 1).ToString("yyyy/MM") };
            Company company1 = new Company() {  Expense = 300, Salary = 1100, Year = new DateTime(2012, 2, 1).ToString("yyyy/MM") };
            Company company2 = new Company() {  Expense = 240, Salary = 1200, Year = new DateTime(2012, 3, 1).ToString("yyyy/MM") };
            Company company3 = new Company() {  Expense = 100, Salary = 1300, Year = new DateTime(2012, 4, 1).ToString("yyyy/MM") };
            Company company4 = new Company() {  Expense = 40, Salary = 1100, Year = new DateTime(2012, 5, 1).ToString("yyyy/MM") };
            Company company5 = new Company() { Expense = 500, Salary = 1300, 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;
        }
    }

That’s all. You can download the sample from here

About the Author:

One Comment

  1. Javed bux 4th March 2013 at 7:56 am - Reply

    Hi
    good article but my chart is not working after publishing on server…………

    Thanks ……………

Leave A Comment Cancel reply