用浮点图 [英] plotting Graph with flot

查看:39
本文介绍了用浮点图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想使用flot和mysql绘制图形,但是发生异常

I want to plot graph using flot and mysql but an exception occurs

getData.php

getData.php

       $sql = mysql_query("SELECT count(Msg_ID) as msgCount,From_user
                           FROM Messages
                           GROUP BY From_user");

            echo "[";
  while($result = mysql_fetch_array($sql))
  {
     //print_r($result);
     echo "[".$result['msgCount'].",".$result['From_user']."]"."\n";

   }

    echo "]";

用于绘图

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

                    <script type="text/javascript">

            var options = {
                    lines: { show: true },
                    points: { show: true },
                    xaxis: { min:0,max:5 },
                    yaxis: { min:1  ,max:60},
               };

    $.ajax({
                            url:"getData.php",
                            type:"post",
                            success:function(data)
                            {
                                    alert(data);
                                    $.plot($("#plotarea"),data,options);
                                    //alert(data);
                            }
                    })
                    </script>

    </div>

此代码有什么问题? 接下来,我想用轴之一是时间来绘制图.

What is wrong with this code? Next I want to plot graph with one of the axis is time.

推荐答案

 $sql = mysql_query("SELECT count(Msg_ID) as msgCount,From_user
                           FROM Messages
                           GROUP BY From_user");

  while($result = mysql_fetch_array($sql))
  {
     $user_data[] = array($result['msgCount'],$result['From_user']);
  }

  echo json_encode($user_data);

以上内容将消除逗号分隔的问题(据我所知,您从未解决过).

The above will eliminate issues with comma separation (which, from what I can tell, you never resolved).

接下来,javascript:

Next, the javascript:

  <script type="text/javascript">
    $(function () {
            var options = {
                    lines: { show: true },
                    points: { show: true },
                    xaxis: { min:0,max:5 },
                    yaxis: { min:1  ,max:60},
               };

    $.get("getData.php", function(data){
                            $.plot($("#plotarea"),data,options);
                         }, 
                json);
    });
   </script>

请注意,我没有将$.ajax更改为$.get,因为您没有将任何数据从页面传递到脚本,因此无需发布.如果使用$.get,则假定所有设置名称.

Notice that I changed $.ajax to $.get, since you weren't passing any data from the page to the script, a post is not necessary. And if you use $.get, all of the setting names are assumed.

还要注意,我从html中提取了脚本并将其放入jquery window.onload语法:$(function () {中.这将放在您的html的头部.

Also notice that I pulled the script out of the html and put it within the jquery window.onload syntax : $(function () { . This would go in the head of your html.

据我所知,您实际上并不需要ajax,因为您没有定义任何会触发$ .ajax函数的事件.只需将脚本放入加载页面的同一脚本中,就好像您正在使用ajax来调用脚本一样,

From what I can tell, you aren't really in need of ajax, since you didn't define any sort of event that would trigger the $.ajax function. It looks like you are using ajax to call a script when you could just put the script into the same script that loads the page, like:

 <?php
 $sql = mysql_query("SELECT count(Msg_ID) as msgCount,From_user
                           FROM Messages
                           GROUP BY From_user");

  while($result = mysql_fetch_array($sql))
  {
     $user_data[] = array($result['msgCount'],$result['From_user']);
  }
  ?>

  <script type="text/javascript">
    $(function () {
            var options = {
                    lines: { show: true },
                    points: { show: true },
                    xaxis: { min:0,max:5 },
                    yaxis: { min:1  ,max:60},
               };

     var userposts = <?php echo json_encode($user_data); ?>;

     $.plot($("#plotarea"),userposts,options);

   </script>      
   <style type="text/css">
   #plotarea {
        width: 600px, height: 300px;
   }
   </style>
   </head>
   <body>
   .....//Put whatever before the div
   <div id="plotarea"></div>
   .....//Finish up the page.

这篇关于用浮点图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