גרפים עם Open Flash Chart – גרף עמודות

בחלקים הקודמים למדנו איך להציב את הפלאש של Open Flash Chart בצד הקליינט ואיך לשלוט בו באמצעות פרמטרים או JavaScript. עכשיו נעבור ל-server side. בחלקים הקודמים השתמשנו ב-php דמה שמדפיס אובייקט JSON. אובייקט ה-JSON הזה שולט על כל אספקט שיש בגרף – צורתו הבסיסית (עמודות, קו, עוגה, רדיו וכו'), הצבעים השונים, ציר ה-x, ציר ה-y, הערכים ועוד. בעוד שבאופן תיאורטי אנו יכולים להקליד את הקובץ באופן ידני, זה יהיה לא יעיל ולא נכון לעשות זאת. במיוחד כאשר יש לנו גרפים דינמיים שיש צורך שיתעדכנו כל הזמן מה-MySQL או ממקורות אחרים.

אנו נתמקד במאמר זה ביצירת אובייקט ה-JSON. באופן עקרוני, סופו של התהליך זהה גם בקובץ הדמה – הדפסה של קובץ. אך בעוד בקובץ הדמה ההדפסה היא של הארד טקסט שאני הכנסתי, אנו נלמד כיצד לקבוע את כל הפרמטרים באופן דינמי על ידי הספריה של Open Flash Chart שמהווה בעצם את ה-API של ה-OFC בסיומו של התהליך צריך להיות לנו הדפסה של קובץ JSON שאותו נוכל להציב בפלאש שלנו.

בקובץ ה-Open Flash Chart שהורדנו נמצאת תיקיה בשם php5-ofc-library. אנו נשתמש בה בשרת שלנו על מנת ליצור את אובייקט ה-JSON.

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

גרף עמודות פשוט

ניצור קובץ PHP ונשמור אותו בשרת. לצורך הדוגמא קובץ ה-PHP שלי הוא ofc-json-A1.php. הדבר הראשון שאני כותב בו (לאחר ה-php?>) הוא:

require_once('php-ofc-library/open-flash-chart.php');

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

ראשית אנו יוצרים את כל האובייקטים שיש בגרף – title למשל ו-bar במקרה ומדובר בגרף עמודות, אחרי כן נגדיר אובייקט chart ונשתמש במתודת add_element על מנת להכליל את כל האלמנטים שיש בו. לבסוף מתודת toPrettyString תעזור לנו להמיר את התוצאה לאובייקט JSON שמיוצג כמחרוזת טקסט ו… זהו.

נשמע מסובך? הכל פשוט עם דוגמה:

< ?php

require_once('php-ofc-library/open-flash-chart.php');

$title = new title('My Title');

$bar = new bar();
$bar->set_values( array(9,8,7,6,5,4,3,2,1) );

$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $bar );

print $chart->toPrettyString();

ואם אני אכניס את אובייקט ה-JSON הזה לגרף כפי שהראיתי במאמרים הקודמים – הגרף יראה כך.

אז מה הולך פה בעצם? מלבד הגדרת ה-title שנעשית עם אובייקט title, אני מגדיר אובייקט bar ובאמצעות מתודה מכניס לו ערכים. הערכים נכנסים בתוך מערך. המתודה הזו היא המתודה הבסיסית ביותר בכל אובייקט bar (ואובייקטים אחרים כגון pie). אחרי שהשתמשתי בה, אני צריך ליצור אובייקט של גרף ולהשתמש בשתי מתודות – set_title שמקבלת את אובייקט ה-title ו-add_element שמוסיפה לגרף את אובייקט ה-bar.

המתודה האחרונה $chart->toPrettyString() מחזירה לי אובייקט JSON שאותו אני מכניס כפרמטר. איך אובייקט ה-JSON נראה?

{ "elements": [ { "type": "bar", "values": [ 9, 8, 7, 6, 5, 4, 3, 2, 1 ] } ], "title": { "text": "My Title" } }

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

מתודות של bar

המתודות השונות של ה-bar מאפשרות לנו לשנות כרצוננו את התכונות של גרף העמודות – את הצבע, השקיפות, ה-tooltip ואפילו להכניס אנימציה.

ראשית, הנה דוגמא לגרף – אם תרפרשו את העמוד תוכלו לראות שהעמודות בגרף מתחילות להופיע אחרי 10 שניות בערך.

איך עשיתי את זה? השתמשתי בסקריפט הבא:

require_once('php-ofc-library/open-flash-chart.php');

//יצירת אובייקט כותרת ואובייקט אנימציה של קווים
$title = new title('My Title'); 
$line_on_show = new line_on_show('fade-in', 10, 10);

//יצירת אובייקט גרף עמודות
$bar = new bar();
$bar->set_values( array(9,8,7,6,5,4,3,2,1) );
$bar->set_colour( '#0048CA');
$bar->set_key('whats up', 14);
$bar->set_alpha(0.5);
$bar->set_tooltip('This is my #val#');
$bar->set_on_show($line_on_show);

//יצירת אובייקט גרף והצמדה של אובייקט העמודות והכותרת
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $bar );

//הדפסה של ה-JSON
print $chart->toPrettyString();

ראשית יצרתי אובייקט חדש של אנימציה קווית new line_on_show. אובייקט זה שאנו משתמשים בו לא רק בגרף עמודות אלא בגרפים נוספים, מגדיר לנו את האנימציה שבה העמודות מופיעות בגרף. הוא מקבל את שלושת הארגומנטים הבאים:
1. סוג האנימציה:
'pop-up'
'explode'
'mid-slide'
'drop'
'fade-in'
'shrink-in'
2. משך האנימציה (בדוגמא שלנו 10 שניות).
3. מתי האנימציה מתחילה (בדוגמא שלנו 10 שניות).

אחרי שיצרתי אותו ויצרתי את אובייקט הכותרת, יכולתי לגשת בשקט למלאכת הרכבת אובייקט ה-bar שלי.

מתודת set_values – מקבלת מערך של ערכים (במקרה הזה סתם מערך של מספרים ששמתי לדוגמא).

מתודת set_colour – מקבלת מחרוזת טקסט של צבע בפורמט HTML פשוט. במקרה הזה בחרתי בצבע כחול.

מתודת set_key – קובעת את המקרא של העמודה. מקבלת שני ארגומנטים – השם של המקרא וגודל הפונט.

מתודת set_alpha – קובעת את השקיפות של העמודה. מקבלת מספר מ-1 (שקוף לחלוטין) ועד 0 (לא שקוף).

מתודת set_tooltip – קובעת את ה-tooltip. המתודה יכולה להיות כל מחרוזת טקסט ולהחיל גם את מילת הקסם ##value## שמכניסה את הערך של העמודה.

ולבסוף מתודת set_on_show שבאמצעותה אני מכניס לגרף העמודות שלי את אובייקט האנימציה שיצרתי קודם לכן.

שאר הקוד שכולל יצירה של אובייקט chart והדפסת ה-JSON הוסברו לעיל.

הבעיה בה"א הידיעה של Open Flash Chart הוא דוקומנטציה בעייתית לגישה. אם אתם רוצים לבדוק בעצמכם את המתודות שיש לכל אובייקט, יש דוקומנטציה חלקית באתר הזה.

במאמר הבא אנו נלמד על שליטה על מאפייני הגרף עצמו וכן על גרף עוגה.