Google Charts - Modelli di colonne e tipo di dati "TimeOfDay"

Question

Sto lavorando con l'API Google Charts per creare un grafico delle prestazioni di prova di uno studente. Sull'asse X, il grafico mostra i giorni della settimana. Sull'asse Y, il grafico mostra per quanto tempo lo studente ha trascorso l'esame. (L'obiettivo è per gli insegnanti di vedere se lo studente accelera). Tuttavia, ho un problema:

I miei dati sono nel formato timeofday e sto fornendo valori al grafico come durate di tempo utilizzando il formato di Google Charts [HH, MM, SS, MSEC]. Quando il grafico esegue il rendering, l'asse Y viene stampato come "HH: MM: SS". Mi piacerebbe davvero personalizzarlo perché i secondi sono abbastanza inutili e sembrano più messosi di quanto vorrei.

L'API dei grafici dice che è possibile specificare un "modello" per una colonna e ho specificato "HH: MM". Tuttavia, ciò non sembra affatto efficace. Qualcuno ha esperienza di formattazione timeofday in Google Charts e sa come farlo?

Answer 1

Il formato è nascosto nella documentazione dell'API. (Http://code.google.com/apis/chart/interactive/docs/reference.html). È circa un quarto fino in fondo, si dice:

Se il tipo di colonna è 'timeofday', il valore è un array di quattro numeri: [ora, minuti, secondi, millisecondi].

Answer 2

Nella tabella delle opzioni oggetto è possibile impostare l' oggetto vAxis con il campo formato e fornire una stringa con il modello che si desidera utilizzare Ecco un esempio:

new google.visualization.BarChart(document.getElementById('visualization')); 
    draw(data, 
     {title:"Yearly Coffee Consumption by Country", 
     width:600, height:400, 
     vAxis: {title: "Year", format: "yy"}, 
     hAxis: {title: "Cups"}} 
); 

sguardo al Oggetto vxis.

Per il formato stringa, è necessario cercare su http://userguide.icu-project.org/formatparse/datetime per creare il modello che si preferisce.

Answer 3

Più che le parole possano dire: Il followingURL è una versione di lavoro completa per Stockprices durante i giorni, e può essere trovato alla 'http://www.harmfrielink.nl/Playgarden/GoogleCharts-Tut-07.html' Dal momento che un elenco completo non può essere registrato correttamente Ho solo dare le parti importanti:

// Load the Visualization API and the piechart package. 
google.load('visualization', '1.0', {'packages':['corechart']}); 

// Set a callback to run when the Google Visualization API is loaded. 
google.setOnLoadCallback(drawChart); 

// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and 
// draws it. 
function drawChart() { 
    // Create the data table. 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('datetime', 'Time'); 
    dataTable.addColumn('number', 'Price (Euro)'); 
    dataTable.addRows([ 
     [new Date(2014, 6, 2, 9, 0, 0, 0), 21.40], 
     [new Date(2014, 6, 2, 11, 0, 0, 0), 21.39], 
     [new Date(2014, 6, 2, 13, 0, 0, 0), 21.20], 
     [new Date(2014, 6, 2, 15, 0, 0, 0), 21.22], 
     [new Date(2014, 6, 2, 17, 0, 0, 0), 20.99], 
     [new Date(2014, 6, 2, 17, 30, 0, 0), 21.03], 
     [new Date(2014, 6, 3, 9, 0, 0, 0), 21.05], 
     [new Date(2014, 6, 3, 11, 0, 0, 0), 21.07], 
     [new Date(2014, 6, 3, 13, 0, 0, 0), 21.10], 
     [new Date(2014, 6, 3, 15, 0, 0, 0), 21.08], 
     [new Date(2014, 6, 3, 17, 0, 0, 0), 21.05], 
     [new Date(2014, 6, 3, 17, 30, 0, 0), 21.00], 
     [new Date(2014, 6, 4, 9, 0, 0, 0), 21.15], 
     [new Date(2014, 6, 4, 11, 0, 0, 0), 21.17], 
     [new Date(2014, 6, 4, 13, 0, 0, 0), 21.25], 
     [new Date(2014, 6, 4, 15, 0, 0, 0), 21.32], 
     [new Date(2014, 6, 4, 17, 0, 0, 0), 21.35], 
     [new Date(2014, 6, 4, 17, 30, 0, 0), 21.37], 
    ]); 

    // Instantiate and draw our chart, passing in some options. 
    // var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 

    var options = { 
     title : 'AEX Stock: Nationale Nederlanden (NN)', 
     width : 1400, 
     height : 540, 
     legend : 'true', 
     pointSize: 5, 
     vAxis: { title: 'Price (Euro)', maxValue: 21.50, minValue: 20.50 }, 
     hAxis: { title: 'Time of day (Hours:Minutes)', format: 'HH:mm', gridlines: {count:9} } 
    }; 

    var formatNumber = new google.visualization.NumberFormat(
     {prefix: '', negativeColor: 'red', negativeParens: true}); 

    var formatDate = new google.visualization.DateFormat(
     { prefix: 'Time: ', pattern: "dd MMM HH:mm", }); 

    formatDate.format(dataTable, 0); 
    formatNumber.format(dataTable, 1); 

    chart.draw(dataTable, options); 
    } // drawChart 

</script> 
</head> 
<body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div" style="width:400; height:300"></div> 
</body> 

L'esempio sarà:

• Fare un hAxis formattati con il formato HH: mM cioè 18:00 per 18:00.
• Formatta i dati nel grafico (passa il mouse sopra i dati-plot) con il giorno e l'ora e il prezzo delle azioni.
• Fornisce le linee della griglia del grafico.

Spero che questo esempio chiarisca come gestire i dati in modo corretto.

Answer 4

È possibile utilizzare l'opzione hAxis.format o vAxis.format. Ciò consente di specificare una stringa di formato, in cui si utilizza le lettere segnaposto per le diverse parti del tuo timeofday

per sbarazzarsi dei secondi, è possibile impostare il formato del asse Y come questo:

var options = { 
    vAxis: { format: 'hh:mm' } 
    };