הדוגמא הבאה יודעת לקרוא מתוך מסד נתונים את הערכים ולהציגם בצורת גרף אנכי.
במסד הנתונים עליו מסתמך הגרף ישנה טבלה הנקראת GRAPH והיא נראית כך:
עמודה Y יהיה ציר ה-Y ושאר העמודות ממנה והילך יהיו כל אחת ציר X משלה.
ז"א כל עמודת X שנוסיף תוסיף לנו עוד גרף עם הערכים אותם נשים בשדות.
הפלט של הדוגמא יראה כך: 
איך עושים את זה?
זה מה זה פשוט!
אז ככה, דבר ראשון נראה את קוד המקור ואז אסביר בכלליות מה עשינו בעצם.
הנה הקוד מקור:
<![CDATA[<%@ Language=VBScript %>
<%
Dim TheDSN,rs,count,NumOfFields,Max,OneLine
TheDSN = "DRIVER={Microsoft Access Driver (*.mdb)};"
TheDSN = TheDSN & "DBQ=" & Server.mappath("graph.mdb")
SQL = "Select * From GRAPH"
Set rs = Server.CreateObject("ADODB.RecordSet")
rs.Open SQL,TheDSN,3,1
count = rs.RecordCount
NumOfFields = rs.fields.count - 1
%>
<HTML>
<HEAD>
</HEAD>
<BODY BGColor=Orange>
<%
Max = 0
For i = 1 To NumOfFields
rs.MoveFirst
While NOT rs.EOF
if i > 1 Then if rs(i) > Max Then Max = rs(i)
rs.MoveNext
Wend
Next
OneLine = 90 / Max
%>
<BR><BR>
<TABLE Border=1 Align=Center>
<TR BGColor=LightBlue><TD Align=Center Colspan=<%=count%>>Visual Graph</TD></TR>
<TR><TD>
<TABLE Border=0 BGColor=Gold>
<%
For i = 2 to NumOfFields
rs.MoveFirst
Response.Write "<TR valign=bottom>"
While NOT rs.EOF
Response.Write "<TD Align=Center><FONT size=-2>" & rs(i) & "</FONT>"
Response.Write "<BR><IMG style='border:MidNightBlue 3px outset;' "
Response.Write "src=bg.gif width=30 height=" & OneLine * rs(i) & "></TD>" & vbcrlf
rs.MoveNext
Wend
Response.Write "</TR>"
Response.Write "<TR>"
rs.MoveFirst
While NOT rs.EOF
Response.Write "<TD Align=Center><FONT size=-2>" & rs(1) & "</FONT></TD>" & vbcrlf
rs.MoveNext
Wend
Response.Write "</TR>"
Next
%>
</TABLE>
</TABLE>
</BODY>
</HTML>
<%
rs.Close
Set rs = Nothing
%>]]>
אז מה עשינו פה בעצם?
פתחנו את החיבורים למסד נתונים והכנסנו את כל טבלת GRAPH לתוך אובייקט rs.
עברנו על כל אובייקט rs במטרה למצוא את הערך הגדול ביותר.
הגדרנו את משתנה OneLine כ-90 חלקי אותו מספר מקסימלי וכך בעצם קבענו את גודל אחד ולפיו נוכל לדעת באיזה גודל צריכה להיות כל עמודה, ע"י נוסחה פשוטה של גודל העמודה X גודל אחד.
עברנו על כל השדות, משדה מספר 2 (השדה שבו נמצאת עמודת ה-X הראשונה) ועד העמודה האחרונה של ה-Xים.
בכל עמודה עוברים על כל השדות ובונים את העמודות בעזרת הנוסחה שהזכרתי למעלה, כאשר בגודל אותו אנו מקבלים כתוצאה מהנוסחה אנו משתמשים בתור גובה לתמונה של פיקסל על פיקסל ומותחים אותה לגובה הרצוי.
לבסוף, אחר שעברנו על כל הטבלה, אנו עוברים פעם אחרונה על העמודה השניה, הלוא היא שורת ציר ה-Y וכותבים את הערכים שלה בתחתית הגרף.
זה הכל...
אם אתם רוצים ללמוד איך עושים גרף אופקי, לחצו כאן.
|
.png)
