Fusion Charts - דרך יפה להציג נתונים | Htm - אחלה טיפים לבניית אתרים

בניית אתרים ועיצוב אתרים הם בעצם שילוב של טכניקות להצגת תוכן. מעצב או בונה אתרים טוב הוא אחד כזה שידע איך להציג תכנים באתר, באופן הנכון ביותר להשגת היעד של האתר. אבל מה קורה שיש לנו הרבה תוכן ואנחנו צריכים להציג אותו באופן פשוט וקריא?

<דוגמא><קוד>

בשביל זה בואו לעזרתנו גרפי הנתונים. גרף נתונים זו בעצם תצוגה שמכילה את כל הנתונים שאנו רוצים לרכז ומציגה אותם באופן מסודר וברור.
בואו נקח לדוגמא את ההכנסות השנתיות של המשק הביצים של משה:

בעזרת עוגת הנתונים הנ"ל, אנחנו יכולים להשיג טבלה שלמה של נתוני הרווח של החווה ובנוסף המתבונן בעוגה יכול להשוות בין הרווחים של כל חודש (לפי גודל נתח העוגה). אתם מוזמנים לראות מה קורה שלוחצים על נתח עוגה.

FusionCharts נותנת לנו כלי גדול, בעזרת אנימציית פלאש ויבוא נתונים מקובץ XML אנחנו יכולים להציג גרפי נתונים בפשטות.

איך עושים את זה?

טוב אז בואו נתחיל ללכלך את הידיים. נתחיל כמובן בנתונים:

Month	Income
January	$17400
February	$19800
March	$21800
April	$23800
May	$29600
June	$27600
July	$31800
August	$39700
September	$37800
October	$21900
November	$32900
December	$39800

יש לנו טבלה בה ריכזנו את כל הנתונים כעת נהפוך אותה ל-XML שמתאים ל-FusionCharts, במקרה הכינותי מראש:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

ועכשיו להסבר:

העץ הראשי של הXML צריך להיקרא chart
המאפיינים שהגדרנו לעץ הם:
- כותרת הגרף
- כותרת משנה
- וסימן התחלתי לנתונים
לכל נתון בטבלה (שורה בטבלה) נוסף ילד בעץ בשם set
- שם הילד
- ערך הילד

* לא נעשה שימוש לא בעצים ולא בילדים בדוגמא הנ"ל – במידה ואתם מתקשים להאמין/להבין כנסו ללינק הבא

זהו סיימנו עם הXML, נשמור אותו תחת השם "Data.xml" כעת נעבור לקובץ הHTML שלנו.

קובץ ה-HTML

לפני שאנחנו נכתוב את קוד ה-HTML שלנו, בואו נוריד את קובץ הפלאש אותו נפעיל להצגת הנתונים, אני השתמשתי ב-Pie2D.swf אבל אתם מוזמנים להשתמש בכל אחד מקבצי הפלאש האפשריים. (אתם יוכלים להוריד את הפלאש הבודד מהלינק שנתתי כאן או להוריד את כל הקוד של המאמר הזה ממעלה).

וכעת לקוד שמציג את הפלאש (נוסיף אותו בין תגיות ה-BODY):

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="300" id="Pie2D" >
<param name="movie" value="FusionCharts/Pie2D.swf" />
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=900&chartHeight=300">
<param name="quality" value="high" />
<embed src="FusionCharts/Pie2D.swf" flashVars="&dataURL=Data.xml&chartWidth=900&chartHeight=300" quality="high" width="500" height="300" name="Pie2D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

אנחנו יכולים לראות שהקוד כפול כיאה לקוד פלאש, בשביל להתאים לIE ושאר הדפדפנים.

בסגול - אנחנו בוחרים את קובץ הSWF שבו בחרנו להציג את הנתונים, כאן אנחנו בוחרים את סוג הגרף.

בירוק – אנחנו מקשרים את קובץ ה-XML שיצרנו

בבולט – סמנתי לכם איפה מגדירים את גודל הגרף.

שימו לב לשמור על נתיב נכון לקובץ הפלאש וה-XML, אני מעדיף לשים את קבצי הפלאש של FusionCharts בתקייה הראשית של האתר, במקום אחד, וכך אני נמנע מלשכפל את הקבצים כל פעם שאני רוצה ליצור גרף.

לסיום אני רק אגיד שבנתיים FusionCharts לא תומך בעברית (כמה חבל אבל לא מפתיע), אבל אתם בהחלט מוזמנים להוריד את דוקמטציה ושאר קבצי FusionCharts מהאתר שלהם (אחרי הרשמה קצרה).