如何繪制多圖然后添加從jQuery Flo中的MySQL動態拉出的X軸標簽

Question

我有一個工作的浮動圖，使用ajax從sql動態顯示。 我的問題是，我只能繪制一個系列。 我的另一個問題是x軸標簽。 我希望將x軸標簽動態地從sql date字段中拉出。

這是我的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); 
    }

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

要獲取第二個數據集，您需要生成另一個x，y值數組，然后將其添加到datasets ：

在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

然后在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);

要處理日期，請首先檢查此示例 。 基本的處理方法是將xaxis模式設置為“時間”，然后將PHP中的日期作為Javascript時間戳輸入其中。

因此，您需要在PHP中更改$dd變量的創建，然后在調用$.plot時添加一些選項：

//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"
   }
});