Highcharts nécessite deux fichiers pour fonctionner : highcharts.js et l'une des bibliothèques jQuery, MooTools, Prototype ou le framework autonome Highcharts. Pour Highstock, la procédure est similaire avec le fichier highstock.js.
A. Intégration de Highcharts et du framework
Insérez les fichiers JavaScript dans la section <head> de votre page web.
Option 1 : avec jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
Option 2 : avec le framework autonome
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
Option 3 : avec MooTools ou Prototype
Pour MooTools :
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script src="http://code.highcharts.com/adapters/mootools-adapter.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
Pour Prototype :
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script src="http://code.highcharts.com/adapters/prototype-adapter.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
B. Chargement depuis votre propre domaine
Les fichiers peuvent être hébergés localement :
<script src="/js/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>
Création d'un premier graphique
Après l'intégration de Highcharts, vous êtes prêt à créer votre premier graphique.
- Ajoutez une div avec un identifiant et des dimensions spécifiques qui définiront la taille du graphique.
<div id="graph-container" style="width:100%; height:400px;"></div>
- Initialisez le graphique avec JavaScript. L'exemple suivant utilise jQuery pour créer un diagramme à barres.
$(function() {
$('#graph-container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Consommation de fruits'
},
xAxis: {
categories: ['Pommes', 'Bananes', 'Oranges']
},
yAxis: {
title: {
text: 'Fruits mangés'
}
},
series: [{
name: 'Marie',
data: [2, 1, 5]
}, {
name: 'Pierre',
data: [6, 8, 4]
}]
});
});
Avec d'autres frameworks, la syntaxe diffère légèrement :
Pour MooTools :
window.addEvent('domready', function() {
var monGraphique = new Highcharts.Chart({
chart: {
renderTo: 'graph-container',
type: 'bar'
},
// ... autres options
});
});
Pour Prototype :
document.observe("dom:loaded", function() {
var monGraphique = new Highcharts.Chart({
chart: {
renderTo: 'graph-container',
type: 'bar'
},
// ... autres options
});
});
Les graphiques de type Stock utilisent un constructeur différent :
var graphiqueStock;
$(function() {
graphiqueStock = new Highcharts.StockChart({
chart: {
renderTo: 'graph-container'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD vers EUR',
data: tauxChangeUSD // tableau JavaScript prédéfini
}]
});
});
Application de thèmes globaux
Appliquez un thème prédéfini en incluant un fichier de thème après highcharts.js :
<script type="text/javascript" src="/js/themes/gray.js"></script>
Configuration des options
Highcharts utilise une structure d'objet JavaScript pour définir les paramètres d'un graphique.
L'objet de confiugration
Lors de l'initialisation du graphique, l'objet de configuration est le premier paramètre du constructeur Highcharts.Chart.
$(document).ready(function() {
var options = {
chart: {
renderTo: 'graph-container',
type: 'bar'
},
title: {
text: 'Consommation de fruits'
},
xAxis: {
categories: ['Pommes', 'Bananes', 'Oranges']
},
yAxis: {
title: {
text: 'Quantité consommée'
}
},
series: [{
name: 'Marie',
data: [2, 1, 5]
}]
};
var graphique = new Highcharts.Chart(options);
});
Les objets JavaScript peuvent être étendus par notation pointée :
options.series.push({
name: 'Pierre',
data: [4, 3, 2]
});
La notation crochets est équivalente à la notation pointée :
options.renderTo
// est identique à
options['renderTo']
Options globales
Pour appliquer des options à tous les graphiques d'une page, utilisez Highcharts.setOptions :
$(function() {
Highcharts.setOptions({
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, '#ffffff'],
[1, '#f0f0ff']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
}
});
var premierGraphique = new Highcharts.Chart({
chart: {
renderTo: 'graph-container1',
},
xAxis: {
type: 'datetime'
},
series: [{
data: [30.2, 72.1, 105.8, 130.5, 145.2, 175.3, 136.2, 147.8, 215.9, 193.7, 96.1, 55.0],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000
}]
});
var secondGraphique = new Highcharts.Chart({
chart: {
renderTo: 'graph-container2',
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [31.5, 68.9, 109.3, 127.8, 148.6, 172.4, 138.1, 151.2, 218.7, 196.3, 93.8, 52.9],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000
}]
});
});