2010-12-09 36 views
2

我正在使用Flot繪製折線圖,​​而我的數據集是一個相當大的JSON blob數組,它看起來像(爲了簡潔目的而被截斷):Flot線條圖和大型JSON數據blob未格式化爲Flot API規格

[{"load_data": 5047, "url": "http://this.com", "timestamp": "2010-12-03 17:06:45", "formatted_timestamp": 1291396005000, "load_time": 4359}, 
{"load_data": 8658, "url": "https://that.com", "timestamp": "2010-12-03 17:06:24", "formatted_timestamp": 1291395984000, "load_time": 7516}, 
{"load_data": 7372, "url": "https://theother.com, "timestamp": "2010-12-03 17:06:22", "formatted_timestamp": 1291395982000, "load_time": 7372}] 

所以海軍報根據自己的API文檔例如喜歡他們的JSON格式,如:

{ 
    label: "y = 3", 
    data: [[0, 3], [10, 3]] 
    } 

他們想要的數據轉換成元組暗算的X,Y軸這是可以理解的。

我的問題是我將如何解析通過前面提到的JSON blob來獲取「formatted_timestamp」來表示x軸,然後「load_data」來表示y?意思是創建一個類似於FLOT json結構的系列和一系列值到圖中?

回答

4

此功能像你描述給定一個數組時會做的伎倆:

function format(source) { 
    var i, l, 
     dest = [], 
     row; 

    for(i = 0, l = source.length; i < l; i++) { 
     row = source[i]; 
     dest.push([row.formatted_timestamp, row.load_data]); 
    } 
    return dest; 
} 
+0

但是我發現一個標籤必須包含在系列中以便在Flo中顯示噸。由於JSON中沒有「label:」,我能夠使用類似「URL」的東西來代替它嗎? – ectype 2010-12-09 22:09:54

0

不知道我是否正確地得到了這個問題,但是這是我如何創建一個海軍報XY圖:

數據:[[1,0],[2,0] ....] - > 1和2是x軸的值。

<script language="javascript" type="text/javascript"> 
$(function() { 
var data = [{label:'my funky label',data:[[1, 0],[2, 0],[3, 0],[4, 0],[5, 18.125],[6, 20.625],[7, 15.4375],[8, 18.5625],[9, 22.375],[10, 13.5625],[11, 20.1875],[12, 5.5]]}]; 
var options = { 
    legend: { 
     show: true, 
     margin: 10, 
     backgroundOpacity: 0.5 
    }, 
    points: { 
     show: true, 
     radius: 4 
    }, 
    lines: { 
     show: true 
    }, 
    grid: { hoverable: true, clickable: true , color: "#999"} 
}; 

var plotarea = $("#plotarea"); 
plotarea.css("height", "450px"); 
plotarea.css("width", "600px"); 
$.plot(plotarea , data, options); 
}); 
</script>