שטיגליץ עיצובים

מוריס צ'ארטס דינאמי עם אג'קס


יוני 11, 2015 2:02 pm

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

נתחיל בצד הקוד של הhtml, למעשה הדבר החשוב כאן הוא הid של האלמנט על הדף שבו נרצה להציג את הגרף. במקרה שלי זה הקוד:

מאחר שיש לנו דיב עם id, נוכל לומר למוריס להציג את הגרף על אלמנט זה. לי יש לינק כדי לייצר את קריאת האג'קס כאשר לוחצים עליו. וזה יריץ את הקוד הבא:

השארתי את הקוד הכי בסיסי שניתן כדי שיהיה נקי. כמובן שבקריאות אג'קס לרוב נעביר משתנים, נעשה וולידציות וכו'. בכל מקרה אנחנו קוראים לקובץ הphp כדי שיעבד את הנתונים ויחזיר את הנתונים שצריך.

אז לשם הדוגמה ייצרתי מערך שיוחזר לקריאת האג'קס שלנו, זה בקובץ הphp:

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

כפי שניתן לראות, אנחנו עושים לופ למערך שחוזר מphp, ומפרידים את מה שנרצה שיופיע עבור הxkeys הykeys, עבור הלייבלים וכמובן הדטה.את מה שצריך לשייך לאופציות נשייך לאופציות ואת הדטה נשתמש במתודה של מוריס setData.

ועתה נחבר את כל מה שייצרנו לגרף של מוריס:

כפי שניתן לראות כל הערכים מצפים למערכים, ומכיוון שהכנו אותם קודם ושייכנו אותם כראוי, הכל יתפקד באופן דינאמי וזורם.

 

וזה בעקרון. כמובן שיש עוד המון אופציות לספרייה, ומי שרוצה יותר פשוט יש לפנות לAPI שלהם.

כתיבת תגובה

ספק שם מלא

@

אנא ספק כתובת דוא"ל תקפה

אנא ספק כתובת אינטרנט תקפה. כגון: http://www.yoursite.com

Show Buttons
Hide Buttons