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



שתפו את הפוסט

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

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

                        <!-- MULTILINE CHART -->
                            <div class="box box-success">
                                <div class="box-header text-center">
                                    <h3 id="main-chart-title" class="box-title"></h3>
                                </div>
                                <div class="box-body chart-responsive">
                                    <div class="chart" id="trendsmultiline" style="height: 300px;"></div>
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->

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

    $("#trendspicker").on('click', function (e) {
      e.preventDefault();


      $.ajax({
      type: "POST",
      dataType: 'json',
        url: "functions/gettrendsdata.php",
        data: { 

        }, 
        beforeSend: function () {

        },
        complete: function () {
          
        }
    })
    .done(function (data) {
       
            var thekeys = Array();
            for (var r in data) {
              keys = Object.keys(data[r]);
              thekeys.push(keys);
            }

            var thefirst = thekeys[0].shift();
            var therest = thekeys[0];

            multiline1.options.xkey = thefirst;
            multiline1.options.ykeys = therest;
            multiline1.options.labels = therest;
            multiline1.setData(data);

            })
    .fail(function () {
                alert("error occured");
            });

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

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

        $multilinevalues = array(
            array( 'quorter' => "2011 Q1" , 'elevator' => 3, 'load' => rand(2,10) , 'music' => 5 ) ,
            array( 'quorter' => "2011 Q2" , 'elevator' => 10, 'load' => 1, 'music' => 2) ,
            array( 'quorter' => "2011 Q3" , 'elevator' => rand(2,10) , 'load' => 4,'music' => 10 ) ,
            array( 'quorter' => "2011 Q4" , 'elevator' => 3 , 'load' => 3, 'music' => rand(2,10)) ,
        );
       
        echo json_encode($multilinevalues);

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

            var thekeys = Array();
            for (var r in data) {
              keys = Object.keys(data[r]);
              thekeys.push(keys);
            }

            var thefirst = thekeys[0].shift();
            var therest = thekeys[0];

            multiline1.options.xkey = thefirst;
            multiline1.options.ykeys = therest;
            multiline1.options.labels = therest;
            multiline1.setData(data);

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

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

    var multiline1 = Morris.Area({
          element: 'trendsmultiline',
          behaveLikeLine: true,
          data: [], // Set initial data (ideally you would provide an array of default data)
          xkey: [],
          ykeys: [],
          labels: [],
          pointSize: 0
        });

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

 

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



שתפו את הפוסט

אולי יעניין אתכם לקרוא גם:


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

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