ประยุกต์ใช้ google chart ใน web report

Google Chart คือ กราฟชนิดต่างๆที่ทาง google ได้เตรียมหรือทำขึ้นมาให้เราสามารถนำ script ที่เป็นภาษา java script มาประยุกต์ใช้กับระบบงานของเราได้ตามต้องการ เช่น line chart, bar chart, scatter chart, maps, gauge chart เป็นต้น โดยเราสามารถดูรายละเอียดเพิ่มเติมได้จาก Chart Gallery ตามลิ้ง https://developers.google.com/chart ตัวอย่างรูปแบบ Chart

นอกจากนี้เรายังสามารถทดสอบ run script ของเราก่อน โดยคลิกไปที่ปุ่ม ซึ่งอยู่ใต้ chart และเราสามารถทดลองปรับแต่ง script ซึ่งมี 4 ส่วนคือ html, java script, css และ result เพื่อลองรันก่อนนำ script ไปใช้งาน ดังรูป

เมื่อเราได้ Script Chart ที่เราต้องการแล้ว ต่อไปเรามาดูวิธีการเขียนโปรแกรมดึงข้อมูลจากฐานข้อมูล มาแสดงผลใน Google Chart กันนะครับซึ่งในที่นี้ผมจะใช้ภาษา C#.NET ดึงข้อมูลจาก SQL Server เพื่อมาทำการแสดงผลข้อมูลใน Pie Chart ก่อนอื่นเตรียมข้อมูลโดยผมจะใช้ข้อมูลจากฐานข้อมูล “AdventureWorksDW2014” สามารถดาวน์โหลดได้จากลิ้ง http://msftdbprodsamples.codeplex.com

select d.CalendarYear,sum(OrderQuantity * UnitPrice) as amount from [dbo].[FactInternetSales] f left join[dbo].[DimProduct] p on f.ProductKey = p.ProductKey left join[dbo].[DimDate] d on f.OrderDateKey = d.DateKey group by d.CalendarYear order by d.CalendarYear

ข้อมูลที่ได้จาก Query

การเขียนโค้ดใน .Net จะแบ่งเป็น 2 ส่วนดังรายละเอียด
1. Code Design {html,script}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="//www.google.com/jsapi"></script>
  <script type="text/javascript">
          google.load('visualization', '1', { packages: ['corechart'] });
  </script>
  <script type="text/javascript">
    $(document).ready(function () {
    $.ajax({
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    url: 'Default.aspx/getData',   //เรียก [WebMethod] getData ที่เตรียมไว้ใน code behind
    data: '{}',
    success:function (response) {
       drawChart(response.d);
    }
   });
  })function drawChart(dataValues) {
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Column Name');
     data.addColumn('number', 'Column Value');
     for (var i = 0; i < dataValues.length; i++) {
         data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
     }
     new google.visualization.PieChart(document.getElementById('visualization1')).  //รูปแบบกราฟ PieChart  
     draw(data, { title: "Google Chart With C#" });
  }
  </script>
 </head><body>
 <form id="form1" runat="server">
     <table style="width:100%;">
      <tr>
         <td><div id="visualization1" style="width: 600px; height: 350px;"></div></td>
      </tr>
     </table>
  </form>
 </body>
</html>

2. Code Behind {c#}

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 using System.Data;
 using System.Data.SqlClient;
 using System.Web.Services;
 public partial class _Default : System.Web.UI.Page
 {
 protected void Page_Load(object sender, EventArgs e) { }
 [WebMethod]
 public static List<Data> getData()
 {
     SqlConnection conn = new SqlConnection("Data Source=MR-JOE;Initial Catalog=AdventureWorksDW2014;Integrated Security=True;User ID=sa;Password=P@ssw0rd");
     DataSet ds = new DataSet();
     DataTable dt = new DataTable();
     conn.Open();
     string cmdstr = " select d.CalendarYear,sum(OrderQuantity * UnitPrice) as Amount from [dbo].[FactInternetSales] f ";
            cmdstr += " left join[dbo].[DimProduct] ";
            cmdstr += " p on f.ProductKey = p.ProductKey ";
            cmdstr += " left join[dbo].[DimDate] ";
            cmdstr += " d on f.OrderDateKey = d.DateKey ";
            cmdstr += " group by d.CalendarYear ";
            cmdstr += " order by d.CalendarYear ";
     SqlCommand cmd = new SqlCommand(cmdstr, conn);
     SqlDataAdapter da = new SqlDataAdapter(cmd);
     da.Fill(ds);
     dt = ds.Tables[0];
     List<Data> dataList = new List<Data>();
     string cat = "";
     int val = 0;
     foreach (DataRow dr in dt.Rows)
     {
        cat = dr[0].ToString();
        val = Convert.ToInt32(dr[1]);
        dataList.Add(new Data(cat, val));
     }
        return dataList;
    }
 }
 public class Data
 {
      public string ColumnName = "";
      public int Value = 0;
      public Data(string columnName, int value)
      {
         ColumnName = columnName;
         Value = value;
      }
 }

เมื่อเราทำการ run โปรแกรมของเราจะแสดงผล Pie Chart ได้ดังรูปด้านล่าง และถ้าเอา Mouse ไป Over ที่ Chart จะแสดงยอดรายได้ของปีนั้นๆ ส่วนปี 2010 และ 2014 มียอดน้อยมากทำให้เส้น Chart เล็กมากเลยมองไม่เห็น