CODEWITHSUNDEEP
phpjquerymysqljson
JoshG
JoshG

Reputation: 941

Using Flot jquery plugin with PHP and MySQL

I'm trying to get a jquery flot simple line graph to work using MySQL, PHP and jquery.
I am only getting a blank chart with no plotted points or line. As far as I can tell, everything should be correct in the code, but I'd like to see what I'm missing.

See the code below. Appreciate the help!

<html>
<head>

<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 450px; height: 200px; }
</style>


<script type="text/javascript" language="javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript" src="../flot/jquery.flot.js"></script>

</head>
<body>

$lineqry = 

"SELECT
dsmp.metric_date,
dsmp.metric_value
FROM applications.daily_scorecard_metric_performance dsmp

$lres = mysql_query ($lineqry,$prod);
$lrow = mysql_fetch_array($lres);

   while($lrow = mysql_fetch_assoc($lres)) 
 {
    $lineset[] = array($lrow['metric_date'],$lrow['metric_value']);
}
?>


<script type="text/javascript">
var plotdata = <?php echo json_encode($lineset);?>;

$(function () {
$.plot($("#placeholder"), [ plotdata ]);
});
</script>

<div id="placeholder"></div>

</body>
</html>

Here's and example output of the array $lineresult in PHP:

array(9) { [0]=> array(2) { [0]=> string(10) "2013-09-30" [1]=> string(1) "0" } [1]=> array(2) { [0]=> string(10) "2013-10-01" [1]=> string(3) "423" } [2]=> array(2) { [0]=> string(10) "2013-10-02" [1]=> string(3) "404" } [3]=> array(2) { [0]=> string(10) "2013-10-03" [1]=> string(3) "428" } [4]=> array(2) { [0]=> string(10) "2013-10-04" [1]=> string(3) "353" } [5]=> array(2) { [0]=> string(10) "2013-10-05" [1]=> string(3) "190" } [6]=> array(2) { [0]=> string(10) "2013-10-06" [1]=> string(3) "315" } [7]=> array(2) { [0]=> string(10) "2013-10-07" [1]=> string(3) "531" } [8]=> array(2) { [0]=> string(10) "2013-10-08" [1]=> string(3) "520" } }

here's the output of the json_encode:

[["2013-09-30","0"],["2013-10-01","423"],["2013-10-02","404"],["2013-10-03","428"],["2013-10-04","353"],["2013-10-05","190"],["2013-10-06","315"],["2013-10-07","531"],["2013-10-08","520"]]

Upvotes: 1

Views: 3089

Answers (2)

MackieeE
MackieeE

Reputation: 11862

To extend on Koala_dev's answer, you'll need to pass extra options into the $.plot() object for timespans to be correctly recognised. 

/**
 *  Creates for json:
 *  [[13805000000, 0],[138080600000, 423].. etc
**/
$lineset[] = array(
               strtotime($lrow['metric_date']) * 1000, 
               (int) $lrow['metric_value']
             );

This'll print with the timestamps along the x-axis; then to convert into actual readable Date formats, you'll need to add it along with your options at the point of calling $.plot();

enter image description here

/**
 *  Flot Options,
 *  Modify the timestamps with:
 *  %Y - Year, %m - Month, %d - Day
**/
var opts = { 
    xaxis: {
        mode: "time",
        timeformat: "%Y/%m/%d"
    }
};

if ( typeof $.fn.plot !== 'undefined' ) {
     $.plot( $("#placeholder"), [ plotdata ], opts );
}

Which then finally produces the correct chart below with the readable x-axis:

enter image description here

Upvotes: 2

omma2289
omma2289

Reputation: 54629

From the documentation it seems that the plugin doesn't support data as strings, also to produce a time series you need to use timestamps and include the time plugin: jquery.flot.time.js.

Add that js file and make the following change to your PHP code to supply the correct data:

$lineset[] = array(strtotime($lrow['metric_date']) * 1000, (int) $lrow['metric_value']);

Upvotes: 2

Related Questions