Plotting graph with FLOT using mysql and ajax

Question

I am trying to use flot to plot some data that is pulled from a MySQL db. I am log users login visits and I have a SQL function that will retreive the number of visits per day for a given month, getStats($day). I have read some examples online how to properly do this but for some reason when I try and graph the array data in my javascript file ' it comes up empty --> 'data: '. Below is my code. I am using the CI framework so if there are some questions about my code it is most likely because of that. I have hardcoded data in and it works fine. Any help on this matter would be appreciated there is not much about using flot with databases out there currently.

Model---> metrics.php

function showUsers() {

    //get the number of days in the current month and the first day
    $num_days = cal_days_in_month(CAL_GREGORIAN, date(m), date(Y));
    $first_day = strtotime(date('Y').'-'.date('m').'-01');

    //iterate through all of the days
    while( $i < $num_days ) {

         //get the user visits for each day of the month
         $log = $this->db->getStats($first_day);

         //add +1 day to the current day
         $first_day += 86400;
         $flot_visits[] = '['.($first_day*1000).','.$log->fields['total'].']';
         $i++;
    }

    //format in acceptable format for flot
    $content['visits'] = '['.implode(',',$flot_visits).']';

    //load the view and pass the array
    $this->load->vars($content);
    $this->load->view('metrics/user_metrics', $content);
}

View ---> user_metrics.php

 <div id ="visits_graph" style="width:600px; height:300px"></div>

Javascript ---> user_metrics.js

function metrics() {

   $.ajax({
            type: "POST",
            url: pathurl + "metrics/showUsers",
            data: "",
            success: function(data) {
                   graph_visits();
            }
         });
}

function graph_visits() {

     $.plot($('#visits_graph'), [
         { label: 'Visits', data: <?php echo $visits ?> }
         ], {
               xaxis: {
                         mode: "time",
                         timeformat: "%m/%d/%y"
                      },
               lines: { show: true },
               points: { show: true },
               grid: { backgroundColor: #fffaff' }
         });
}

Answer 1

I got it to work but not the way I would like it. I figured I would post the answer so if anyone else runs into this issue they can get it to at least work.

So for some reason and I am assuming because the javascript file and the actual view(html) file are separated due to the framework that the array is not visible to the javacscript file. The issue lies within the function

function graph_visits() {

 $.plot($('#visits_graph'), [
     { label: 'Visits', data: <?php echo $visits ?> }
     ], {
           xaxis: {
                     mode: "time",
                     timeformat: "%m/%d/%y"
                  },
           lines: { show: true },
           points: { show: true },
           grid: { backgroundColor: #fffaff' }
     });
}

because they are seperate

          <?php echo $visits ?>

returns nothing. The way I fixed it was just go into the view and just copy and past the contents of the function between two tags at the top of the html file. It should look like this,

<script language="javascript">


   $.plot($('#visits_graph'), [
     { label: 'Visits', data: <?php echo $visits ?> }
     ], {
           xaxis: {
                     mode: "time",
                     timeformat: "%m/%d/%y"
                  },
           lines: { show: true },
           points: { show: true },
           grid: { backgroundColor: #fffaff' }
     });

</script>

I do not really like this solution because it is breaking away from the framework but so far it the only solution I have been able to come up with.

Answer 2

Hi,

I think your problem is within the metrics function. (also I am guessing you are using JQuery)

At the moment your metrics function requests a page at the backend but does nothing with it.

1. change the backend method showUsers() to be something like:

    function showUsers() {
        //get the number of days in the current month and the first day
        $num_days = cal_days_in_month(CAL_GREGORIAN, date(m), date(Y));
        $first_day = strtotime(date('Y').'-'.date('m').'-01');

        //iterate through all of the days
        while( $i db->getStats($first_day);

         //add +1 day to the current day
         $first_day += 86400;

         //change this to be a nested array
         $flot_visits[] = array( ($first_day*1000) , $log->fields['total'] );
         $i++;
    }

        //output javascript array
        echo json_encode( $flot_visits );
    }

1. change user_metrics.js to be something like :

    function metrics() {    
       $.getJSON({
                pathurl + "metrics/showUsers",
            function(data) {
                       //use the returned data
                       graph_visits(data);
                }
             });
    }


    function graph_visits( graphData ) {
         $.plot($('#visits_graph'), [
             { label: 'Visits', data: graphData }
             ], {
                   xaxis: {
                             mode: "time",
                             timeformat: "%m/%d/%y"
                          },
                   lines: { show: true },
                   points: { show: true },
                   grid: { backgroundColor: #fffaff' }
             });
    }