JavaScript圖表工具flot連結資料庫

我們使用interacting.html作為範例
原圖：

原始程式碼：

var sin = [], cos = [];
//將資料放入陣列裡

    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }

var plot = $.plot($("#placeholder"),
    [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
       series: {
           lines: { show: true },
           points: { show: true }
       },
       grid: { hoverable: true, clickable: true },
       yaxis: { min: -1.2, max: 1.2 }
    });

我們用AJAX將資料取出，並將其放入二維陣列中，yData.push([ i , a[i].data1]) 第一個為項數 i ，在圖表上顯示第 i 筆，第二個為資料，在圖表上則顯示第 i 筆的資料，如果此資料為x軸上的刻度的話，可以使用字串的型態，EX：xData.push([i, a[i].data2]);。



AJAX程式碼：

$.ajax({
url: 'php/selectDATA.php',
type: 'POST',
scriptCharse: 'UTF8',
data: {
code: patcode
},
success: function(json){
var a = eval('(' + json + ')');


for(var i = 0 ; i < a.length ; i++)
{
yData.push([i, a[i].data1]);   //設定y軸的資料[[0,106],[1,111],[2,113],....]
xData.push([i, a[i].data2]);   //設定x軸的資料[[0,"2012-05-12"],[1,"2012-05-12"]....]
}
        }
});

將上面的資料取出後直接放在data後面就可以了，我們的xData.push([i, a[i].data2]);是為了x軸的刻度，所以要在xaxis裡使用ticks才可以在x軸的刻度上使用字串(官網有API提供其他作法)，EX：xaxis: { ticks: xData }。

修改後程式碼：

var plot = $.plot($("#placeholder"),
 [ {  label: "測試", data: yData } ], {
series: {
 lines: { show: true },
 points: { show: true }
},
 grid: { hoverable: true, clickable: true },
 xaxis: {               
 ticks: xData 
 }
});

用資料庫畫出的圖形：