ایجاد نمودارهای میله ای در زمان اجرا

در این مثال میخواهیم نحوه ایجاد نمودارهای میله ای در زمان اجرا را آموزش دهیم. در این برنامه از یک شیء Repeater برای اتصال برنامه به پایگاه داده و همچنین یک حقه معروف HTML برای کشیدن تصویر استفاده میکنیم تا بتوانیم نمودار میله ای مورد نظر را ایجاد کنیم.

ابتدا در صفحه aspx یک شیء Repeater اضافه میکنیم. سپس در کد پشت صفحه یک منبع داده ها به repeater مورد نظر مقید میکنیم و سپس برای تنظیم مقدار هر میله در نموداری میله ای، در رخداد ItemDataBound کدهای مربوطه را درج میکنیم:

<asp:Repeater ID="repChartBar" Runat="server"
OnItemDataBound="repChartBar_ItemDataBound">
<ItemTemplate>
<tr>
<td class="labelText">
<%#Eval("Chapter")%>&nbsp;
</td>
<td class="labelText">
<img id="imgChartBar" runat="server"
src="images/blueSpacer.gif" border="0"
height="15" align="middle" alt="bar"/>
&nbsp;[<%#Eval("ProblemCount")%>]
</td>
</tr>
</ItemTemplate>
</asp:Repeater>

هدف ما در این برنامه تنها استفاده از HTML برای ایجاد این نمودار میباشد و قصد نداریم تا با استفاده از کتابخانه های GDI+ به ترسیم و طراحی نمدار ها بر روی صفحه بپردازیم. هرچند شما با استفاده از کدهای HTMLپیشرفته تر میتوانید امکانات بیشتری بریا نمودار خود منظور کنید.

نمودار مثال ما قصد دارد تعداد مساله هایی که در هر فصل از کتاب مطرح شده را نشان دهد. هر چند شما میتوانید آن را به راحتی برای مسائل مورد نیاز خود سفارشی کنید.

نمودار میله را با استفاده از یک جدول HTML ایجاد میکنیم که سطر اول آن برای نشان دادن عنوان نمودار استفاده میشود.

از Repeater برای ایجاد سطرها درون جدول مورد نظر استفاده میکنیم. این سطرها در عنصر ItemTemplate درون Repeater تعریف شده اند که در این مثلا حاوی 2 ستون میباشند. ستون اول برای نمایش دادن شماره فصل به کار میرود که در این مثال ما این کار را با مقید کردن متن خانه جدول به ستون Chapter درمنبع داده هایمان انجام داده ایم.

ستون دوم حاوی میله مورد نظر است که تعدا مساله های موجود در هر فصل را نمایش میدهد. این میله با استفاده از یک تگ img ایجاد میشود که منبع آن یک تصویر با ابعاد یک پیکسل در یک پیکسل است. با توجه به امکاناتی که HTML در اختیار ما قرار میدهد، عرض و ارتفاع تصویر را متیوانیم به اندازه دلخواه بکشیم . در این مثال ارتفاع ثابت است اما عرض تصویر در قسمت کد پشت صفحه بسته به نوع نیاز ما کشیده میشود.

تعدا مسائل موجود در هر فصل از ستون ProblemCount درمنبع داده ها بدست می آید. این عدد در انتهای هر میله درج میشود.

در متد Page_Load درکد پشت صفحه داده ها را از پایگاه داده ها خوانده و آنها را به Repeater درون صفحه مقید میکنیم.

ابتدا متغیر لازم را تعریف میکنیم:

OleDbConnection dbConn = null;
OleDbCommand dc = null;
OleDbDataReader dr = null;
string strConnection = null;
String strSQL = null;

سپس به پایگاه داده ها متصل میشویم:

strConnection = ConfigurationManager.
ConnectionStrings["dbConnectionString"].ConnectionString;
dbConn = new OleDbConnection(strConnection);
dbConn.Open( );

و کوئری مورد نظر را اجرا میکنیم

strSQL = "SELECT DISTINCT ChapterID AS Chapter, " +
"count(*) AS ProblemCount " +
"FROM Problem " +
"GROUP BY ChapterID";
dc = new OleDbCommand(strSQL, dbConn);
dr = dc.ExecuteReader( );

عمل مقید سازی را نیز در ادامه انجام میدهیم:

repChartBar.DataSource = dr;
repChartBar.DataBind( );
}

