Présentation
Les types de données de colonne date et datetime DataTable utilisent la classe de date JavaScript intégrée.
Important:Dans les objets de date JavaScript, les mois sont indexés à partir de zéro et augmentent jusqu'à onze, le mois de janvier étant le 0 et le mois de décembre le 11.
Dates et heures avec le constructeur de dates
Dates utilisant le constructeur de dates
Pour créer un objet Date, appelez le constructeur Date() avec le mot clé new, avec des arguments pour spécifier les composants de la date. Ces arguments prennent la forme de plusieurs nombres correspondant aux différentes propriétés de votre date.
new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)
Lorsque vous utilisez le constructeur de date avec le type de données date, il vous suffit de spécifier l'année, le mois et le jour.
Le constructeur de date peut également prendre la forme new Date(Milliseconds), où Millisecondes correspond à la distance en millisecondes de la date souhaitée à partir du 1er janvier 1970 00:00:00 UTC. Pour les dates et heures antérieures à cette date, un nombre négatif en millisecondes s'affiche.
Le constructeur de date est utile pour créer manuellement votre table de données à l'aide des méthodes addColumn(), addRow() et addRows(), ainsi que de la méthode arrayToDataTable(). Toutefois, si vous utilisez JSON pour spécifier des données, vous devez utiliser la représentation de chaîne.
Le constructeur de date JavaScript peut également accepter une représentation de la date sous forme de chaîne en tant qu'argument. Cette chaîne peut prendre plusieurs formes différentes. Les formes les plus fiables sont conformes à la spécification RFC 2822 ou à la spécification ISO 8601. Les formats sont les suivants:
-
RFC 2822 :
'MMM DD, YYYY'ou'DD MMM, YYYY'(exemple :new Date('Jan 1, 2015')ounew Date('1 Jan, 2015')) -
ISO 8601 —
'YYYY-MM-DD'(exemple:new Date('2015-01-01'))
Avertissement : La représentation de chaîne dans le constructeur de date peut être analysée différemment en fonction des navigateurs et des versions de navigateur, renvoyant ainsi des dates différentes pour la même chaîne. Par conséquent, il est déconseillé de transmettre des chaînes au constructeur de date. Il est recommandé d'utiliser uniquement des nombres pour les arguments du constructeur de date.
La chronologie ci-dessous montre le champion du Super Bowl de chaque saison de la NFL depuis l'année 2000.
Vous trouverez ci-dessous le code permettant de créer cette chronologie. Notez l'utilisation des constructeurs new Date() et les numéros fournis pour chaque date, en utilisant des mois basés sur 0, comme indiqué précédemment.
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);
}
Date et heure utilisant le constructeur de date
Le type de données de la colonne datetime de DataTable utilise le même constructeur de date que le type de données date, mais utilise maintenant tous les arguments pour renseigner l'heure.
Vous pouvez également transmettre une représentation de chaîne de datetime dans le constructeur de date. Une représentation de datetime sous forme de chaîne consiste à ajouter les heures, les minutes et les secondes, en plus du décalage horaire de quatre chiffres (par exemple, -0800, heure normale du Pacifique). Pour la spécification RFC 2822, l'heure et le fuseau horaire sont ajoutés avec des espaces entre la date et l'heure, et l'heure et le fuseau horaire. Dans la spécification ISO 8601, il n'y a pas d'espace. Au lieu de cela, la date est suivie d'un "T" majuscule pour indiquer un composant d'heure. Il n'y a pas non plus d'espace entre l'heure et le décalage horaire. La chaîne de date datetime complète pour le 6 décembre 2014 à 10h30 PST serait :
- RFC 2822 :
Dec 6, 2014 10:30:00 -0800. - ISO 8601 :
2014-12-06T10:30:00-0800.
Avertissement : Là encore, la représentation de chaîne peut être analysée différemment en fonction des navigateurs/versions. En particulier, en ce qui concerne l'heure et les fuseaux horaires, il existe des différences selon que la date et l'heure sont renvoyées avec un fuseau horaire UTC (GMT), ou qu'elles sont décalées et renvoyées selon l'heure locale. C'est également pour cette raison que l'utilisation de chaînes datetime n'est pas recommandée.
La chronologie ci-dessous détaille une journée moyenne à l'aide du type de données "Date/Heure".
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);
}
Dates, heures et fuseaux horaires
À l'aide du constructeur de date, pour date ou datetime, renvoie la date ou la date et l'heure souhaitées dans le fuseau horaire défini par le navigateur de l'utilisateur.
Vous pouvez définir votre objet Date sur un fuseau horaire spécifique de plusieurs façons. Tout d'abord, Google Charts fournit un formateur de date dans lequel vous pouvez spécifier un timeZone. Vous obtiendrez ainsi une valeur formatée pour chacune des valeurs date et datetime de votre table de données. Vous pouvez également transmettre une chaîne en tant qu'argument au constructeur new Date() ou encapsuler vos arguments dans la méthode Date.UTC(), par exemple:
new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))
Un objet Date est alors défini sur la date et l'heure spécifiées dans le fuseau horaire UTC (GMT). À partir de là, vous pouvez calculer le décalage souhaité pour le fuseau horaire et définir les dates et heures comme vous le souhaitez.
Dates et heures avec la représentation de chaîne de date
Lors de la sérialisation des données à l'aide de la notation littérale d'objet DataTable pour créer votre table, le constructeur new Date() ne peut pas être utilisé. Au lieu de cela, Google Charts fournit une représentation de chaîne de date qui permet à votre date ou datetime d'être sérialisée et analysée correctement lors de la création d'un DataTable. Ce format de chaîne "Date" supprime simplement le mot clé new et encapsule l'expression restante entre guillemets:
"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"
Important : Lorsque vous utilisez cette représentation de chaîne de date, comme pour le constructeur new Date(), les mois sont indexés à partir de zéro (janvier est le mois 0, décembre correspond au mois 11).
Vous trouverez ci-dessous la même chronologie que pour le Super Bowl, mais nous utilisons désormais la notation littérale des objets JavaScript et le format de chaîne "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);
}
Ce format peut également être utilisé dans la méthode arrayToDataTable(), à condition que, dans le premier tableau, où les libellés de colonne sont spécifiés, vous déclarez la colonne nécessaire comme étant type: 'date' ou 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)"]
]);
Travailler avec Timeofday
Le type de données de la colonne timeofday de DataTable utilise un tableau de 3 ou 4 chiffres, représentant respectivement des heures, des minutes, des secondes et éventuellement des millisecondes. L'utilisation de timeofday est différente de celle de date et datetime, car les valeurs ne sont pas spécifiques à une date, tandis que date et datetime spécifient toujours une date.
Par exemple, l'heure 8:30 serait [8, 30, 0, 0], la quatrième valeur étant facultative ([8, 30, 0] générerait la même valeur 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));
}
Libellés de l'axe, du quadrillage et des coches de mise en forme
Lorsque vous travaillez avec des dates, une date et une heure, ainsi que des heures de la journée, il peut être utile de formater les étiquettes de l'axe, du quadrillage ou des graduations d'une certaine manière. Vous pouvez y parvenir de différentes manières.
Tout d'abord, vous pouvez utiliser l'option hAxis.format ou vAxis.format. Cette option s'applique lorsque l'option gridlines.count est omise, auquel cas le graphique est défini par défaut sur un nombre de 5, et lorsqu'il est défini sur un nombre autre que -1. Cela vous permet de spécifier une chaîne de format dans laquelle vous utilisez des espaces réservés pour différentes parties de votre date/heure/heure. Consultez la documentation de référence sur le formateur de date, en particulier la section pattern pour en savoir plus sur les espaces réservés et leur fonctionnement.
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);
};
}
Vous pouvez également fournir des règles de mise en forme pour des unités de date et d'heure spécifiques en incluant une option units sous gridlines et minorGridlines pour les deux axes. Cette option n'est utilisée que si l'option gridlines.count est définie sur -1.
L'option gridlines.units est un objet dans lequel vous spécifiez le format des différents aspects de date/datetime/timeofday pour le quadrillage calculé, et votre graphique calcule les lignes de quadrillage en fonction du premier format correspondant à l'espace du libellé de quadrillage.
Vous pouvez définir les formats en années, mois, jours, heures, minutes, secondes et millisecondes.
L'option de format accepte un tableau de formats de chaîne et les utilise dans l'ordre jusqu'à ce qu'un format corresponde à la zone du libellé. C'est pourquoi nous vous recommandons de lister les formats du plus long au plus court. Les formats de chaîne utilisent les mêmes modèles que la référence de formateur de date mentionnée précédemment.
Notez que dans le graphique ci-dessus, lorsque vous modifiez la fenêtre d'affichage, le format de l'unité hours change, étant donné que les heures passent du quadrillage mineur au principal et que le format des options change avec elles. Notez également que minorGridlines utilise le deuxième format, plus court, car les premiers ne s'adaptent pas à l'espace dans chaque instance.
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']}
}
}
}
En savoir plus sur les dates JavaScript
Si vous souhaitez en savoir plus sur l'objet Date() JavaScript, le Mozilla Developer Network est une excellente ressource. Vous pouvez en apprendre davantage sur les objets JavaScript Date.