- Présentation
- Exemple simple
- Ajouter un libellé aux barres
- Exemple avancé
- Placer des barres sur une ligne
- Modifier les polices
- Contrôler les couleurs
- Quadrillage qui se chevauche
- Personnaliser les info-bulles
- Loading
- Format des données
- Options de configuration
- Méthodes
- Événements
- Règles concernant les données
Présentation
Une chronologie est un graphique qui illustre la façon dont un ensemble de ressources est utilisé au fil du temps. Si vous gérez un projet logiciel et souhaitez montrer qui fait quoi et quand, ou si vous organisez une conférence et devez planifier des salles de réunion, la chronologie est souvent un choix de visualisation raisonnable. Le graphique de Gantt est un type de chronologie populaire.
Remarque : 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. Si vos trajets semblent retardés d'un mois, c'est probablement la raison. Pour en savoir plus, consultez la page Dates et heures.
Exemple simple
Supposons que vous souhaitiez connaître le moment où les présidents américains ont diffusé leurs conditions. Ici, les "ressources" sont les présidents, et nous pouvons tracer le terme de chaque président comme une barre:
Passez la souris sur une barre pour afficher une info-bulle contenant des informations plus détaillées.
Après avoir chargé le package timeline et défini un rappel pour dessiner le graphique lors du rendu de la page, la méthode drawChart() instancie un google.visualization.Timeline(), puis remplit une dataTable avec une ligne pour chaque président.
Dans dataTable, la première colonne contient le nom du président, et les deuxième et troisième colonnes correspondent aux heures de début et de fin. Il s'agit du type JavaScript Date, mais il peut également s'agir de nombres bruts.
Enfin, nous appelons la méthode draw() du graphique, qui l'affiche dans un div avec le même identifiant (timeline) que celui utilisé lorsque container a été déclaré sur la première ligne de drawChart().
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>
Vous pouvez personnaliser les chronologies Google Charts. Dans les exemples suivants, nous allons vous montrer comment personnaliser l'apparence de vos chronologies.
Ajouter un libellé aux barres
En plus des libellés de ligne ("Washington", "Adams", "Jefferson" ci-dessus), vous pouvez ajouter un libellé à des barres individuelles. Ici, nous remplaçons les étiquettes de ligne par des chiffres simples et plaçons le nom de chaque président sur sa barre.
Dans ce code, nous avons inséré une nouvelle colonne dans nos données afin de contenir les libellés des barres: le nom complet de chaque président. Lorsqu'il existe quatre colonnes dans une chronologie dataTable, la première est interprétée comme l'étiquette de ligne, la deuxième comme l'étiquette de barre, et la troisième et la quatrième comme le début et la fin.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example2.1" style="height: 200px;"></div>
Les nouvelles étiquettes de ligne ci-dessus n'étant pas très informatives, nous allons les supprimer avec l'option de chronologie showRowLabels.
Par défaut, showRowLabels est true. Si elle est définie sur false, les libellés de ligne sont supprimés:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
timeline: { showRowLabels: false }
};
chart.draw(dataTable, options);
}
</script>
<div id="example2.2" style="height: 180px;"></div>
Exemple avancé
Pour rendre notre chronologie plus complexe, ajoutons les vice-présidents et les secrétaires d'État à notre graphique. John Adams était vice-président avant d'en devenir président, et Thomas Jefferson était secrétaire d'État, puis vice-président et enfin président.
Dans les chronologies, une ressource aura la même couleur même lorsqu'elle apparaît sur plusieurs lignes. Ainsi, dans le graphique suivant, chaque personne est représentée par une couleur cohérente.
Certains secrétaires d'État ont été diffusés pendant de très courtes durées. Ce graphique est donc un bon test d'étiquetage. Lorsqu'une étiquette est trop grande pour la barre, elle est abrégée ou supprimée, en fonction de sa taille. Les utilisateurs peuvent toujours passer la souris sur la barre pour obtenir des informations d'info-bulles.
La chronologie présentera les lignes dans l'ordre (le vice-président au-dessus du secrétaire d'État), car c'est l'ordre dans lequel elles apparaissent dans le code ci-dessous. Cependant, la disposition des barres est déterminée uniquement par les heures de début et de fin. Par conséquent, l'échange de deux secrétaires d'État ou deux présidents dans dataTable n'a aucun effet sur le graphique.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
[ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
[ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
[ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
[ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
[ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
[ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
[ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
[ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
[ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
[ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
]);
chart.draw(dataTable);
}
</script>
<div id="example3.1" style="height: 200px;"></div>
Placer des barres sur une ligne
Contrairement aux papes, il ne peut y avoir qu'un seul président américain à la fois. Par conséquent, si nous étiquetons toutes nos lignes comme "Présidente", la chronologie combine les trois lignes de notre premier graphique en une seule pour une présentation plus claire. Vous pouvez contrôler ce comportement avec l'option groupByRowLabel.
Voici le comportement par défaut:
Définissons maintenant groupByRowLabel sur false et divisons la ligne en trois:
Code pour désactiver le regroupement:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
timeline: { groupByRowLabel: false }
};
chart.draw(dataTable, options);
}
</script>
<div id="example4.2" style="height: 200px;"></div>
Contrôler les couleurs
Par défaut, Google Charts choisit des couleurs optimisées pour l'esthétique et la lisibilité (y compris pour les utilisateurs malvoyants). Vous pouvez adapter le comportement par défaut à l'aide des options colorByRowLabel, singleColor, backgroundColor et colors.
L'option colorByRowLabel colore toutes les barres de la même ligne de la même manière. Cela peut être un bon choix en cas d'espaces entre les barres.
colorByRowLabel est défini par défaut sur false. Ici, nous le remplaçons et le définissons sur true.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Beginning JavaScript', new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0) ],
[ 'Magnolia Room', 'Intermediate JavaScript', new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,0,0), new Date(0,0,0,17,30,0) ],
[ 'Willow Room', 'Beginning Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Willow Room', 'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Willow Room', 'Advanced Google Charts', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);
var options = {
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.1" style="height: 100px;"></div>
Si vous souhaitez que toutes les barres soient de la même couleur quelle que soit la ligne sur laquelle elles se trouvent, utilisez l'option singleColor:
Dans le code ci-dessous, singleColor est défini sur une valeur hexadécimale pour colorer toutes les barres en vert clair:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { singleColor: '#8d8' },
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.2" style="height: 150px;"></div>
Vous pouvez contrôler la couleur d'arrière-plan des lignes à l'aide de l'option backgroundColor:
backgroundColor est spécifié en tant que valeur hexadécimale. Ici, nous l'associons à colorByRowLabel pour afficher les titres lors d'une conférence:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.3');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
backgroundColor: '#ffd'
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.3" style="height: 150px;"></div>
Ensuite, pour définir la couleur d'arrière-plan sur "alternatif" ou "non alternatif par index de ligne", utilisez l'option alternatingRowStyle (active v51+):
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.4');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
alternatingRowStyle: false
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.4" style="height: 150px;"></div>
Si vous souhaitez contrôler les couleurs de chaque barre, utilisez l'option colors:
colors utilise un tableau de valeurs hexadécimales, qui sont appliquées aux barres dans l'ordre:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.5');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e'],
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.5" style="height: 150px;"></div>
Si votre graphique nécessite plus de couleurs que prévu, il se comportera comme si singleColor était défini sur la première couleur de la liste. Cela s'applique à tous les graphiques Google, et pas seulement à la chronologie.
Une autre façon de contrôler les couleurs de chaque barre consiste à utiliser une colonne avec le rôle de style.
Code permettant d'ajouter et de remplir une colonne de style:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.6');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
[ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example5.6" style="height: 150px;"></div>
Modifier la police
Vous pouvez choisir la police et la police des libellés de chaque ligne avec rowLabelStyle et les libellés de chaque barre avec barLabelStyle. Les deux exemples sont présentés ci-dessous.
Remarque: Veillez à choisir des polices de caractères que les navigateurs de vos utilisateurs pourront afficher.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example6.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e'],
timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
};
chart.draw(dataTable, options);
}
</script>
<div id="example6.1" style="height: 200px;"></div>
Vous ne pouvez pas définir la couleur du texte barLabel.
Quadrillage qui se chevauche
Google Charts effectue de petits ajustements aux extrémités des barres pour éviter d'obscurcir le quadrillage de la chronologie. Pour éviter ce comportement, définissez l'option avoidOverlappingGridLines sur false.
Pour illustrer l'effet, voici deux exemples : le premier avec un quadrillage partiel et le second sans.
Voici le code qui chevauche le quadrillage:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example7.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
[ 'Magnolia Room', 'App Engine', new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);
var options = {
timeline: { showRowLabels: false },
avoidOverlappingGridLines: false
};
chart.draw(dataTable, options);
}
</script>
<div id="example7.1" style="height: 200px;"></div>
Personnaliser les info-bulles
Vous pouvez personnaliser ce que les utilisateurs voient lorsqu'ils passent la souris sur les barres d'une chronologie en ajoutant une colonne d'info-bulles dans un tableau de données à cinq colonnes. Pour fournir des info-bulles autres que celles par défaut, chaque ligne de votre table de données doit comporter les cinq colonnes (libellé de ligne, libellé de barre, info-bulle, début et fin):
Pointez sur une barre pour afficher une info-bulle contenant le texte défini dans la troisième colonne. Dans ce graphique, nous devons définir des valeurs factices pour la deuxième colonne (ici, null) afin que nos info-bulles puissent exister dans la troisième colonne.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline-tooltip');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
dataTable.addColumn({ type: 'string', role: 'tooltip' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'Adams', null, 'John', new Date(1797, 2, 3), new Date(1801, 2, 3) ],
[ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline-tooltip" style="height: 180px;"></div>
</body>
</html>
Chargement...
Le nom du package google.charts.load est timeline :
google.charts.load("current", {packages: ["timeline"]});
Le nom de classe de la visualisation est google.visualization.Timeline:
var visualization = new google.visualization.Timeline(container);
Format des données
Lignes : chaque ligne du tableau représente une barre chronologique.
Columns:
| Colonne 0 | Colonne 1 | Colonne 2 | Colonne 3 | Colonne 4 | |
|---|---|---|---|---|---|
| Objectif : | Libellé de la ligne | Libellé de la barre (facultatif) | Info-bulle (facultatif) | Introduction | Fin |
| Type de données: | chaîne | chaîne | chaîne | nombre ou date | nombre ou date |
| Rôle : | données | données | info-bulle | données | données |
Options de configuration
| Nom | |
|---|---|
| AlternanceRowStyle |
Indique si le graphique doit alterner la couleur d'arrière-plan par indice de ligne (par exemple, teinter l'arrière-plan des lignes indexées de façon uniforme). Si la valeur est "false", l'arrière-plan du graphique est constitué d'une seule couleur uniforme. Si la valeur est "true", l'arrière-plan du graphique alterne la teinte par index de ligne. (Remarque: version 51 ou ultérieure active) Type : booléen
Par défaut:true
|
| éviterles espaces de chevauchement de lignes |
Indique si les éléments d'affichage (les barres d'une chronologie, par exemple) doivent masquer les lignes de la grille. Si la valeur est "false", les lignes de la grille peuvent être entièrement recouvertes d'éléments display. Si la valeur est "true", les éléments d'affichage peuvent être modifiés pour maintenir les lignes de la grille visibles. Type:booléen
Par défaut:true
|
| backgroundColor |
Couleur d'arrière-plan de la zone principale du graphique. Il peut s'agir d'une simple chaîne de couleur HTML, par exemple Type:chaîne ou objet
Par défaut : "blanc"
|
| couleurs |
Couleurs à utiliser pour les éléments du graphique. Tableau de chaînes, où chaque élément est une chaîne de couleur HTML (par exemple, Type : tableau de chaînes
Par défaut:couleurs par défaut
|
| ActiverInteractivité |
Indique si le graphique génère des événements utilisateur ou réagit aux interactions des utilisateurs. Si la valeur est "false", le graphique ne génère pas de "sélection" ni d'autres événements basés sur les interactions (mais lancera des événements prêts ou d'erreur). Il n'affichera pas de texte au passage de la souris ni ne changera d'une autre manière selon l'entrée utilisateur. Type:booléen
Par défaut : true
|
| Nom de la police |
Police par défaut pour tout le texte du graphique. Vous pouvez remplacer ce paramètre en utilisant des propriétés pour des éléments de graphique spécifiques. Type:chaîne
Par défaut : "Arial"
|
| Taille de police |
Taille de police par défaut, en pixels, de tout le texte du graphique. Vous pouvez remplacer ce paramètre en utilisant des propriétés pour des éléments de graphique spécifiques. Type : nombre
Par défaut : automatique
|
| 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.
|
| timeline.barLabelStyle |
Objet spécifiant le style de texte du libellé de la barre. Son format est le suivant : {fontName: <string>, fontSize: <string>}
Voir également Type : objet
Par défaut:null
|
| timeline.colorByRowLabel |
Si ce paramètre est défini sur "true", la couleur de chaque barre de la ligne est identique. La couleur par défaut est une étiquette par barre. Type : booléen
Par défaut : false
|
| timeline.groupByRowLabel |
Si la valeur est "false", une ligne est créée pour chaque entrée Type : booléen
Par défaut:true
|
| timeline.rowLabelStyle |
Objet spécifiant le style de texte du libellé de ligne. Son format est le suivant : {color: <string>, fontName: <string>, fontSize: <string>}
Type : objet
Par défaut:null
|
| timeline.showBarLabels |
Si la valeur est définie sur "false", omet les libellés de la barre. Par défaut, elles sont affichées. Type:booléen
Par défaut:true
|
| timeline.showRowLabels |
Si la valeur est définie sur "false", omet les libellés de ligne. Par défaut, elles sont affichées. Type : booléen
Par défaut:true
|
| timeline.singleColor |
Colore toutes les barres de la même manière. Indiqué sous forme de valeur hexadécimale (par exemple, "#8d8"). Type:chaîne
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 la visualisation Graphique à bulles. Type:booléen
Par défaut : true
|
| tooltip.trigger |
Interaction de l'utilisateur qui entraîne l'affichage de l'info-bulle:
Type : chaîne
Par défaut : "focus"
|
| 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
|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
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.
Pour ce graphique, une seule entité peut être sélectionnée à un moment donné.
Type de renvoi:tableau des éléments de sélection
|
É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 les index de ligne et de colonne de l'élément du tableau de données correspondant. Une barre est associée à une cellule du tableau de données, à une entrée de légende dans une colonne (l'index de ligne est nul) et à une catégorie d'une ligne (l'index de colonne est nul). Properties (Propriétés) : ligne, colonne
|
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur d'une entité visuelle Transmet les index de ligne et de colonne de l'élément de table de données correspondant. Une barre est associée à une cellule du tableau de données, à une entrée de légende dans une colonne (l'index de ligne est nul) et à une catégorie d'une ligne (l'index de colonne est nul). Properties (Propriétés) : ligne, colonne
|
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 concernant les 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.