Présentation
Les types de données des colonnes DataTable date et datetime utilisent la classe Date JavaScript intégrée.
Important:Dans les objets Date JavaScript, les mois sont indexés à partir de zéro et augmentent jusqu'à onze, sachant que janvier correspond au mois 0 et décembre au mois 11.
Dates et heures utilisant le constructeur de date
Dates utilisant le constructeur de date
Pour créer un objet Date, appelez le constructeur Date() avec le mot clé new, avec des arguments permettant de spécifier les composants de la date. Ces arguments se présentent sous 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 Date avec le type de données date, il vous suffit de spécifier l'année, le mois et le jour.
Le constructeur Date peut également se présenter sous la forme new Date(Milliseconds), où les millisecondes correspondent à 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 est attribué.
Le constructeur Date est utile lorsque vous créez 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, la représentation sous forme de chaîne doit être utilisée.
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 différentes formes. Les formats les plus fiables sont conformes à la spécification RFC 2822 ou à la spécification ISO 8601. Les formats suivants sont disponibles:
-
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 Date peut être analysée différemment selon les navigateurs et les versions des navigateurs, renvoyant ainsi différentes dates pour la même chaîne. Par conséquent, il n'est pas recommandé de transmettre des chaînes au constructeur Date. Il est recommandé de n'utiliser que des nombres pour les arguments du constructeur 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 des nombres donnés 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);
}
Dates et heures à l'aide du constructeur de date
Le type de données de la colonne datetime DataTable utilise le même constructeur Date que le type de données date, mais utilise désormais tous les arguments pour remplir l'heure.
Une représentation sous forme de chaîne de datetime peut également être transmise au constructeur Date. Une représentation sous forme de chaîne de datetime consiste à ajouter les heures, les minutes et les secondes, en plus du décalage horaire à quatre chiffres (par exemple, l'heure normale du Pacifique (PST) est -0800). Conformément à 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'espaces. 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 la suivante :
- RFC 2822 :
Dec 6, 2014 10:30:00 -0800. - ISO 8601 –
2014-12-06T10:30:00-0800.
Avertissement:Là encore, la représentation de la chaîne peut être analysée différemment selon les navigateurs/versions. En ce qui concerne l'heure et les fuseaux horaires, il convient de noter qu'il existe des différences selon que la date/heure est renvoyée avec un fuseau horaire UTC (GMT) ou qu'elle est renvoyée en heure locale. C'est une autre raison pour laquelle l'utilisation de chaînes de date et d'heure n'est pas recommandée.
La chronologie ci-dessous détaille une journée moyenne en utilisant le 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'utilisation du constructeur 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.
Il existe plusieurs façons de définir votre objet "Date" sur un fuseau horaire spécifique. Tout d'abord, Google Charts fournit un outil de mise en forme des dates dans lequel vous pouvez spécifier un timeZone. Vous obtenez 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 sera ainsi 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 vos dates et heures comme vous le souhaitez.
Dates et heures utilisant la représentation de la chaîne de date
Lorsque vous sérialisez des données à l'aide de la notation littérale d'objet DataTable JavaScript pour créer votre table de données, le constructeur new Date() ne peut pas être utilisé. À la place, Google Charts fournit une représentation sous forme de chaîne de date qui permet de sérialiser et d'analyser correctement votre date ou votre datetime 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 lorsque vous utilisez le constructeur new Date(), les mois sont indexés à partir de zéro (janvier correspond au mois 0, décembre au mois 11).
Vous trouverez ci-dessous la même chronologie pour le Super Bowl qu'auparavant, mais en utilisant désormais la notation littérale de l'objet JavaScript et le format de chaîne de 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)"]
]);
Utiliser Timeofday
Le type de données de la colonne timeofday DataTable accepte un tableau de 3 ou 4 chiffres, qui représentent respectivement les heures, les minutes, les secondes et éventuellement les millisecondes. L'utilisation de timeofday diffère de l'utilisation de date et datetime, dans la mesure où les valeurs ne sont pas spécifiques à une date, tandis que date et datetime spécifient toujours une date.
Par exemple, l'heure 8h30 serait : [8, 30, 0, 0], la 4e 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));
}
Mettre en forme les libellés des axes, des lignes de grille et des coches
Lorsque vous utilisez les dates, la date et l'heure, et l'heure de la journée, vous pouvez mettre en forme les libellés des axes, des lignes de grille ou des graduations d'une certaine manière. Pour ce faire, vous disposez de différentes méthodes.
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 5, ainsi que 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 lettres d'espace réservé pour différentes parties de la date, de la date et de l'heure, ou de l'heure. Consultez la documentation de référence sur l'outil de mise en forme 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 spécifiques de valeurs de date et d'heure en incluant une option units sous gridlines et minorGridlines pour les deux axes. Cette option ne sera 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/date/heure/heure du quadrillage calculé, et votre graphique calcule le quadrillage en fonction du premier format qui correspond à l'espace pour l'étiquette de ligne de grille.
Vous pouvez définir des formats comme années, mois, jours, heures, minutes, secondes et millisecondes.
L'option de format accepte un tableau de formats de chaîne et les utilisera dans l'ordre jusqu'à ce qu'un format corresponde à la zone du libellé. C'est pourquoi nous vous recommandons de classer 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 l'outil de mise en forme 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 quadrillage principal, et que le format des options change en conséquence. Notez également que mineurGridlines utilise le deuxième format, plus court, car les premiers ne s'adaptent pas à l'espace de 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 JavaScript Date(), le Mozilla Developer Network est une excellente ressource. Vous y trouverez tout ce qu'il faut savoir sur les
objets Date JavaScript