การเขียน chart ตัวนี้ ประกอบด้วยโปรแกรม .dll ที่ทำหน้าที่สร้าง chart ตัวนี้ฟรีค่ะ ไปดาวน์โหลดและวิธีการใช้งานได้จาก link ด้านล่างนะคะ
http://www.codeproject.com/KB/cs/Org_Chart_Generator.aspx
ในตัวอย่างของเขาจะเป็น window application และข้อมูลที่เป็นตัวอย่างก็ add เข้าไปตรง ๆ ลองไปศึกษาดูค่ะ
ส่วนที่พี่นำมาใช้งานเป็น web application
และข้อมูลดึงมาจาก database
- ตอนแรกเลยก็ add reference OrgChartGenerator.dll ที่ website ก่อน
- add file .aspx มาตัวหนึ่ง ให้ทำหน้าที่เอาข้อมูลจาก db มา add เป็นข้อมูลเพื่อสร้าง chart
ซึ่งการดึงข้อมูลจาก db นั้น เขียนเป็น store proceedure ด้วยคำสั่ง sql ของบทความเลยค่ะ
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Magna.Data;
public partial class OrgChartImage_original : Magna.Component.MagnaBasePage
{
private OrgChartGenerator.OrgChart myOrgChart;
protected void Page_Load(object sender, EventArgs e)
{
this.Response.Clear();
this.Response.ContentType = "image/jpeg";
string memberID = Request["paraMemberID"]; //อันนี้จะรับพารามิเตอร์ว่าจะเรียก chart ของใคร
MemberProfileBAL bal = new MemberProfileBAL();
DataTable tbl = bal.LoadDataTableOrganizationStructure(memberID); //โหลดข้อมูลจาก db มาใส่ datatable
//OrgChartGenerator.OrgChart myOrgChart; จับข้อมูลจาก datatable ลงไปที่ chart
OrgChartGenerator.OrgData.OrgDetailsDataTable myOrgData = new OrgChartGenerator.OrgData.OrgDetailsDataTable();
foreach (DataRow row in tbl.Rows)
{
string id = Convert.ToString(row["memberID"]);
string memberName = Convert.ToString(row["memberName"]);
string sponsorID = Convert.ToString(row["sponsorID"]);
string position = Convert.ToString(row["memberPosition"]);
myOrgData.AddOrgDetailsRow(id, memberName, sponsorID, position);
// string memberID = "1001";
//myOrgData.AddOrgDetailsRow("1001", "Alon", "", "Manager");
//myOrgData.AddOrgDetailsRow("2001", "Yoram", "1001", "Team Leader");
//myOrgData.AddOrgDetailsRow("20011", "Yoram", "1001", "Team Leader1");
//myOrgData.AddOrgDetailsRow("20012", "Yoram", "1001", "Team Leader2");
//myOrgData.AddOrgDetailsRow("3003", "Noa", "3001", "SW Engineer");
//myOrgData.AddOrgDetailsRow("2002", "Dana", "1001", "Team Leader");
//myOrgData.AddOrgDetailsRow("3001", "Moshe", "2002", "SW Engineer");
//myOrgData.AddOrgDetailsRow("3002", "Oren", "2002", "SW Engineer");
}
myOrgChart = new OrgChartGenerator.OrgChart(myOrgData);
System.Drawing.Image OC = System.Drawing.Image.FromStream(myOrgChart.GenerateOrgChart(memberID, System.Drawing.Imaging.ImageFormat.Bmp));
OC.Save(this.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
OC.Dispose();
Session["OrgChart"] = myOrgChart;
}
protected void ImageMap1_Click(object sender, System.Web.UI.WebControls.ImageMapEventArgs e)
{
//determine if the mouse clicked on a box, if so, show the employee name.
string SelectedEmployee = "No employee";
SelectedEmployee = e.PostBackValue;
Response.Write(SelectedEmployee);
}
}
เมื่อได้ตัวสร้าง chart แล้ว ก็สร้าง aspx file อีกตัวหนึ่งมาเรียกใช้งาน
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestShowOrgChartGenerator.aspx.cs" Inherits="TestShowOrgChartGenerator" %>
Untitled Page
- ก็ได้ chart หน้าตาอย่างที่เห็น