使用數據存儲數據呈現谷歌圖表

我很努力地使用存儲在數據存儲中的數據來呈現谷歌圖表。此刻我查詢了數據模型：使用數據存儲數據呈現谷歌圖表

results = MyDataModel.query().fetch()

現階段我不確定該怎麼做。例如，是它最好在像Python創建一個列表：

result_list = [] 
for result in results: 
    result_list.append([result.employee, result.salary])

，然後使用Jinja2的模板，將其傳遞到一個數組表：

var data = google.visualization.arrayToDataTable([ 
    ['Employee Name', 'Salary'], 
    {% for result in result_list %} 
    {{result | safe}} 
    {% endfor %}, 
    false);

或者是最好的動態添加行數據成一個DataTable還是最好直接查詢數據存儲？

我試過哪種方式，我一直在努力渲染任何東西。任何幫助，將不勝感激。

來源

2015-05-22 Ron

，你在你的問題描述我會做你的Jinja2模板。這不適合你嗎？請注意，您可以將'results'傳遞給您的模板，並且您不需要創建'result_list'。 –

謝謝@Kekito，我無法讓它工作。由於發佈我注意到可能出現的問題，我想我可能需要一個「」後{{結果|安全}}但我試過，仍然沒有呈現。 – Ron

@Kekito - 我忘了提，我的查詢中包含其他領域，如date_started等這樣會是更好的過濾出這些查詢的開始，而不是創造result_list？ – Ron

你已經有了將數據插入Jinja2模板的正確思路。看起來你只是沒有正確格式化輸入到google.visualization.arrayToDataTable。請注意，您的一個空心方括號（[）未關閉。

下面是我如何做到這一點，以防萬一它可以幫助你的例子。你可以看到它here。

創建result_list數組沒有意義。 results查詢將被處理，無論它是否在您的處理程序或模板中執行都無關緊要。

<script type="text/javascript"> 
var data = new google.visualization.DataTable(); 
data.addColumn("string", "Candidate"); 
data.addColumn("number", "Votes"); 
data.addColumn({type:"string", role:"tooltip"}); 
data.addColumn({type: "boolean", role:"certainty"}); 
data.addColumn("number", "Received"); 
data.addColumn({type:"string", role:"tooltip"}); 
data.addColumn("number", "Transferred"); 
data.addColumn({type:"string", role:"tooltip"}); 
data.addRows([["Vanilla", 110.000000, "Votes: 110", true, 0.000000, "Votes: 110", 0.000000, "Votes: 110"],["Chocolate", 117.000000, "Votes: 117", true, 0.000000, "Votes: 117", 0.000000, "Votes: 117"],["Strawberry", 80.000000, "Votes: 80", true, 0.000000, "Votes: 80", 0.000000, "Votes: 80"],["Chocolate Chip", 103.000000, "Votes: 103", true, 0.000000, "Votes: 103", 0.000000, "Votes: 103"],["Cookies and Cream", 118.000000, "Votes: 118", true, 0.000000, "Votes: 118", 0.000000, "Votes: 118"],["Exhausted", 0.000000, "Votes: 0", true, 0.000000, "Votes: 0", 0.000000, "Votes: 0"]]); 
var formatter = new google.visualization.NumberFormat({fractionDigits:0}); 
formatter.format(data, 1); 
formatter.format(data, 3); 
formatter.format(data, 5); 
var options = { 
width:'100%', 
height:200, 
legend:{position:"none"}, 
chartArea:{left:100,top:0,width:'100%',height:175}, 
hAxis:{maxValue:276}, 
isStacked:true, 
colors:["#fcd050", "#87cf32", "#ef3638"], 
}; 
var chart = new google.visualization.BarChart(document.getElementById("282249-1")); 
chart.draw(data, options); 
</script>

來源

2015-05-22 14:34:30

最好的方法是使用AJAX加載數據，所以您將需要有分離的處理程序，它將返回JSON響應。

通過使用谷歌的聚合物（保證只在Chrome瀏覽器的工作，雖然）它很容易使從JSON圖表：

<script src="//googlewebcomponents.github.io/google-chart/components/webcomponentsjs/webcomponents.min.js"></script> 
<link rel="import" href="//googlewebcomponents.github.io/google-chart/components/google-chart/google-chart.html"> 
<google-chart 
    options='{"title": "Super chart"}' 
    data='/chart-data.json'> 
</google-chart>

而且您的圖表處理程序：

result = [['Employee', 'Salary']] 
result += [[i.employee, i.salary] for i in MyDataModel.query().fetch(
    projection=['employee', 'salary'])] 
self.response.headers['Content-Type'] = 'application/json' 
self.response.write(json.dumps(result))

通過使用投影您將僅針對「小型」數據存儲操作計費 - 它將僅消耗1次讀取。強烈建議用於圖表！

來源

2015-05-22 14:42:18

爲什麼使用AJAX而不是在網頁上提供所需的數據會更好？ –

因爲當你有更多的僱主時，需要更多時間來請求他們。這仍然是非常沉重的數據存儲請求。 –

谷歌圖表有Data Source Python Library你可以用它來輸出JSON在服務器端，以幫助更容易地處理格式。從上面使用您result_list：

import gviz_api 
datatable = gviz_api.DataTable([('Employee', 'string'), ('Salary', 'number')]) 
datatable.LoadData(result_list) 
json = datatable.ToJSon() 
# json is your jinja variable

而且在你的模板：

var data = {{json|safe}};

來源

2015-05-22 19:03:36 Annie

這是否適用於最新的python？ –

使用數據存儲數據呈現谷歌圖表

回答

相關問題