Présentation
Remarque:JavaScript comptabilise les mois à partir de zéro: janvier 0, février 1 et décembre 11. Si le graphique de votre calendrier semble décalé d'un mois, c'est pourquoi.
Un graphique calendaire est une visualisation utilisée pour montrer l'activité sur une longue période de temps, telle que des mois ou des années. Elles sont idéales si vous souhaitez illustrer comment une quantité varie en fonction du jour de la semaine ou comment elle évolue dans le temps.
Il est possible que le calendrier fasse l'objet de révisions importantes dans les prochaines versions de Google Charts.
Les graphiques de calendrier sont affichés dans le navigateur à l'aide du format SVG ou VML, selon le cas du navigateur de l'utilisateur. Comme tous les graphiques Google, les graphiques d'agenda affichent des info-bulles lorsque l'utilisateur pointe sur les données. Et créditer là où le crédit est dû: notre graphique calendrier s'est inspiré de la visualisation du calendrier D3.
Exemple simple
Imaginons que nous voulions montrer comment la fréquentation d'une équipe sportive a varié tout au long de la saison. Avec un graphique de calendrier, nous pouvons utiliser la luminosité pour indiquer les valeurs et permettre aux utilisateurs de voir les tendances en un coup d'œil:
Vous pouvez passer la souris sur chaque jour pour afficher les valeurs sous-jacentes des données.
Pour créer un graphique de calendrier, chargez le package calendar, puis créez deux colonnes, l'une pour les dates et l'autre pour les valeurs. (Une troisième colonne facultative de style personnalisé sera disponible dans une prochaine version de Google Charts.)
Remplissez ensuite vos lignes avec des paires date-valeur, comme indiqué ci-dessous.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["calendar"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>
Jours
Dans un graphique calendaire, chaque carré représente un jour. Actuellement, la couleur des cellules de données ne peut pas être personnalisée, mais cela changera dans la prochaine version de Google Charts.
Si les valeurs des données sont toutes positives, les couleurs vont du blanc au bleu, le bleu le plus profond indiquant les valeurs les plus élevées. Si les valeurs de données sont négatives, elles sont orange, comme indiqué ci-dessous.
Le code de cet agenda est semblable au premier, sauf que les lignes se présentent comme suit:
[ new Date(2013, 9, 4), 10 ],
[ new Date(2013, 9, 5), 3 ],
[ new Date(2013, 9, 7), -1 ],
[ new Date(2013, 9, 8), 2 ],
[ new Date(2013, 9, 12), -1 ],
[ new Date(2013, 9, 13), 1 ],
[ new Date(2013, 9, 15), 1 ],
[ new Date(2013, 9, 16), -4 ],
Vous pouvez modifier la taille des jours ("cellules") avec l'option calendar.cellSize:
Ici, nous avons remplacé calendar.cellSize par 10, en réduisant le nombre de jours et donc le graphique dans son ensemble.
var options = {
title: 'Red Sox Attendance',
calendar: { cellSize: 10 },
};
Les jours sans valeur de données peuvent être personnalisés avec l'option noDataPattern:
Ici, nous définissons color sur un bleu clair et backgroundColor sur une nuance légèrement plus foncée:
var options = {
title: "Red Sox Attendance",
height: 350,
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
};
Vous pouvez contrôler la couleur, la largeur et l'opacité de la bordure de la cellule avec calendar.cellColor:
Vous devez veiller à choisir une couleur de trait qui se distingue de la monthOutlineColor, ou à choisir une faible opacité. Voici les options pour le graphique ci-dessus:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
cellColor: {
stroke: '#76a7fa',
strokeOpacity: 0.5,
strokeWidth: 1,
}
}
};
Si vous sélectionnez un jour dans le graphique ci-dessus, la bordure apparaît en rouge. Vous pouvez contrôler ce comportement à l'aide des options calendar.focusedCellColor:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
focusedCellColor: {
stroke: '#d3362d',
strokeOpacity: 1,
strokeWidth: 1,
}
}
};
Semaines
Par défaut, les jours de la semaine commencent par du dimanche au samedi.
Vous ne pouvez pas modifier l'ordre des jours, mais vous pouvez modifier les lettres utilisées avec l'option calendar.daysOfWeek. Vous pouvez également contrôler la marge intérieure entre les jours de la semaine et le graphique avec calendar.dayOfWeekRightSpace, et personnaliser le style de texte avec calendar.dayOfWeekLabel:
Ici, nous modifions la police des libellés de la semaine, plaçons une marge intérieure de 10 pixels entre les libellés et les données du graphique, et nous commençons la semaine le lundi.
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#1a8763',
bold: true,
italic: true,
},
dayOfWeekRightSpace: 10,
daysOfWeek: 'DLMMJVS',
}
};
Mois
Par défaut, les mois sont identifiés par des lignes gris foncé. Vous pouvez utiliser l'option calendar.monthOutlineColor pour contrôler les bordures, calendar.monthLabel pour personnaliser la police du libellé et calendar.underMonthSpace pour ajuster la marge intérieure du libellé:
Nous définissons la police du libellé sur un rouge foncé 12 pt Times-Roman et le gras en italique. Nous définissons la même couleur pour les contours et ajoutons une marge intérieure de 16 pixels. Les contours du mois inutilisés utilisent une couleur plus atténuée de la même teinte.
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#981b48',
bold: true,
italic: true
},
monthOutlineColor: {
stroke: '#981b48',
strokeOpacity: 0.8,
strokeWidth: 2
},
unusedMonthOutlineColor: {
stroke: '#bc5679',
strokeOpacity: 0.8,
strokeWidth: 1
},
underMonthSpace: 16,
}
};
Années
Dans les graphiques calendaires, les années se trouvent toujours sur le bord gauche du graphique, et vous pouvez les personnaliser avec calendar.yearLabel et calendar.underYearSpace:
Nous avons défini la police "année" sur un vert foncé 32 pt Times-Roman et en italique et en gras, et nous avons ajouté dix pixels entre les libellés de l'année et le bas du graphique:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
underYearSpace: 10, // Bottom padding for the year labels.
yearLabel: {
fontName: 'Times-Roman',
fontSize: 32,
color: '#1A8763',
bold: true,
italic: true
}
}
};
Chargement...
Le nom du package google.charts.load est "calendar":
google.charts.load("current", {packages: ["calendar"]});
Le nom de classe de la visualisation est google.visualization.Calendar:
var visualization = new google.visualization.Calendar(container);
Format des données
Lignes:chaque ligne du tableau représente une date.
Columns:
| Colonne 0 | Colonne 1 | ... | Colonne N (facultative) | |
|---|---|---|---|---|
| Objectif : | Dates | Valeurs | ... | Rôles facultatifs |
| Type de données : | date, datetime ou timeofday | Nombre | ... | |
| Rôle : | domaine | Données | ... | |
| Rôles de colonne facultatifs: | Aucun contrôle |
Aucun contrôle |
... |
Options de configuration
| Nom | |
|---|---|
| calendar.cellColor |
L'option
var options = {
calendar: {
cellColor: {
stroke: 'red', // Color the border of the squares.
strokeOpacity: 0.5, // Make the borders half transparent.
strokeWidth: 2 // ...and two pixels thick.
}
}
};
Type:objet
Par défaut:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.cellSize |
Taille des carrés du jour calendaire:
var options = { calendar: { cellSize: 10 } };
Type:entier
Par défaut:16
|
| calendar.dayOfWeekLabel |
Permet de contrôler le style de police des libellés de la semaine en haut du graphique:
var options = {
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: 'black',
bold: false,
italic: false
}
}
};
Type:objet
Par défaut:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.dayOfWeekRightSpace |
Distance entre le bord droit des libellés de la semaine et le bord gauche des carrés des jours du graphique. Type:entier
Par défaut:4
|
| calendar.daysOfWeek |
Libellés d'une seule lettre à utiliser du dimanche au samedi. Type:chaîne
Par défaut:
'SMTWTFS' |
| calendar.focusedCellColor |
Lorsque l'utilisateur sélectionne (par exemple, en passant la souris) sur un carré du jour, celui-ci est mis en surbrillance dans les graphiques de calendrier.
var options = {
calendar:
focusedCellColor: {
stroke: 'red',
strokeOpacity: 0.8,
strokeWidth: 3
}
}
};
Type:objet
Par défaut:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
| calendar.monthLabel |
Style pour les libellés du mois, par exemple :
var options = {
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 16,
color: 'green',
bold: true,
italic: false
}
}
};
Type:objet
Par défaut:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.monthOutlineColor |
Les mois avec des valeurs de données sont délimités par une bordure de ce style.
var options = {
calendar: {
monthOutlineColor: {
stroke: 'blue',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(Voir aussi calendar.unusedMonthOutlineColor.)
Type:objet
Par défaut:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.underMonthSpace |
Le nombre de pixels entre le bas des libellés du mois et la partie supérieure des carrés du jour: var options = { calendar: { underMonthSpace: 12 } };
Type:entier
Par défaut:6
|
| calendar.underYearSpace |
Nombre de pixels entre le libellé de l'année la plus basse et le bas du graphique: var options = { calendar: { underYearSpace: 2 } };
Type:entier
Par défaut:0
|
| calendar.unusedMonthOutlineColor |
Les mois sans valeurs de données sont délimités par une bordure de ce style.
var options = {
calendar: {
unusedMonthOutlineColor: {
stroke: 'yellow',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(Voir aussi calendar.monthOutlineColor.)
Type:objet
Par défaut:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
| colorAxis |
Objet qui spécifie une correspondance entre les valeurs des colonnes de couleur et les couleurs, ou une échelle de dégradé. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Type:objet
Par défaut:null
|
| colorAxis.colors |
Couleurs à attribuer aux valeurs de la visualisation. Tableau de chaînes, où chaque élément est une chaîne de couleur HTML, par exemple: Type:tableau de chaînes de couleurs
Par défaut:null
|
| colorAxis.maxValue |
S'il est présent, spécifie une valeur maximale pour les données de couleur du graphique. Les valeurs de données de couleur supérieures ou égales à cette valeur seront affichées en tant que dernière couleur de la plage Type:nombre
Par défaut:valeur maximale de la colonne de couleur dans les données du graphique
|
| colorAxis.minValue |
Si ce champ est présent, il indique une valeur minimale pour les données de couleur du graphique. Les valeurs de données de couleur de cette valeur et des valeurs inférieures seront affichées en tant que première couleur dans la plage Type:nombre
Par défaut:valeur minimale de la colonne de couleur dans les données du graphique
|
| colorAxis.values |
Le cas échéant, contrôle la manière dont les valeurs sont associées aux couleurs. Chaque valeur est associée à la couleur correspondante dans le tableau Type:tableau de nombres
Par défaut:null
|
| forceIFrame |
Dessine le graphique dans un cadre intégré. Notez que dans IE8, cette option est ignorée, car tous les graphiques IE8 sont dessinés dans des i-frames. Type:booléen
Par défaut : "false"
|
| taille |
Hauteur du graphique, en pixels. Type:nombre
Par défaut:hauteur de l'élément parent
|
| noDataPattern |
Les graphiques de calendrier utilisent des rayures diagonales pour indiquer qu'aucune donnée n'est disponible pour un jour donné. Utilisez les options
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Type:objet
Par défaut:null
|
| tooltip.isHtml |
Définissez la valeur sur Remarque:La personnalisation du contenu de l'info-bulle HTML via le rôle de données des colonnes d'info-bulles n'est pas compatible avec les visualisations Graphique à secteurs et Graphique à bulles. Type:booléen
Valeur par défaut : "true"
|
| largeur |
Largeur du graphique, en pixels. Type:nombre
Par défaut:largeur de l'élément parent
|
Méthodes
| Méthode | |
|---|---|
draw(data, options) |
Permet de dessiner le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement Return Type (Type renvoyé) : aucun
|
getBoundingBox(id) |
Renvoie un objet contenant les valeurs gauche, supérieure, largeur et hauteur de l'élément de graphique
Les valeurs sont relatives au conteneur du graphique. Appelez-le après que le graphique est dessiné. Type renvoyé:objet
|
getSelection() |
Renvoie un tableau des entités de graphique sélectionnées.
Les entités sélectionnables sont les barres, les entrées de légende et les catégories.
Une barre correspond à une cellule de la table de données, à une entrée de légende dans une colonne (l'index de ligne est nul) et à une catégorie à une ligne (l'index de colonne est nul).
Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois.
Type renvoyé:tableau d'éléments de sélection
|
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Les entités sélectionnables sont les barres, les entrées de légende et les catégories.
Une barre correspond à une cellule de la table de données, à une entrée de légende dans une colonne (l'index de ligne est nul) et à une catégorie à une ligne (l'index de colonne est nul).
Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois.
Return Type (Type renvoyé) : aucun
|
clearChart() |
Efface le graphique et libère toutes les ressources allouées. Return Type (Type renvoyé) : aucun
|
Événements
| Nom | |
|---|---|
error |
Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique. Propriétés:id, message
|
onmouseover |
Déclenché lorsque l'utilisateur pointe sur une entité visuelle. Renvoie l'index de ligne et la valeur de date de l'entité. Si aucun élément de table de données n'est associé à l'entité, la valeur renvoyée pour l'index de ligne est Propriétés:ligne, date
|
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur de la souris d'une entité visuelle. Renvoie l'index de ligne et la valeur de date de l'entité. Si aucun élément de table de données n'est associé à l'entité, la valeur renvoyée pour l'index de ligne est Ligne Properties (Propriétés), date
|
ready |
Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Propriétés:aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Propriétés:aucune
|
Règles concernant les données
L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.