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

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

רן בר-זיק ינואר 21, 2010 10:49 pm אין תגובות

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

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

במאמר הקודם למדנו על הבסיס של 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 מכילה ספריות רבות נוספות בשפות אחרות שמומלץ לבדוק.

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

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

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