Question

I have a working flot graph, showing dynamically from sql using ajax. My problem is that, I can only plot one series. My other problem is the x-axis label. I wanted for the x-axis label to be pulled from sql date field dynamically.

this is my ajax:

function getPlot() {
        $.ajax({
            url: "ajax/ajax-totalplot.php",
            dataType: "json",
            async: false,
            success: function(result) {
                d = result;
                //console.log(d);
            }
        });
        var data = d; // HOW CAN I ADD THE DATE FOR X-AXIS LABEL?
        var datasets = [ {
            "data" : data, lines: { show: true }, points: {show: true}
        }];
        $.plot('#Plot', datasets); 
    }

this is the php

//run query    
    $sql = "SELECT date, bread, flower FROM `job` WHERE month(date) = 12 ORDER BY date";  

    $result = mysql_query($sql);

    while($row = mysql_fetch_array($result)) {
        $dd = date('d', strtotime($row['date'])); 
        $graphdata[] = array( (int)$dd, (int)$row['bread']);
    }


    print json_encode($graphdata); //HOW CAN I ADD THE FLOWER FIELD TO INCLUDE IN THE GRAPH AS WELL?

Answer 1

To get a second data set, you need to produce another array of x,y values and then add it to datasets:

In PHP:

   while($row = mysql_fetch_array($result)) {
        $dd = date('d', strtotime($row['date'])); 
        $graphdata[] = array( (int)$dd, (int)$row['bread']);
        $graphdata2[] = array( (int)$dd, (int)$row['flower']);
    }  

   print json_encode(array($graphdata,$graphdata2)); //maybe

Then in JS:

var datasets = [ 
{
      "data" : data[0], lines: { show: true }, points: {show: true}
},
{
      "data" : data[1], lines: { show: true }, points: {show: true}
} //second set of data is just another object in the datasets array
];
$.plot('#Plot', datasets);

To deal with dates, first check this example. The basic deal is to set the xaxis mode to “time” and then feed your dates from PHP into it as Javascript timestamps.

So you need to change your creation of the $dd variable in PHP, and then when you call $.plot, add some options:

//Change your SQL:
$sql = "SELECT unix_timestamp(date)*1000, bread, flower FROM `job` WHERE month(date) = 12 ORDER BY date";  

//change how you receive the date field:
$dd = $row['date']

//change how you call plot in JS:
$.plot('#Plot',dataset,{
   xaxis: {
     mode: "datetime"
   }
});