2014-12-16 6 views
5

Ho problemi a propagare custom_properties come il colore nel mio grafico di google attraverso il livello python gviz_api.Feed google charts proprietà personalizzate come il colore attraverso gviz_api

desidero creare un grafico a barre con barre colorate individualmente come nell'esempio qui: https://developers.google.com/chart/interactive/docs/gallery/barchart#BarStyles

ma non riesco a capire come impostare questa throug il gviz_api (http://code.google.com/p/google-visualization-python/).

Sto inserendo i dati in qualsiasi modo, dizionari, elenchi, gruppi irregolari, una riga alla volta, purché sia ​​possibile colorare le barre singolarmente. Ecco il mio ultimo tentativo non-lavoro, generate.py:

import gviz_api 
def main(): 
    # Creating the data 
    description = {"test" : ("string", "Test name"), 
        "duration" : ("number", "Duration")} 
    data = [dict(test="test A", duration=1000, custom_properties={"role":"color:green"}), 
      {"test": "test B", "duration": 4000}] 

    # Loading it into gviz_api.DataTable 
    data_table = gviz_api.DataTable(description, custom_properties={"role":"style"}) 
    data_table.LoadData(data) 

    # Creating a JSon string 
    json = data_table.ToJSon(columns_order=("test", "duration"), order_by="test") 

    # Read page_template from file 
    f = open('template.html', 'r') 
    page_template = f.read() 
    # Putting the JSon string into the template 
    print page_template.format(json) 

if __name__ == '__main__': 
    main() 

e il corrispondente template.html:

<html> 
<script src="https://www.google.com/jsapi" type="text/javascript"></script> 
<script> 
google.load('visualization', '1', {{packages:['corechart']}}); 

google.setOnLoadCallback(drawChart); 
function drawChart() {{ 
    var options = {{ 
    title: 'Test results', 
    legend: 'none', 
    chartArea: {{ width: "50%", height: "70%" }} 
    }} 

    var json_chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    var json_data = new google.visualization.DataTable({0}, 0.6); 
    json_chart.draw(json_data, options); 
}} 
</script> 
<body> 
    <div id="chart_div"></div> 
</body> 
</html> 

risposta

1

Dopo aver lottato un po 'con gviz_api e dare uno sguardo alla sua realizzazione ho rinunciato e ha deciso di non utilizzare il wrapper gviz_api. Invece ho trasferito i dati al modello tramite un array e ottenuto le barre colorate individualmente che cercavo. Con la dipendenza gviz_api fuori mano, Google Chart, different color for each bar contiene buone informazioni.

generate.py:

f = open('template.html', 'r') 
page_template = f.read() 
f.close() 

testData = ['Test 1', 43, 'PASS', 'Test 2', 54, 'FAIL'] 

print page_template.format(testData) 

template.html:

<html> 
<script src="https://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> 
google.load("visualization", '1.1', {{packages:['corechart']}}); 
google.setOnLoadCallback(drawChart); 
function drawChart() {{ 
    var options = {{ 
    title: 'Test results', 
    legend: 'none', 
    chartArea: {{ width: "50%", height: "70%" }} 
    }} 

    var barChart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', 'Test name'); 
    dataTable.addColumn('number', 'Duration'); 
    dataTable.addColumn({{ type: 'string', role: 'style' }}); 

    // Import array with contents: [<test name>, <duration>, <result>, .. }} 
    testData = {0} 

    dataTable.addRows(testData.length/3); 
    for (i = 0; i < testData.length/3;i++) {{ 
     dataTable.setValue(i, 0, testData[i*3]); 
     dataTable.setValue(i, 1, testData[i*3+1]); 
     if (testData[i*3+2] == 'PASS') {{ 
     dataTable.setValue(i, 2, 'color:green'); 
     }} else 
     dataTable.setValue(i, 2, 'color:red'); 
     }} 
    }} 
    barChart.draw(dataTable, options); 
    }} 
</script> 
<body> 
    <div id="chart_div"></div> 
</body> 
</html> 

Il raddoppiato graffe nel modello sono lì per consentire l'utilizzo del metodo pitone String.Format().

+0

Hai mai lavorato con gviz_api? – Jglstewart

2

Ho trovato la soluzione per questo.

Alla tua descrizione/dati, aggiungi una terza colonna che conterrà la tua proprietà.

description = {"test" : ("string", "Test name"), 
        "duration" : ("number", "Duration"), "property": ("string", '', {'role':'style'})} 

data = [dict(test="test A", duration=1000, property = "color:green"), 
      {"test": "test B", "duration": 4000, property = "color:red"}] 

Questo dovrebbe funzionare a meno che l'ordine delle colonne non venga incasinato. Assicurati che l'ordine sia test, durata, proprietà. Non funzionerà se si tratta di test, proprietà, durata e non creerà un errore. Se finisci senza testare prima verrà visualizzato un errore di dominio.

Spero che questo aiuti chiunque stia cercando di farlo!

+0

È possibile (ri) ricordare che l'ordine delle colonne può essere risolto quando si chiama il metodo ToJSon() della tabella dati, ovvero dall'OP sarebbe 'data_table.ToJSon (columns_order = (" test "," duration "," proprietà ")) , order_by = "test") ' – Paul