Sunday, 14 July 2013

Google Charts with MVC3


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
?
1
2
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>
?
1
2
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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

Post a Comment