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

2

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

เมื่อเราได้ 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
5

การเขียนโค้ดใน .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 เล็กมากเลยมองไม่เห็น
6       7

เพื่อนๆท่านใดสนใจสามารถนำโค้ดไปลองเล่นได้ตามลิ้งครับ  www.autosoft.in.th/sourcecode/GooglePieChart.zip

TG Facebook Comments