גרפים עם Open Flash Chart – חלק שני

כיצד לשלוט על Open Flash Chart באמצעות JavaScript ו-AJAX.

רן בר-זיק
ינואר 21, 2010
קטגוריה: Open Flash Chart
תגיות: Open Flash Chart, ג'אווה סקריפט ו-jQuery באתרי אינטרנט, גרפים, פלאש

במאמר הקודם למדנו על הבסיס של Open Flash Chart. מהיכן יש להוריד אותו, כיצד ניתן להציב אותו בדף וכיצד אפשר לשלוט בו באמצעות פרמטר. על מנת לבצע את ההדגמה השתמשנו בדף PHP המדפיס אובייקט JSON דמה. קריאת והכרת המאמר הקודם חיונית להבנת המאמר הזה.

בניגוד לדרך הקודמת, שבאמצעותה הכנסנו את אובייקט ה-JSON לפלאש באמצעות פרמטר של פלאש. ניתן להכניס את האובייקט באמצעות JavaScript לפלאש. זוהי דרך עדיפה מכמה סיבות בעיקר בשל אפשרות לשנות את הגרף on the fly ללא צורך בטעינה מחדש תוך כדי שימוש ב-AJAX/נתוני משתמש מהדף.

גם כאן אנו צריכים לעבור כמה שלבים:
1. הצבת הפלאש (על זה עברנו במאמר הקודם) באותו דף של ה-JavaScript.
2. יצירת ה-JSON שמכיל את נתוני הגרף (נשתמש באותו JSON דמה של המאמר הקודם)
3. שאיבת ה-JSON אל תוך משתנה ב-JavaScript שלנו.
4. הכנסת אובייקט ה-JSON לתוך הפלאש באמצעות JavaScript.

הצבת הפלאש ויצירת ה-JSON

תהליך הצבת הפלאש באמצעות swfobjects נידון באופן מפורט במאמר הקודם. אנו נציב את הפלאש עם swfobjects אך במקום להגדיר פרמטר של מידע כמו שעשינו במאמר הקודם. אנו נגדיר שני פרמטרים – פרמטר אחד של id שיזהה את הגרף עבורנו ופרמטר נוסף של get-data שאליו אנו מעבירים שם פונקציה. לפונקציה הזו הגרף יקרא כאשר הוא יטען והיא אמורה להחזיר לו את האובייקט שאותו הוא יקרא.

לשם הדוגמא, אני אציב את הפלאש עם id שייקרא ofc-flash-graph-1 ופונקציה שתקרא loadingFlashGraph.



swfobject.embedSWF(
  "https://internet-israel.com/internet_files/openflashchart/open-flash-chart.swf", "my-flash-chart",
  "300", "300", "9.0.0", null,
  {"get-data":"loadingFlashGraph", "id":"ofc-flash-graph-1"} );

כאשר לפני כן אנו מקפידים לכלול את קובץ swfobjects:


<script type="text/javascript" src="https://internet-israel.com/internet_files/openflashchart/openflashchart.js"></script>

אובייקט ה-JSON שלנו נמצא במיקום הבא:

https://internet-israel.com/internet_files/openflashchart/ofc-json-1.php

שאיבת ה-JSON לתוך ה-JavaScript

ישנן מספר דרכים לשאיבת ה-JSON אל תוך ה-JavaScript שלנו. אני עושה את זה בדרך כלל על ידי קריאת AJAX קטנה עם jQuery:


var ofcData;
  
$.getJSON("https://internet-israel.com/internet_files/openflashchart/ofc-json-1.php",
        function(data){
			ofcData = data;
        });

מה הקוד שלעיל עושה הוא ליצור קריאת AJAX אל https://internet-israel.com/internet_files/openflashchart/ofc-json-1.php. קבלת התוצאה (אובייקט JSON) והעברת האובייקט ל-ofcData.

אם אתם לא מבינים כל כך ב-AJAX מומלץ לקרוא את המדריך למתחילים ב-AJAX ואת המדריך ל-AJAX עם jQuery. אפשר להשתמש כמובן בכל שיטה שהיא לקבלת אובייקט ה-JSON מהשרת. שיטה אלטרנטיבית תהיה באמצעות הדפסה ל-JavaScript באופן הבא:

בצד ה-PHP


<?php
print "var ofcData = {'elements':[{'type':'bar','values':[1,2,3,4,5,6,7,8,9]}],'title':{'text':'Wed Jan 20 2010'}}";

בצד ה-JavaScript:


<script type="text/javascript" src="myPHP.php"></script>

אפשר גם להדפיס את האובייקט ישירות בדף באמצעות PHP (לא מומלץ).

כך או כך, יש לנו עכשיו את האובייקט שלנו בתור ofcData. כל מה שנותר לנו הוא להכניס אותו לפלאש כדי לקבל את הגרף.

הכנסת המידע לתוך הפלאש

אחרי שהגדרנו בשלב הראשון באמצעות הפרמטר get-data את הפונקציה loadingFlashGraph בתור הפונקציה שהפלאש יקרא לה לאחר שיעלה והכנסנו את האובייקט שהתקבל מה-PHP למשתנה ofcData, כל שעלינו לעשות הוא לקחת את האובייקט, להפוך אותו למחרוזת טקסט ואז להכניס אותו לפלאש. אובייקט JSON קל להפוך למחרוזת טקסט באמצעות json2.js – ה-API של JSON. json2.js נמצא כבר בקובץ שהורדנו מ-sourceforge (הוסבר במאמר הקודם איך וכיצד להוריד) ובכל מקרה אפשר למצוא אותו גם כאן.

אנו מציבים את json2.js בראשית הדף כדי שנוכל להשתמש במתודות שלו. באופן עקרוני יש לו 2 מתודות ואנו נשתמש במתודת strigify. נשמע מסובך? ממש לא. שימו לב לקוד הבא:


function loadingFlashGraph(id) {
	return JSON.stringify(ofcData);
}

זה הכל, זו הפונקציה שהפלאש שלנו יחפש – הרי העברנו לו את השם שלה בפרמטרים. ה-id שעובר בפונקציה הוא ה-id שהעברנו והוא חשוב אם יש לנו מספר פלאשים באותו דף (למשל דף שיש בו כמה גרפים ולא גרף אחד ויש לנו צורך לדעת מה ה-id של הגרף). את ofcData אנו מקבלים מקריאת ה-AJAX שעשינו ו-JSON.stringify זה מתודת ה-JSON שאנו משתמשים בה על מנת להמיר את ה-JSON למשהו שהפלאש יכול לעכל.

זו התוצאה כמובן:

וזה הקוד המלא:


var ofcData;

swfobject.embedSWF(
  "https://internet-israel.com/internet_files/openflashchart/open-flash-chart.swf", "my-flash-chart",
  "300", "300", "9.0.0", null,
  {"get-data":"loadingFlashGraph", "id":"ofc-flash-graph-1"} );
	
$.getJSON("https://internet-israel.com/internet_files/openflashchart/ofc-json-1.php",
        function(data){
			ofcData = data;
        });
		
function loadingFlashGraph(id) {
	return JSON.stringify(ofcData);
}

הקוד המלא תלוי בשלושה קבצים חיצוניים – jQuery, JSON ו-swfobjects.

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

במאמר הבא אנו נתחיל ללמוד על הספריה האולטרא נוחה של Open Flash Chart עבור PHP המאפשרת לנו ליצור את ה-JSON. חשוב להדגיש ש-Open Flash Chart מכילה ספריות רבות נוספות בשפות אחרות שמומלץ לבדוק.