Descripción general
Los tipos de datos de las columnas DataTable date y datetime usan la clase de fecha integrada de JavaScript.
Importante: En los objetos de fecha de JavaScript, los meses se indexan a partir de cero y aumentan hasta once, enero es el mes 0 y diciembre el mes 11.
Fechas y horas con el constructor de fechas
Fechas que usan el constructor de fechas
Para crear un nuevo objeto Date, llama al constructor Date() con la palabra clave new, con argumentos para especificar componentes de la fecha. Estos argumentos tienen la forma de varios números correspondientes a las diferentes propiedades de tu fecha.
new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)
Cuando usas el constructor Date con el tipo de datos date, solo necesitas especificar el año, mes y día.
El constructor Date también puede tener el siguiente formato: new Date(Milliseconds), en el que los milisegundos son la distancia en milisegundos de la fecha deseada desde el 1 de enero de 1970 a las 00:00:00 UTC. Para las fechas y horas anteriores a esa fecha, se daría un número negativo de milisegundos.
El uso del constructor Date resulta útil cuando se construyen manualmente tu DataTable con los métodos addColumn(), addRow() y addRows(), así como el método arrayToDataTable(). Sin embargo, si usas JSON para especificar datos, debes usar la representación de cadena.
El constructor de fecha de JavaScript también puede aceptar una representación de cadena de la fecha como argumento. Esta cadena puede adoptar varias formas diferentes. Los formularios más confiables cumplen con las especificaciones RFC 2822 o ISO 8601. Estos son los formatos:
-
RFC 2822:
'MMM DD, YYYY'o'DD MMM, YYYY'(por ejemplo:new Date('Jan 1, 2015')onew Date('1 Jan, 2015')) -
ISO 8601:
'YYYY-MM-DD'(ejemplo:new Date('2015-01-01'))
Advertencia: Es posible que diferentes navegadores y versiones diferentes analicen la representación de la cadena en el constructor de fecha de manera diferente, por lo que se mostrarán fechas diferentes para la misma cadena. Por lo tanto, no se recomienda pasar las cadenas al constructor Date. En cambio, se recomienda usar solo números para los argumentos del constructor de Fecha.
En la siguiente línea de tiempo, se muestra al campeón del Supertazón de cada temporada de la NFL desde el año 2000.
A continuación, se muestra el código para crear este cronograma. Observa el uso de los constructores new Date() y los números proporcionados para cada fecha, con meses basados en 0, como se mencionó antes.
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Team');
data.addColumn('date', 'Season Start Date');
data.addColumn('date', 'Season End Date');
data.addRows([
['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5)],
['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)],
['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)],
['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)],
['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)],
['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5)],
['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5)],
['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5)],
['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5)],
['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5)],
['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5)],
['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5)],
['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5)],
['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5)],
]);
var options = {
height: 450,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
Fechas y horas con el constructor de fecha
El tipo de datos de la columna datetime de DataTable usa el mismo constructor de fecha que el tipo de datos de date, pero ahora usa todos los argumentos para completar la hora.
Como alternativa, también se puede pasar una representación de cadena de datetime al constructor de fecha. Una representación de cadena de datetime consiste en agregar las horas, los minutos y los segundos, además del desplazamiento de 4 dígitos de la zona horaria (p.ej., la hora estándar del Pacífico [PST] es -0800). Para la especificación RFC 2822, la hora y la zona horaria se agregan con espacios
entre la fecha y la hora, y la hora y la zona horaria. En la especificación ISO 8601, no hay espacios. En cambio, la fecha va seguida de una “T” mayúscula para denotar un componente de tiempo. Tampoco hay espacio entre el horario y el desplazamiento de zona horaria. La cadena de fecha datetime completa para el 6 de diciembre de 2014 a las 10:30 a.m. (PST) sería la siguiente:
- RFC 2822:
Dec 6, 2014 10:30:00 -0800. - ISO 8601:
2014-12-06T10:30:00-0800.
Advertencia: Nuevamente, la representación de la cadena puede analizarse de manera diferente según el navegador o la versión. En particular, al trabajar con zonas horarias y zonas horarias, existen diferencias en cuanto a si la fecha y hora se muestra con una zona horaria UTC (GMT), o si se desplaza y se muestra en la hora local. Este es otro motivo por el que no se recomienda el uso de cadenas de fecha y hora.
En el siguiente cronograma, se desglosa un día promedio mediante el tipo de datos de fecha y hora.
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Activity', 'Start Time', 'End Time'],
['Sleep',
new Date(2014, 10, 15, 0, 30),
new Date(2014, 10, 15, 6, 30)],
['Eat Breakfast',
new Date(2014, 10, 15, 6, 45),
new Date(2014, 10, 15, 7)],
['Get Ready',
new Date(2014, 10, 15, 7, 4),
new Date(2014, 10, 15, 7, 30)],
['Commute To Work',
new Date(2014, 10, 15, 7, 30),
new Date(2014, 10, 15, 8, 30)],
['Work',
new Date(2014, 10, 15, 8, 30),
new Date(2014, 10, 15, 17)],
['Commute Home',
new Date(2014, 10, 15, 17),
new Date(2014, 10, 15, 18)],
['Gym',
new Date(2014, 10, 15, 18),
new Date(2014, 10, 15, 18, 45)],
['Eat Dinner',
new Date(2014, 10, 15, 19),
new Date(2014, 10, 15, 20)],
['Get Ready For Bed',
new Date(2014, 10, 15, 21),
new Date(2014, 10, 15, 22)]
]);
var options = {
height: 450,
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
Fechas, horas y zonas horarias
Con el constructor de fecha, ya sea para date o datetime, se mostrará la fecha o la fecha y hora deseadas en la zona horaria que estableció el navegador del usuario.
Puedes configurar el objeto Date en una zona horaria específica de varias maneras. En primer lugar, Google Charts proporciona un formateador de fecha en el que puedes especificar un timeZone. Esto proporcionará un valor con formato para cada uno de los valores date y datetime en tu DataTable. También puedes pasar una string como tu argumento al constructor new Date(), o puedes unir tus argumentos en el método Date.UTC(), por ejemplo:
new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))
Esto establecerá un objeto Date en la fecha y hora especificadas en la zona horaria UTC (GMT). A partir de ahí, puedes calcular la compensación deseada para la zona horaria y configurar las fechas y horas como desees.
Fechas y horas que usan la representación de cadena de fecha
Cuando se serializan datos con la notación de literal de objeto DataTable de JavaScript para compilar tu DataTable, no se puede usar el constructor new Date(). En cambio, Google Charts proporciona una representación de cadena de fecha que permite que tu date o datetime se serialicen y analicen correctamente cuando se crea una DataTable. Este formato de cadena de fecha simplemente descarta la palabra clave new y une la expresión restante entre comillas:
"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"
Importante: Cuando se usa esta representación de cadena de fecha, como cuando se usa el constructor new Date(), los meses se indexan a partir de cero (enero es el mes 0 y diciembre es el mes 11).
A continuación, se muestra la misma línea de tiempo del Supertazón de antes, pero ahora se usa la notación literal de objetos JavaScript y el formato de cadena Date.
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable({
cols: [
{id: 'team', label: 'Team', type: 'string'},
{id: 'start', label: 'Season Start Date', type: 'date'},
{id: 'end', label: 'Season End Date', type: 'date'}
],
rows: [
{c: [{v: 'Baltimore Ravens'}, {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
{c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
{c: [{v: 'Indianapolis Colts'}, {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
{c: [{v: 'New York Giants'}, {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
{c: [{v: 'New Orleans Saints'}, {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
{c: [{v: 'Green Bay Packers'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
{c: [{v: 'New York Giants'}, {v: 'Date(2011, 8, 5)'}, {v: 'Date(2012, 1, 5)'}]},
{c: [{v: 'Baltimore Ravens'}, {v: 'Date(2012, 8, 5)'}, {v: 'Date(2013, 1, 5)'}]},
{c: [{v: 'Seattle Seahawks'}, {v: 'Date(2013, 8, 5)'}, {v: 'Date(2014, 1, 5)'}]}
]
});
var options = {
height: 450,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
Este formato también se puede usar en el método arrayToDataTable(), siempre que en el primer array, en el que se especifican etiquetas de columna, declares que la columna necesaria es type: 'date' o type: 'datetime'.
var data = google.visualization.arrayToDataTable([
["Team", {type: 'date', label: 'Season Start Date'}, {type: 'date', label: 'Season End Date'}],
["Baltimore Ravens", "Date(2000, 8, 5)", "Date(2001, 1, 5)"],
["New England Patriots", "Date(2001, 8, 5)", "Date(2002, 1, 5)"],
["Tampa Bay Buccaneers", "Date(2002, 8, 5)", "Date(2003, 1, 5)"],
["New England Patriots", "Date(2003, 8, 5)", "Date(2004, 1, 5)"],
["New England Patriots", "Date(2004, 8, 5)", "Date(2005, 1, 5)"],
["Pittsburgh Steelers", "Date(2005, 8, 5)", "Date(2006, 1, 5)"],
["Indianapolis Colts", "Date(2006, 8, 5)", "Date(2007, 1, 5)"],
["New York Giants", "Date(2007, 8, 5)", "Date(2008, 1, 5)"],
["Pittsburgh Steelers", "Date(2008, 8, 5)", "Date(2009, 1, 5)"],
["New Orleans Saints", "Date(2009, 8, 5)", "Date(2010, 1, 5)"],
["Green Bay Packers", "Date(2010, 8, 5)", "Date(2011, 1, 5)"],
["New York Giants", "Date(2011, 8, 5)", "Date(2012, 1, 5)"],
["Baltimore Ravens", "Date(2012, 8, 5)", "Date(2013, 1, 5)"],
["Seattle Seahawks", "Date(2013, 8, 5)", "Date(2014, 1, 5)"]
]);
Cómo trabajar con Timeofday
El tipo de datos de la columna timeofday de DataTable toma un array de 3 o 4 números que representan horas, minutos, segundos y, opcionalmente, milisegundos, respectivamente. El uso de timeofday es diferente de usar date y datetime en el sentido de que los valores no son específicos de una fecha, mientras que date y datetime siempre especifican una fecha.
Por ejemplo, la hora 8:30 a.m. sería [8, 30, 0, 0], y el cuarto valor sería opcional ([8, 30, 0] daría como resultado el mismo valor de timeofday).
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
[[8, 30, 45], 5],
[[9, 0, 0], 10],
[[10, 0, 0, 0], 12],
[[10, 45, 0, 0], 13],
[[11, 0, 0, 0], 15],
[[12, 15, 45, 0], 20],
[[13, 0, 0, 0], 22],
[[14, 30, 0, 0], 25],
[[15, 12, 0, 0], 30],
[[16, 45, 0], 32],
[[16, 59, 0], 42]
]);
var options = {
title: 'Total Emails Received Throughout the Day',
height: 450
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
Dar formato a las etiquetas de eje, línea de cuadrícula y marca
Cuando trabajas con fechas, fecha y hora y hora del día, es posible que quieras dar formato a las etiquetas de eje, de línea de cuadrícula o de marca de una manera determinada. Esto se puede lograr de varias maneras.
Primero, puedes usar la opción hAxis.format o vAxis.format. Esta opción se aplica cuando se omite la opción gridlines.count, en cuyo caso el gráfico se registra de forma predeterminada en 5 y cuando se establece en un número distinto de -1. Esto te permite especificar una string de formato, en la que usas letras de marcador de posición para diferentes partes de la fecha, la fecha y la hora o la hora del día. Consulta la referencia formateador de fechas, específicamente la sección pattern para obtener más información sobre los marcadores de posición y cómo funcionan.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addRows([
[new Date(2015, 0, 1), 5], [new Date(2015, 0, 2), 7], [new Date(2015, 0, 3), 3],
[new Date(2015, 0, 4), 1], [new Date(2015, 0, 5), 3], [new Date(2015, 0, 6), 4],
[new Date(2015, 0, 7), 3], [new Date(2015, 0, 8), 4], [new Date(2015, 0, 9), 2],
[new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
[new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
[new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
[new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
[new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
[new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
[new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
[new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7], [new Date(2015, 1, 2), 9]
]);
var options = {
title: 'Rate the Day on a Scale of 1 to 10',
width: 900,
height: 500,
hAxis: {
format: 'M/d/yy',
gridlines: {count: 15}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var button = document.getElementById('change');
button.onclick = function () {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ?
options.hAxis.format = 'MMM dd, yyyy' :
options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
}
También puedes proporcionar reglas de formato para unidades específicas de valores de fecha y hora. Para ello, incluye una opción units en gridlines y minorGridlines para ambos ejes. Esta opción solo se utilizará si la opción gridlines.count se establece en -1.
La opción gridlines.units es un objeto, en el que especificas el formato de los diferentes aspectos de fecha/fecha y hora/hora del día para la línea de cuadrícula calculada, y tu gráfico calculará las líneas de cuadrícula según el primer formato que se ajuste al espacio de la etiqueta de línea de cuadrícula.
Puedes configurar los formatos de años, meses, días, horas, minutos, segundos y milisegundos.
La opción de formato acepta un array de formatos de cadenas y los usa en orden hasta que un formato quepa en el área de la etiqueta. Por este motivo, se recomienda enumerar los formatos en orden del más largo al más corto. Los formatos de string usan los mismos patrones que la referencia de formateador de fechas mencionada anteriormente.
Ten en cuenta que, en el gráfico anterior, cuando se cambia la ventana de vista, cambia el formato de la unidad hours, ya que las horas cambian de líneas de cuadrícula menores a principales, y el formato de las opciones cambia con ellas. Además, ten en cuenta que minorGridlines usa el segundo formato más corto, ya que los primeros no caben en el espacio de cada instancia.
hAxis: {
viewWindow: {
min: new Date(2014, 11, 31, 18),
max: new Date(2015, 0, 3, 1)
},
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
}
Más información sobre las fechas de JavaScript
Si deseas obtener más información acerca del objeto Date() de JavaScript, la Red de desarrolladores de Mozilla es un excelente recurso. Allí podrás obtener toda la información sobre los
objetos de fecha de JavaScript.