Présentation
Remarque : JavaScript comptabilise les mois à partir de zéro : janvier est 0, février est 1 et décembre est 11. C'est pourquoi votre graphique d'agenda semble désactivé pour un mois.
Un graphique d'agenda est une visualisation utilisée pour illustrer l'activité enregistrée sur une longue période, par exemple des mois ou des années. Elles sont particulièrement utiles lorsque vous souhaitez illustrer l'évolution de la quantité en fonction du jour de la semaine ou de son évolution dans le temps.
Le graphique d'agenda fait peut-être l'objet de révisions importantes dans les prochaines versions de Google Charts.
Les graphiques d'agenda sont affichés dans le navigateur à l'aide des fichiers SVG ou VML, selon ce qui convient au navigateur de l'utilisateur. Comme tous les graphiques Google, les graphiques d'agenda affichent des info-bulles lorsque l'utilisateur passe la souris sur les données. Crédit dans lequel le crédit est dû: notre graphique d'agenda s'inspire de la visualisation du calendrier D3.
Exemple simple
Imaginons que nous voulions montrer en quoi la participation à une équipe sportive varie au cours de la saison. Avec un graphique d'agenda, 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 de données sous-jacentes.
Pour créer un graphique d'agenda, chargez le package calendar, puis créez deux colonnes : une pour les dates et une pour les valeurs. (Une troisième colonne facultative de style personnalisé sera disponible dans une prochaine version de Google Charts).
Remplissez ensuite les lignes avec des paires date-valeur, comme illustré 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 d'agenda, chaque carré représente un jour. Actuellement, la couleur des cellules ne peut pas être personnalisée, mais cela changera dans la prochaine version de Google Charts.
Si toutes les valeurs des données sont positives, les couleurs vont du blanc au bleu, le bleu le plus profond indiquant les valeurs les plus élevées. S'il existe des valeurs de données négatives, elles apparaissent en orange, comme illustré ci-dessous.
Le code de cet agenda est similaire 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 modifié calendar.cellSize en 10, ce qui réduit le nombre de jours et, par conséquent, 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 avons défini 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, l'épaisseur et l'opacité des bordures des cellules à l'aide de la commande calendar.cellColor :
Veillez à choisir une couleur de trait qui se distingue de monthOutlineColor et à opter pour une opacité faible. 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îtra 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 sont libellés des premières lettres allant 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 étiquettes de la semaine, nous plaçons une marge intérieure de 10 pixels entre les étiquettes et les données du graphique, et nous commençons les semaines 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, la calendar.monthLabel pour personnaliser la police des libellés et calendar.underMonthSpace pour ajuster la marge intérieure du libellé:
Nous avons défini la police du libellé sur une couleur rouge foncée de 12 points Times-Roman, sur l'italique en gras, défini les contours de la même couleur et inséré une marge intérieure de 16 pixels. Les contours du mois inutilisés sont définis sur une couleur plus sombre 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
Les années dans les graphiques d'agenda se trouvent toujours à gauche du graphique et peuvent être personnalisées avec calendar.yearLabel et calendar.underYearSpace:
Nous définissons la police de l'année sur un italique Times-Roman vert 32 pts en gras et nous ajoutons 10 pixels entre les étiquettes de l'année et en 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 (facultatif) | |
|---|---|---|---|---|
| Objectif : | Dates | Valeurs | … | Rôles facultatifs |
| Type de données: | date, datetime ou timeofday | number (nombre) | … | |
| Rôle : | domaine | données | … | |
| Rôles de colonne facultatifs : | Aucune note |
Aucune note |
… |
Options de configuration
| Nom | |
|---|---|
| agenda.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 |
La taille des carrés de 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 étiquettes de la semaine et le bord gauche des carrés de jour du graphique. Type:entier
Par défaut : 4
|
| calendar.daysOfWeek |
Étiquettes à une seule lettre à utiliser du dimanche au samedi. Type:chaîne
Par défaut :
'SMTWTFS' |
| calendar.focusCellColor |
Lorsque l'utilisateur sélectionne (en passant la souris) sur un carré de jour, les graphiques du calendrier le mettent en surbrillance.
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 des 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 }
|
| calendrier.moisOutlineColor |
Dans ce style, une bordure est appliquée aux mois contenant des valeurs de données.
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 |
Nombre de pixels entre le bas des libellés du mois et le haut des carrés du jour: var options = { calendar: { underMonthSpace: 12 } };
Type:entier
Par défaut : 6
|
| calendar.underYearSpace |
Nombre de pixels entre l'étiquette de la dernière année et le bas du graphique: var options = { calendar: { underYearSpace: 2 } };
Type:entier
Par défaut : 0
|
| calendar.unusedMonthOutlineColor |
Dans ce style, les mois sans données sont délimités par d'autres, avec une bordure.
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 spécifiant un mappage entre les valeurs d'une colonne de couleurs et les couleurs, ou une échelle de dégradés. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme illustré ci-dessous: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Type : objet
Par défaut : null
|
| colorAxis.colors |
Couleurs à attribuer aux valeurs de la visualisation. Un 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 |
Si ce champ est présent, spécifie une valeur maximale pour les données de couleur du graphique. Les valeurs de données de couleur de cette valeur ou d'une valeur supérieure seront affichées en tant que dernière couleur de la plage Type:nombre
Par défaut : valeur maximale de la colonne "Couleur" dans les données du graphique
|
| colorAxis.minValue |
Indique une valeur minimale pour les données de couleur du graphique, le cas échéant. Les valeurs de données de couleur de cette valeur ou d'une valeur inférieure seront affichées en tant que première couleur de la plage Type:nombre
Par défaut : valeur minimale de la colonne "Couleur" dans les données du graphique
|
| colorAxis.values |
S'il est présent, 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
|
| Forcer le cadre iFrame |
Dessine le graphique dans un cadre intégré. (Notez que dans IE8, cette option est ignorée. Tous les graphiques IE8 sont dessinés dans des cadres iFrame.) Type:booléen
Par défaut:false
|
| hauteur |
Hauteur du graphique, en pixels. Type:nombre
Par défaut:hauteur de l'élément conteneur.
|
| Modèle de données no |
Les graphiques d'agenda utilisent un schéma diagonal rayé 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 de la colonne d'info-bulles n'est pas compatible avec les visualisations Graphique à secteurs et Graphique à bulles. Type : booléen
Par défaut:true
|
| largeur |
Largeur du graphique, en pixels. Type : nombre
Par défaut : largeur de l'élément conteneur
|
Méthodes
| Méthode | |
|---|---|
draw(data, options) |
Dessine 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 de retour) : aucun
|
getBoundingBox(id) |
Renvoie un objet contenant les éléments "left", "top", "width" et "height" de l'élément de graphique
Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique. Return Type:objet
|
getSelection() |
Affiche un tableau des entités de graphique sélectionnées.
Vous pouvez sélectionner les barres, les entrées de légende et les catégories.
Une barre correspond à une cellule du tableau de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul).
Pour ce graphique, une seule entité peut être sélectionnée à un moment donné.
Type de renvoi:tableau des éléments de sélection
|
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Vous pouvez sélectionner les barres, les entrées de légende et les catégories.
Une barre correspond à une cellule du tableau de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul).
Pour ce graphique, une seule entité peut être sélectionnée à la fois.
Return Type (Type de retour) : aucun
|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
Événements
| Nom | |
|---|---|
error |
Déclenché en cas d'erreur lors de la tentative d'affichage du graphique Properties (Propriétés) : id, message
|
onmouseover |
Déclenché lorsque l'utilisateur passe la souris sur une entité visuelle. Transmet l'index de ligne et la valeur de date de l'entité. Si aucun élément de la table de données n'est associé à l'entité, la valeur renvoyée pour l'index de ligne est Properties (Propriétés) : ligne, date
|
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur d'une entité visuelle Transmet 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 Properties : ligne et date
|
ready |
Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Properties (Propriétés) : aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Properties (Propriétés) : aucune
|
Règles relatives aux données
L'ensemble du code et des données est traité et affiché dans le navigateur. Aucune donnée n'est envoyée à un serveur.