Problem with plotting Graph with flot

Question

Hello Gurus I need urgent help and in several steps so let's take this step by step I want to plot graph using flot and mysql but an exception occurs

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 "]";

And for plotting

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

Can anyone tell me what is wrong with this code Next i want to plot graph with one of the axis is time

Answer 1

Firstly it looks like the JavaScript list you are creating with your PHP code isn't separating each data point list item with a comma separator.

According to the jQuery $.ajax documentation the first argument passed to the success function is the data returned from the server, formatted according to the 'dataType' parameter. You haven't provided a dataType parameter. The docs say it will intelligently pass either responseXML or responseText to your success callback, based on the MIME type of the response if no dataType has been specified.

I'm guessing the data getting passed to the plot function is a plain old string instead of a JavaScript list object as expected by Flot. Adding a dataType: 'json' option to your $.ajax call should fix this up.

Answer 2

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

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>

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.

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.

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.