Построение графика с помощью FLOT с использованием mysql и ajax - PullRequest
Новая
       13

Построение графика с помощью FLOT с использованием mysql и ajax

3 голосов
/ 30 ноября 2009

Я пытаюсь использовать flot для вывода некоторых данных, извлеченных из базы данных MySQL. Я веду журнал посещений пользователей, и у меня есть функция SQL, которая будет получать количество посещений в день в течение определенного месяца, getStats ($ day). Я прочитал несколько примеров онлайн, как правильно сделать это, но по какой-то причине, когда я пытаюсь отобразить данные массива в моем файле javascript ', он появляется пустым ->' data: '. Ниже мой код. Я использую CI-фреймворк, поэтому, если есть какие-то вопросы по поводу моего кода, скорее всего, из-за этого. У меня есть жестко закодированные данные, и это прекрасно работает. Буду признателен за любую помощь в этом вопросе, так как в настоящее время использование flot с базами данных невелико.

Модель ---> 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);
}

Просмотр ---> 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' }
         });
}

Ответы [ 2 ]

3 голосов
/ 02 декабря 2009

Я думаю, что ваша проблема в функции метрик. (также я предполагаю, что вы используете JQuery)

В данный момент ваша функция метрик запрашивает страницу на сервере, но ничего с ней не делает.

  1. Измените метод showUsers () бэкэнда на что-то вроде: 

    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. изменить user_metrics.js на что-то вроде: 

    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' }
             });
    }
0 голосов
/ 01 декабря 2009

Я заставил это работать, но не так, как мне бы хотелось. Я решил опубликовать ответ, так что если кто-то еще столкнется с этой проблемой, он сможет заставить его хотя бы работать.

По какой-то причине, и я предполагаю, что файл javascript и файл фактического представления (html) разделены из-за того, что массив не виден файлу javacscript. Вопрос заключается в функции 

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' }
     });
}

потому что они отдельные 

          <?php echo $visits ?>

ничего не возвращает. Я исправил это, просто перейдя в представление и скопировав содержимое функции между двумя тегами в верхней части HTML-файла. Это должно выглядеть так: 

<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>

Мне не очень нравится это решение, потому что оно отходит от фреймворка, но пока это единственное решение, которое мне удалось найти.

...