Google Charts API - Patrones de columna y tipo de datos "TimeOfDay"

Question

Estoy trabajando con la API de Google Charts para crear un gráfico del rendimiento de la prueba de un alumno. En el eje X, el gráfico muestra los días de la semana. En el eje Y, el gráfico muestra cuánto tiempo pasó el alumno tomando el examen. (El objetivo es que los maestros vean si el estudiante acelera). Sin embargo, tengo un problema:

Mis datos están en el formato de hora, y estoy proporcionando valores al gráfico como duraciones de tiempo usando el formato Google Charts [HH, MM, SS, MSEC]. Cuando se representa el gráfico, el eje Y se imprime como "HH: MM: SS". Realmente me gustaría personalizar eso porque los segundos son bastante inútiles y parece más desordenado de lo que me gustaría.

La API de gráficos dice que puede especificar un "patrón" para una columna y he especificado "HH: MM". Sin embargo, eso no parece tener efecto en absoluto. ¿Alguien tiene experiencia formateando timeofday en Google Charts y sabe cómo hacer esto?

Answer 1

El formato está enterrado profundamente en la documentación de la API. (http://code.google.com/apis/chart/interactive/docs/reference.html). Se trata de trimestre camino hacia abajo, que dice:

Si el tipo de columna es 'timeofday', el valor es una matriz de cuatro números: [horas, minutos, segundos, milisegundos].

Answer 2

En el chart de las opciones objeto que podría establecer el objeto vAxis con el campo formato y proporcionar una cadena con el patrón que desea utilizar aquí un ejemplo:

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"}} 
); 

Mira el Objeto vAxis.

Para el formato de cadena debe mirar http://userguide.icu-project.org/formatparse/datetime para crear el patrón que prefiera.

Answer 3

Más que palabras pueden decir: El followingURL es una versión de trabajo completo para Stockprices durante los días, y se puede encontrar en 'http://www.harmfrielink.nl/Playgarden/GoogleCharts-Tut-07.html' Desde una lista completa no se puede contabilizar correctamente Doy solamente las partes importantes:

// 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> 

El ejemplo:

• Haz tu hAxis formateados con el formato HH: mM es decir 18:00 a las 6:00 AM.
• Formatea los datos en el gráfico (pase el ratón sobre los gráficos de datos) con el día y la hora y el precio de la acción.
• Da las líneas de la cuadrícula del gráfico.

Espero que este ejemplo aclare cómo manejar los datos de manera correcta.

Answer 4

Puede usar la opción hAxis.format o vAxis.format. Esto le permite especificar una cadena de formato, en el que utiliza las letras de marcador de posición para las diferentes partes de su timeofday

para deshacerse de los segundos, se puede establecer el formato del eje Y de esta manera:

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