همچنین در مدیر رخداد ItemDataBound برای تنظیم عرض تصویری که قرار است بعنوان میله استفاده شود کدهای مورد نظر را درج میکنیم.

این کار را به این صورت انجام میدهیم که ابتدا تگ img را پیدا کرده و آن را درون شی‌ای به همان نام img میریزیم:

System.Web.UI.HtmlControls.HtmlImage img = null;
// get a reference to the image used for the bar in the row
img = (System.Web.UI.HtmlControls.HtmlImage)
(e.Item.FindControl("imgChartBar"));

سپس طول تصویر را بر حسب پیکسل محاسبه کرده و آن را تنظیم میکنیم

نکته اینجاست که از آنجایی که تعداد پیکسل ها برای نمایش یافتن معمولا بسیار کم است آنها را در 10 ضرب میکنیم تا هنگام نمایش یافتن واضح به نظر برسند.

<table align="center" border="2" cellpadding="10">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" colspan="2" class="subHeading">
Problems Per Chapter<br /><br /></td>
</tr>
<asp:Repeater ID="repChartBar" Runat="server"
OnItemDataBound="repChartBar_ItemDataBound">
<ItemTemplate>
<tr>
<td class="labelText">
<%#Eval("Chapter")%>&nbsp;
</td>
<td class="labelText">
<img id="imgChartBar" runat="server"
src="images/blueSpacer.gif" border="0"
height="15" align="middle" alt="bar"/>
&nbsp;[<%#Eval("ProblemCount")%>]
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</td>
</tr>
</table>

using System;
using System.Configuration;
using System.Data;
using System.Data.Common;
using System.Data.OleDb;
namespace ASPNetCookbook.CSExamples
{
/// <summary>
/// This class provides the code-behind for
/// CH15CreateChartCS.aspx
/// </summary>
public partial class CH15CreateChartCS : System.Web.UI.Page
{
///***********************************************************************
/// <summary>
/// This routine provides the event handler for the page load event.
/// It is responsible for initializing the controls on the page.
/// </summary>
///
/// <param name="sender">Set to the sender of the event</param>
/// <param name="e">Set to the event arguments</param>
protected void Page_Load(object sender, EventArgs e)
{
OleDbConnection dbConn = null;
OleDbCommand dc = null;
OleDbDataReader dr = null;
string strConnection = null;
String strSQL = null;
if (!Page.IsPostBack)
{
try
{
// get the connection string from web.config and open a connection
// to the database
strConnection = ConfigurationManager.
ConnectionStrings["dbConnectionString"].ConnectionString;
dbConn = new OleDbConnection(strConnection);
dbConn.Open( );
// build the query string and get the data from the database
strSQL = "SELECT DISTINCT ChapterID AS Chapter, " +
"count(*) AS ProblemCount " +
"FROM Problem " +
"GROUP BY ChapterID";
dc = new OleDbCommand(strSQL, dbConn);
dr = dc.ExecuteReader( );
// set the source of the data for the repeater control and bind it
repChartBar.DataSource = dr;
repChartBar.DataBind( );
}
finally
{
// clean up
if (dbConn != null)
{
dbConn.Close( );
}
}
}
} // Page_Load
///***********************************************************************
/// <summary>
/// This routine is the event handler that is called for each item in the
/// repeater after a data bind occurs. It is responsible for setting the
/// width of the bar in the passed repeater row to reflect the number of
/// problems in the chapter the row represents.
/// </summary>
///
/// <param name="sender">Set to the sender of the event</param>
/// <param name="e">Set to the event arguments</param>
protected void repChartBar_ItemDataBound(Object sender,
System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
System.Web.UI.HtmlControls.HtmlImage img = null;
// get a reference to the image used for the bar in the row
img = (System.Web.UI.HtmlControls.HtmlImage)
(e.Item.FindControl("imgChartBar"));
// set the width to the number of problems in the chapter for this row
// multiplied by a constant to stretch the bar a bit more
img.Width =
(int)(((DbDataRecord)(e.Item.DataItem))["ProblemCount"]) * 10;
} // repChartBar_ItemDataBound
} // CH15CreateChartCS }