Flotグラフの動的データ系列を作成する方法は？

Question

フロートグラフの動的データを作成する必要があります。私のx軸は時間であり、y軸は数です。

5つのグラフを別の色で表示する必要があります。 Flotのデータシリーズをどのように与えるか。

Answer 1

ここでは、時間をX軸とする5種類の色の5つのグラフの例を示します。リンクをクリックすると、データ系列とグラフが更新されます。

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

<div id="graph_1" style="width:300px;height:100px;"></div> 
<div id="graph_2" style="width:300px;height:100px;"></div> 
<div id="graph_3" style="width:300px;height:100px;"></div> 
<div id="graph_4" style="width:300px;height:100px;"></div> 
<div id="graph_5" style="width:300px;height:100px;"></div> 

<script> 
// Initialize the data to be graphed 
var data = new Array(); 
data[0] = new Array(); 
data[1] = new Array(); 
data[2] = new Array(); 
data[3] = new Array(); 
data[4] = new Array(); 

var ticks = new Array(); 

draw_graphs(); 

// Draw the graphs 
function draw_graphs() { 
    $.plot($("#graph_1"), [{data:data[0],color:1}],{ xaxis: { mode: "time" }}); 
    $.plot($("#graph_2"), [{data:data[1],color:2}],{ xaxis: { mode: "time" }}); 
    $.plot($("#graph_3"), [{data:data[2],color:3}],{ xaxis: { mode: "time" }}); 
    $.plot($("#graph_4"), [{data:data[3],color:4}],{ xaxis: { mode: "time" }}); 
    $.plot($("#graph_5"), [{data:data[4],color:5}],{ xaxis: { mode: "time" }}); 
} 

// Update the data 
function change_data(n) { 
    d = new Date(); 
    data[n].push([d.getTime(),n]); 
    draw_graphs(); 
} 

</script> 

<a href="#" onclick="change_data(0)">Update 1</a><br> 
<a href="#" onclick="change_data(1)">Update 2</a><br> 
<a href="#" onclick="change_data(2)">Update 3</a><br> 
<a href="#" onclick="change_data(3)">Update 4</a><br> 
<a href="#" onclick="change_data(4)">Update 5</a><br> 

またUpdating Graphs with AJAXとTime

上FLOT例ページを使用することができます