绘图与海军报图(plotting Graph with flot)

我想绘制图形使用海军报和MySQL，但发生异常

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

什么是错的代码？接下来，我想其中一个轴是时间绘制图表。

Answer 1:

 $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);

以上将消除与逗号分隔（其中，从我可以告诉，你永远不解决）问题。

接下来，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 ，所有的设置名称的假设。

还要注意，我把剧本出来的HTML，并把它内的jQuery window.onload语法： $(function () { 。这会去你的HTML头。

从我可以告诉，你是不是真的需要AJAX的，因为你没有定义任何类型的事件将触发$就功能。它看起来像你正在使用AJAX调用脚本时，你可以只把脚本到所加载的网页，就像同一个脚本：

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

Answer 2:

首先，它看起来像你创建你的PHP代码没有用逗号分隔分隔每个数据点列表项的JavaScript列表。

按照jQuery的$就文件传递给第一个参数success的功能是从服务器返回的数据，按照“的dataType”参数格式 。您还没有提供dataType参数。该文件说，如果没有它会智能地通过其中的responseXML或responseText的你的成功回调，基于MIME类型的响应 dataType已经指定。

我猜数据获取传递给绘图功能是一个普通的旧字符串，而不是如预期由海军报一个JavaScript列表对象。添加一个dataType: 'json'选项，将$.ajax调用应该解决这个问题了。