אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » Open Flash Chart » גרפים עם Open Flash Chart – חלק ראשון

גרפים עם Open Flash Chart – חלק ראשון

רן בר-זיק ינואר 20, 2010 4:23 pm אין תגובות

הצבת פלאש של Open Flash Chart ויצירת גרף באמצעות JSON שמועבר בפרמטר של פלאש.

אזהרה: Open Flash Chart נחשב כיום כמיושן ועדיף מאוד לא להשתמש בו. במידה ואתם רוצים להטמיע גרפים באתר שלכם, הפתרון הפופולרי הוא Google Charts.
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
אזהרה: Open Flash Chart נחשב כיום כמיושן ועדיף מאוד לא להשתמש בו. במידה ואתם רוצים להטמיע גרפים באתר שלכם, הפתרון הפופולרי הוא Google Charts.

אחת מהמטלות היותר נעימות שיש היא ליצור גרפים עבור אפליקציות רשת ואתרי אינטרנט. בעוד שיש כמה דרכים ליצור אפליקציות כאלו, הדרך המועדפת עלי היא 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.

אזהרה: Open Flash Chart נחשב כיום כמיושן ועדיף מאוד לא להשתמש בו. במידה ואתם רוצים להטמיע גרפים באתר שלכם, הפתרון הפופולרי הוא Google Charts.
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
Open Flash Chart גרפים
ללמוד ג'אווהסקריפט בעברית

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

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד