אחת מהמטלות היותר נעימות שיש היא ליצור גרפים עבור אפליקציות רשת ואתרי אינטרנט. בעוד שיש כמה דרכים ליצור אפליקציות כאלו, הדרך המועדפת עלי היא Open Flash Chart – פתרון Open Source, חינמי ופשוט מאד לשימוש עם כל השפות.
Open Flash Chart הוא קובץ פלאש שמקבל אובייקט מסוג JSON. אובייקט זה מאפשר לו לבנות איזה גרף שנרצה – עמודות, קווים, פאי – whatever. אובייקט ה-JSON יכול להבנות על ידי כל שפת תכנות שהיא – PHP, Ruby, Python, ASP.net וכו'. גם על ידי JavaScript. אנו יכולים להעביר את האובייקט באמצעות פרמטר GET. או להעביר את אובייקט ה-JSON ישירות לפלאש. אנו נלמד את הדרך השניה.
לא יודעים מה זה JSON? נסו את המדריך המהיר שכתבתי על JSON.
יש 3 צעדים הכרחיים שאנחנו חייבים לעבור:
1. הצבת הפלאש בדף כלשהו.
2. יצירת קובץ בשרת שיוצר אובייקט JSON.
3. יצירת קריאה בדף שהפלאש נמצא בו לאובייקט ה-JSON והכנסתו לפלאש.
הצבת הפלאש
ראשית אנו נוריד את Open Flash Chart מ-source forge, נפתח את תיקית ה-zip ונעתיק את קובץ open-flash-chart.swf לתיקיה כלשהי באתר שלנו.
את הפלאש אנו מציבים באמצעות swfobjects שהוא השיטה הטובה ביותר להצבת פלאש אם אנו רוצים לקיים אליו תקשורת. קוד הג'אווהסקריפט הקטן הזה חוסך לנו המון בעיות של תזמון, כמו פלאש שנטען לפני הג'אווסקריפט והפוך. מומלץ להשתמש בו מתי שיש אינטראקציה בין פלאש לג'אווהסקריפט. השימוש בו מאד פשוט. ראשית מורידים אותו מהאתר, שנית מציבים אליו קישור כמו לקובץ JavaScript רגיל. הנה דוגמא לאיך שעשיתי את זה בעמוד הזה:
<script type="text/javascript" src="https://internet-israel.com/internet_files/openflashchart/openflashchart.js"></script>
אחרי כן יש ליצור בעמוד div עם id כלשהו – לצורך הדוגמא id="my-flash-chart". אחרי שאני יוצר את ה-div כל מה שעלי לעשות זה לכתוב שורה שטנה שמורה ל-swfobject היכן להציב את הפלאש. הפקודה מקבלת את מיקום קובץ הפלאש, ה-id שאליו קובץ הפלאש ייכנס, הגובה והרוחב. למשל:
swfobject.embedSWF("https://internet-israel.com/internet_files/openflashchart/open-flash-chart.swf", "my-flash-chart", "350", "200", "9.0.0");
אם הכל תקין, אנו נראה משהו בסגנון הזה )IO error) :
כשאנו רואים את הפלאש הזה, סימן שלא הכנסנו שום פרמטרים, אך צלחנו את השלב הראשון – הכנסת הפלאש לדף אינטרנט. עכשיו ניצור קובץ דוגמא בשרת על מנת שיהיה לנו קובץ JSON.
יצירת JSON בשרת
אחד הדברים הטובים ב-Open Flash Chart הוא מגוון הספריות שיש לו לשפות תכנות שונות ליצירת אובייקט ה-JSON. אובייקט ה-JSON קובע את תכונות הגרף, מה טיבו, מה סוגו, מה הצבע שלו וכו' וכו' – כל תכונה שהיא של הגרף נקבעת על ידי האובייקט. מי שמסייע לנו ליצור את האובייקט הזה הן הספריות של Open Flash Chart שמספקות API נוח מאד להפקת האובייקטים האלו. אך כרגע אנו לא נעבור על הספריות האלו )נשמור את זה למאמר הבא( אלא ניצור קובץ JSON דמה, רק לשם הדגמת העיקרון. אנו ניצור קובץ PHP שמה שהוא עושה זה הדפסה של אובייקט JSON. איך עושים את זה? פשוט מאד. ניצור קובץ בשרת שייקרא לצורך הדוגמא ofc-json-1.php. כל מה שהקובץ הזה הוא להדפיס JSON:
<?php
print '{"elements":[{"type":"bar","values":[1,2,3,4,5,6,7,8,9]}],"title":{"text":"Wed Jan 20 2010"}}';
במאמר ההמשך אנו נלמד כיצד להפעיל את ספרית Open Flash Chart עבור PHP. כרגע אנו נשמור את הקובץ בשרת שלנו ונבדוק אותו. אם הכל תקין, אתם תוכלו לראות את הדבר הבא.
יצירת קריאה לקובץ ה-PHP באמצעות פרמטר של פלאש
פלאש יש לנו, קובץ PHP שמייצר JSON גם יש לנו, עכשיו צריך לעשות את הקריאה ולייבא את ה-JSON לדף שבו נמצא הפלאש. ראשית אנו נלמד כיצד להכניס את אובייקט ה-JSON אל הפלאש באמצעות פרמטר. כל מה שצריך לעשות, לאחר שייצרנו את הפלאש וה-JSON הוא להעביר באמצעות פרמטר פשוט שבפשוטים את מיקומו של אותו קובץ לפלאש. איך עושים את זה?
באמצעות swfobjects קל מאד להעביר פרמטרים לכל פלאש שהוא. Open Flash Chart צריך רק פרמטר שנקרא data-file. הפרמטר מקבל url של קובץ ה-PHP שמדפיס לנו את ה-JSON. חשוב מאד לבצע urlencode ל-url הזה.
והנה הדוגמא שלנו:
swfobject.embedSWF(
"https://internet-israel.com/internet_files/openflashchart/open-flash-chart.swf", "my-flash-chart-2", "350", "200",
"9.0.0",null,
{"data-file":"https%3A%2F%2Finternet-israel.com%2Finternet_files%2Fopenflashchart%2Fofc-json-1.php"}
);
וכך זה נראה. אתם מוזמנים להציץ בקוד המקור של הדף אם הדוגמאות שהבאתי לא מספיקות לכם.
בל נשכח שגם פלאש מציית ל-Same Domain Policy ולפיכך לא נצליח להכניס אליו קובץ data שמגיע מדומיין אחר.
עד כאן בנוגע להצבת פלאש. במאמר הבא אנו נלמד כיצד להשתמש ב-JavaScript על מנת להכניס נתונים ל-Open Flash Chart.