使用mysql和ajax用FLOT绘制图形

时间:2009-11-30 14:03:35

标签: php mysql ajax codeigniter flot

我正在尝试使用flot来绘制从MySQL数据库中提取的一些数据。我是登录用户登录访问,我有一个SQL函数,可以检索给定月份每天的访问次数getStats($ day)。我在线阅读了一些如何正确执行此操作的示例,但由于某些原因,当我尝试在我的javascript文件中绘制数组数据时,它出现了空白 - > '数据:'。以下是我的代码。我正在使用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);
}

查看---&gt; user_metrics.php

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

Javascript ---&gt; 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 个答案:

答案 0 :(得分:3)

我认为您的问题属于指标功能。 (我也猜你在使用JQuery)

目前,您的指标功能会在后端请求一个页面,但不对其执行任何操作。

  1. 将后端方法showUsers()更改为:
  2. 
        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更改为:
    2. 
          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' }
                   });
          }
      

答案 1 :(得分:0)

我得到了它的工作但不是我想要的方式。我想我会发布答案,所以如果有其他人遇到这个问题他们可以得到它至少工作。

所以出于某种原因,我假设因为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>

我真的不喜欢这个解决方案,因为它正在脱离框架,但到目前为止它是我能够提出的唯一解决方案。