Bibliothèques graphiques Cilia Mauro Octobre 2012 ANF DevWeb ASR
Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs RGraph Highcharts
Introduction Modèles colorimétriques 1 pixel RVB CMJ Synthèse additive (sources de lumière, pixels) Synthèse soustractive (impression, vêtements)
Introduction Types d images générées Images matricielles Constituée d une matrice de pixels Formats web : JPEG, PNG, GIF Qualité dépend Nombre de pixels Profondeur de la couleur
Introduction Types d images générées Images matricielles Constituée d une matrice de pixels Formats web : JPEG, PNG, GIF Qualité dépend Nombre de pixels Profondeur de la couleur Avantages Formats supportés nativement Identiques dans tous les navigateurs
Introduction Types d images générées Images vectorielles Format SVG Représentation d objets vectoriels (XML) Objets définis mathématiquement <!doctype html> <title>test SVG dans HTML</title> <p> un disque : <svg> <circle r="40" cx="250" cy="50" stroke="red" fill="white"/> </svg> </p>
Introduction Types d images générées Images vectorielles Format SVG Représentation d objets vectoriels (XML) Objets définis mathématiquement 100% Avantages Pas de perte de qualité Utilise moins d octets 800%
Introduction Comment dessiner un graphique? 4.2, Statique FTP.jpg Serveur web Client 4.2, Serveur web Dynamique
Introduction Côté serveur VS côté client Client <!doctype html> <html> <body> <img src='graphique.php' alt='image'> </body> </html> HTML 1 Côté serveur Serveur
Introduction Côté serveur VS côté client Client <!doctype html> <html> <body> <img src='graphique.php' alt='image'> </body> </html> HTML 1 Côté serveur Serveur 2 http://.../graphique.php BDD
Introduction Côté serveur VS côté client Client <!doctype html> <html> <body> <img src='graphique.php' alt='image'> </body> </html> HTML 1 Côté serveur Serveur 2 http://.../graphique.php En-tête HTTP/1.1 200 OK Date: Sun, 02 Oct 2012 08:04:36 GMT Server: Apache Content-Length: 102419 Connection: close Content-Type: image/png Corps 3 Image générée dynamiquement
Introduction Côté client Client <!doctype html> <script type="text/javascript"> Côté serveur VS côté client var graph = new Dygraph(document.getElementById('graphique', data); </script> </html> HTML 1 Serveur JS
Introduction Côté serveur VS côté client Côté client Client <!doctype html> <script type="text/javascript"> var graph = new Dygraph(document.getElementById('graphique', data); </script> </html> HTML 1 Serveur JS 2 JS Image interactive
Introduction Côté serveur VS côté client Interactivité Annotations Menu contextuel Menu contextuel
Introduction Côté serveur VS côté client Interactivité Annotations Menu contextuel Sélecteur d intervalle Affichage points lors survol Sélecteur d intervalle
Introduction Côté serveur VS côté client Interactivité Annotations Menu contextuel Sélecteur d intervalle Affichage points lors survol Mise à jour dynamique, évolution du graphique dans le temps (Ajax) Dynamisme
Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs Rgraph Highcharts
Choix d une bibliothèque Critères Le client doit supporter les technologies utilisées JavaScript activé HTML5 SVG Besoin d interactivité Bibliothèque côté client Type de graphique Bibliothèque spécialisée Bibliothèque plus générique
Choix d une bibliothèque Critères Pérennité Support normes, documentation, forge logicielle Fonctionnalités offertes Développeur Expérience utilisateur
Choix d une bibliothèque Critères Sécurité Côté client : JS activé XSS Consommation des ressources Licence Aspect financier
Choix d une bibliothèque Bibliothèques choisies Dygraph Spécialisée dans les courbes RGraph Nombreux types de graphiques HighCharts Nombreux thèmes Dygraph HighCharts RGraph
Choix d une bibliothèque Exemples Courbes Histogrammes Diagrammes à secteurs http://www.insee.fr http://epp.eurostat.ec.europa.eu
Choix d une bibliothèque Mon premier graphique Créer et configurer Ajout de données (Ajax) Dynamisme
Principe du dynamisme JavaScript Ajouter et supprimer des points périodiquement setinterval(a, b) JS Fonction à exécuter Périodicité (ms) setinterval(majcourbe, 1000) ;
Principe du dynamisme Type de données Ajax Fichier CSV : intégralité de la courbe Format JSON : points de données [ x, y ]
Principe du dynamisme Ajax : format CSV 1
Principe du dynamisme Ajax : format CSV 1 2 http://.../datacsv.php Script
Principe du dynamisme Ajax : format CSV 1 2 http://.../datacsv.php Script 3 Réponse HTTP HTTP/1.1 200 OK Date: Sun, 30 Sep 2012 11:04:32 GMT Server: Apache Content-Length: 207 Content-Type: text/csv Date, Courbe1 19950101,2.1 19960101,1.9 20100101,2.2 En-tête Corps
Principe du dynamisme Ajax : format CSV 1 2 http://.../datacsv.php Script 3 4 Réponse HTTP HTTP/1.1 200 OK Date: Sun, 30 Sep 2012 11:04:32 GMT Server: Apache Content-Length: 207 Content-Type: text/csv Date, Courbe1 19950101,2.1 19960101,1.9 20100101,2.2 En-tête Corps
Principe du dynamisme Ajax : format JSON 1
Principe du dynamisme Ajax : format JSON 1 2 http://.../datajson.php Script
Principe du dynamisme Ajax : format JSON 1 2 http://.../datajson.php Script [ 20100101,2.2] 3 Réponse HTTP En-tête HTTP/1.1 200 OK Date: Sun, 30 Sep 2012 12:1:42 GMT Server: Apache Content-Length: 15 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: application/json [ 20100101,2.2] Corps
Principe du dynamisme Ajax : format JSON 1 2 http://.../datajson.php Script [ 20100101,2.2] 3 4 JS Réponse HTTP En-tête HTTP/1.1 200 OK Date: Sun, 30 Sep 2012 12:1:42 GMT Server: Apache Content-Length: 15 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: application/json [ 20100101,2.2] Corps
Principe du dynamisme Ajax : format JSON 1 2 http://.../datajson.php Script [ 20100101,2.2] 3 4 JS 5 Réponse HTTP En-tête HTTP/1.1 200 OK Date: Sun, 30 Sep 2012 12:1:42 GMT Server: Apache Content-Length: 15 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: application/json [ 20100101,2.2] Corps
Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs RGraph Highcharts
Dygraphs Caractéristiques Spécialisée dans les courbes Visualisation interactive de séries de données temporelles denses Open source Utilise HTML5 canvas (compatible IE < 9 avec ExplorerCanvas) Très simple d utilisation : 3 instructions JavaScript Nombreuses options de configuration Exploration de courbes http://dygraphs.com
Dygraphs Caractéristiques Spécialisée dans les courbes Visualisation interactive de séries de données temporelles denses Open source Utilise HTML5 canvas (compatible IE < 9 avec ExplorerCanvas) Très simple d utilisation : 3 instructions JavaScript Nombreuses options de configuration Zoom http://dygraphs.com
Dygraphs Courbe standard Données de températures fictives Deux courbes d après fichier CSV Une option : sélecteur d intervalle
Dygraphs Courbe standard 1 <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> JS 1. Inclure la bibliothèque </body> </html>
Dygraphs Courbe standard 1 2 <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> JS <div id='graphique' style='width:900px;height:220px'></div> 1. Inclure la bibliothèque 2. Créer le bloc conteneur </body> </html>
Dygraphs Courbe standard 1 2 3 <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique JS </body> </html>
Dygraphs Courbe standard 1 2 3 <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique Propriété: valeur </body> </html>
Dygraphs Courbe standard 1 2 3 <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique Formats de données Fichier CSV var graph = new Dygraph(conteneur, 'data.csv', opnons); </body> </html> 1 ère colonne x 2 ème colonne y 1 3 ème colonne y 2 Tableau de données var graph = new Dygraph(conteneur, data, opnons); var data = [ [new Date("2010/07/01"),25,20], [new Date("2010/08/01"),23,18.5], [new Date("2010/09/01"),18,17] ]
Dygraphs Courbe standard 1 2 3 <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> <noscript> <p>acnvez JS pour visualiser les courbes ou consultez la <a href='courbe.php'>version non interacnve</a></p> </noscript> </body> </html> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique JS
Dygraphs Courbe standard 1 2 3 4 <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> <noscript> <p>acnvez JS pour visualiser les courbes ou consultez la <a href='courbe.php'>version non interacnve</a></p> </noscript> </body> </html> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique 4. Donner une solunon alternanve JS
Dygraphs Courbe standard 1 2 3 4 <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> <noscript> <p>acnvez JS pour visualiser les courbes ou consultez la <a href='courbe.php'>version non interacnve</a></p> </noscript> </body> </html> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique 4. Donner une solunon alternanve Configuration du graphique
Dygraphs Courbe standard <div id='graphique'></div> <script type="text/javascript"> Configuration minimale var conteneur = document.getelementbyid('graphique'); var graph = new Dygraph(conteneur, 'data.csv'); </script> Configuration personnalisée
Dygraphs Courbe personnalisée var opnons = { width: 900, height: 280, rightgap: 15 Dimensions width: 900, height: 280, rightgap: 15 900px }; 280px 15px
Dygraphs Courbe personnalisée var opnons = { width: 900, height: 280, rightgap: 15, Mtle: 'Taux d\'accroisement migratoire : UE des 15 vs EU', legend: 'always' Titre et légende Ntle: 'Taux d\'accroisement migratoire : UE des 15 vs EU', legend: 'always' };
Dygraphs Courbe personnalisée var opnons = { width: 900, height: 280, rightgap: 15, Ntle: 'Taux d\'accroisement migratoire : UE des 15 vs EU', legend: 'always', ylabel: 'Taux de migranon', axislabelfontsize: 12, axislinecolor: 'navy', axislinewidth: 0.5, valuerange: [- 1,7], yaxislabelwidth : 32, pixelsperlabel: 30 Axe des ordonnées ylabel: 'Taux de migranon', axislabelfontsize: 12, axislinecolor: 'navy', axislinewidth: 0.5, valuerange: [- 1,7], yaxislabelwidth : 32, pixelsperlabel: 30, 12pt }; 32px 30px
Dygraphs Courbe personnalisée var opnons = { width: 900, height: 280, rightgap: 15, Ntle: 'Taux d\'accroisement migratoire : UE des 15 vs EU', legend: 'always', ylabel: 'Taux de migranon', axislabelfontsize: 12, axislinecolor: 'navy', axislinewidth: 0.5, valuerange: [- 1,7], yaxislabelwidth : 32, pixelsperlabel: 30, strokewidth: 2, colors: ['#FF5555', 'navy'], gridlinewidth: 0.2 }; Style des courbes et de la grille strokewidth: 2, colors: ['#FF5555', 'navy'], gridlinewidth: 0.2
Dygraphs Actualiser une courbe Sans interroger le serveur <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe Sans interroger le serveur funcnon majcourbe() { donnees.push( [ donnees.length, Math.random()*10 ] ) ; JS 3 } <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe Sans interroger le serveur funcnon majcourbe() { donnees.push( [ donnees.length, Math.random()*10 ] ) ; JS 6 } <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe Sans interroger le serveur funcnon majcourbe() { donnees.push( [ donnees.length, Math.random()*10 ] ) ; JS [3, 6] } <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe Sans interroger le serveur JS funcmon majcourbe() { donnees.push( [ donnees.length, Math.random()*10 ] ) ; graph.updateopmons( { 'file': donnees } ) ; } Dygraphs donnees = [ [0, 5], [1, 3], [2, 7], [3, 6] ] <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe Sans interroger le serveur JS funcmon majcourbe() { donnees.push( [ donnees.length, Math.random()*10 ] ) ; graph.updateopnons( { 'file': donnees } ) ; } Dygraphs > 250 appels de majcourbe() <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe Suppression du premier point du graphique funcmon majcourbe() { } donnees.push( [ i++, Math.random()*10 ] ) ; if (donnees.length > 100) { donnees.shi\() ; JS } graph.updateopnons( { 'file': donnees } ) ; <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var i = donnees.length; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe Suppression du premier point du graphique funcmon majcourbe() { } donnees.push( [ i++, Math.random()*10 ] ) ; if (donnees.length > 100) { donnees.shi\() ; JS } graph.updateopnons( { 'file': donnees } ) ; > 250 appels de majcourbe() <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var i = donnees.length; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe Suppression du premier point du graphique funcmon majcourbe() { } donnees.push( [i++, Math.random()*10 ] ) ; if (donnees.length > 100) { donnees.shi\() ; JS } graph.updateopnons( { 'file': donnees } ) ; > 250 appels de majcourbe() donnees = [ [0, 5], [1, 3],, [100, 2] ] <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var i = donnees.length; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe : fichier CSV En interrogeant le serveur (Ajax) JS http://.../datacsv.php Script <script type="text/javascript"> var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, 'datacsv.php', opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe : fichier CSV En interrogeant le serveur (Ajax) Dygraphs funcmon majcourbe() { graph.updateopnons( { 'file': 'datacsv.php'} ) ; } <script type="text/javascript"> var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, 'datacsv.php', opnons) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe : fichier CSV En interrogeant le serveur (Ajax) Dygraphs funcmon majcourbe() { graph.updateopnons( { 'file': 'datacsv.php'} ) ; } <script type="text/javascript"> var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, 'datacsv.php', opnons) ; setinterval(majcourbe, 1000) ; </script> Si trop de données Utiliser format JSON
Dygraphs Actualiser une courbe : format JSON En interrogeant le serveur (Ajax avec jquery) JS <script type='text/javascript' src='jquery.min.js'></script> http://.../datajson.php [3, 6] Script <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var graph = new Dygraph(conteneur, donnees) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe : format JSON En interrogeant le serveur (Ajax avec jquery) funcmon majcourbe() { $.ajax ( { jquery type: 'POST', url: 'datajson.php', datatype: 'json', success: funcnon(data) { } } ) ; } <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var graph = new Dygraph(conteneur, donnees) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe : format JSON funcmon majcourbe() { $.ajax ( { jquery type: 'POST', url: 'datajson.php', datatype: 'json', success: funcnon(data) { } En interrogeant le serveur (Ajax avec jquery) } ) ; } http://.../datajson.php data [3, 6] PHP <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var graph = new Dygraph(conteneur, donnees) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe : format JSON funcmon majcourbe() { $.ajax ( { jquery type: 'POST', url: 'datajson.php', datatype: 'json', success: funcmon(data) { donnees.push(data) ; } En interrogeant le serveur (Ajax avec jquery) } ) ; } http://.../datajson.php JS [3, 6] PHP <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var graph = new Dygraph(conteneur, donnees) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Actualiser une courbe : format JSON funcmon majcourbe() { $.ajax ( { jquery type: 'POST', url: 'datajson.php', datatype: 'json', success: funcmon(data) { JS donnees.push(data) ; graph.updateopmons( {'file': donnees } ) ; } } ) ; } En interrogeant le serveur (Ajax avec jquery) Dygraphs donnees = [ [0, 5], [1, 3], [2, 7], [3, 6] ] <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var graph = new Dygraph(conteneur, donnees) ; setinterval(majcourbe, 1000) ; </script>
Dygraphs Avantages et inconvénients Spécialisée dans les courbes Interactivité Fonctionnalités offertes Séries données denses Fichiers CSV Pérennité Elément HTML5 canvas Documentation, exemples Forge logicielle, communauté active, demandes d améliorations Développeur Facile 3 instructions pour graphique standard Pas besoin de connaître JS
Dygraphs Avantages et inconvénients Expérience utilisateur Aspect professionnel Consultation interactive Sécurité Côté client : JavaScript activé XSS Solution : filtrer les entrées et protéger les sorties Consommation des ressources Navigateur Bibliothèque minifiée < 100Ko Licence Open source (inclure la licence dans vos pages web) Aspect financier Gratuite Faible coût humain
Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs RGraph Highcharts
RGraph CaractérisNques Visualisation interactive de graphiques (20 types supportés) Gratuit pour une utilisation non commerciale Utilise HTML5 canvas Très simple d utilisation Nombreuses options de configuration hup://www.rgraph.net/
RGraph CaractérisNques Visualisation interactive de graphiques (20 types supportés) Gratuit pour une utilisation non commerciale Utilise HTML5 canvas Très simple d utilisation Nombreuses options de configuration Video qui montre l utilisation des annotations + menu contextuel hup://www.rgraph.net/
1 RGraph <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> Courbe standard 1. Inclure les bibliothèques </head> </html>
1 RGraph <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> Courbe standard 1. Inclure les bibliothèques 2. Créer le bloc conteneur 2 </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html>
RGraph Courbe standard 1 3 2 <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique
RGraph Courbe standard 1 3 2 <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique Diffère suivant type de graphique
RGraph Courbe standard 1 3 2 <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique
RGraph Courbe standard 1 3 2 <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.mtle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique
RGraph Courbe standard 1 3 2 <!doctype html> <html> <head><ntle>rgraph</ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique
RGraph Courbe standard 1 3 2 4 <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> <img src='image.php' alt='graphique alternanf'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique 4. Donner une solunon alternanve
RGraph Courbe standard 1 3 2 4 <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> <img src='image.php' alt='graphique alternanf'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique 4. Donner une solunon alternanve Configuration du graphique
RGraph Courbe standard Configuration minimale <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.draw(); } </script> Taille réelle Configuration personnalisée
RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html> 850px 250px
RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html> 5px 35px
RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html> 5px 35px
RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> graphe.set('chart.annotatable', true); Interactivité <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.context.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); Interactivité graphe.set('chart.annotatable', true); graphe.set('chart.contextmenu', [ [ 'Voir la palette', RGraph.Showpalette ], [ 'Effacer les annotations', function() { RGraph.ClearAnnotations(graphe.canvas); RGraph.Clear(graphe.canvas); graphe.draw(); } ] ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.context.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); Interactivité graphe.set('chart.annotatable', true); graphe.set('chart.contextmenu', [ [ 'Voir la palette', RGraph.Showpalette ], [ 'Effacer les annotations', function() { RGraph.ClearAnnotations(graphe.canvas); RGraph.Clear(graphe.canvas); graphe.draw(); } ] ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.context.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); Interactivité graphe.set('chart.annotatable', true); graphe.set('chart.contextmenu', [ [ 'Voir la palette', RGraph.Showpalette ], [ 'Effacer les annotations', function() { RGraph.ClearAnnotations(graphe.canvas); RGraph.Clear(graphe.canvas); graphe.draw(); } ] ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.context.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); Interactivité graphe.set('chart.annotatable', true); graphe.set('chart.contextmenu', [ [ 'Voir la palette', RGraph.Showpalette ], [ 'Effacer les annotations', function() { RGraph.ClearAnnotations(graphe.canvas); RGraph.Clear(graphe.canvas); graphe.draw(); } ] ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.context.js' type='text/javascript'></script> <script type='text/javascript'> window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); Interactivité graphe.set('chart.annotatable', true); graphe.set('chart.contextmenu', [ [ 'Voir la palette', RGraph.Showpalette ], [ 'Effacer les annotations', function() { RGraph.ClearAnnotations(graphe.canvas); RGraph.Clear(graphe.canvas); graphe.draw(); } ] ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
RGraph Diagramme à secteurs 1 2 3 4 <!doctype html> <html> <head> <Ntle>test diagramme secteurs RGraph</Ntle> <script src='js/rgraph/rgraph.pie.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.resizing.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.toolmps.js' type='text/javascript'></script> <script type='text/javascript > window.onload = funcmon() { // créamon du graphique } </script> </head> <body> <canvas id='graphique' width='600' height='250'> <img src='image.php' alt='graphique alternanf'> </canvas> </body> </html> 1. Inclure les bibliothèques 2. Créer le graphique 3. Créer le bloc conteneur 4. Donner une solunon alternanve
RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); Création du graphique } graphe.draw();
RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js RGraph.common.key.js 400px window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); Conteneur Création du graphique graphe.set('chart.key', ['Premier degré','second degré','supérieur', 'Formation continue','enseignement extra-scolaire']); graphe.set('chart.key.posimon.x', 400); } graphe.draw();
RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js RGraph.common.key.js 45px 15px window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); graphe.set('chart.mtle', 'Dépense intérieure d\'éducation'); graphe.set('chart.guier.top', 45); graphe.set('chart.key', ['Premier degré','second degré','supérieur', 'Formation continue','enseignement extra-scolaire']); graphe.set('chart.key.position.x', 400); graphe.set('chart.colors', ['#426F42', '#E47833','#5C3317,'#FCFAE1','#C81902']); graphe.set('chart.exploded', [0,0,15,0,0]); Création du graphique } graphe.draw();
RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js RGraph.common.key.js RGraph.common.dynamic.js RGraph.common.resizing.js window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); graphe.set('chart.title', 'Dépense intérieure d\'éducation'); graphe.set('chart.gutter.top', 45); graphe.set('chart.key', ['Premier degré','second degré','supérieur', 'Formation continue','enseignement extra-scolaire']); graphe.set('chart.key.position.x', 400); graphe.set('chart.colors', ['#426F42', '#E47833','#5C3317', '#FCFAE1','#C81902']); graphe.set('chart.exploded', [0,0,15,0,0]); graphe.set('chart.resizable', true); Création du graphique Interactivité } graphe.draw();
RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js RGraph.common.key.js RGraph.common.dynamic.js RGraph.common.resizing.js window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); graphe.set('chart.title', 'Dépense intérieure d\'éducation'); graphe.set('chart.gutter.top', 45); graphe.set('chart.key', ['Premier degré','second degré','supérieur', 'Formation continue','enseignement extra-scolaire']); graphe.set('chart.key.position.x', 400); graphe.set('chart.colors', ['#426F42', '#E47833','#5C3317', '#FCFAE1','#C81902']); graphe.set('chart.exploded', [0,0,15,0,0]); graphe.set('chart.resizable', true); Création du graphique Interactivité } graphe.draw();
RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js RGraph.common.key.js RGraph.common.dynamic.js RGraph.common.resizing.js window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); graphe.set('chart.title', 'Dépense intérieure d\'éducation'); graphe.set('chart.gutter.top', 45); graphe.set('chart.key', ['Premier degré','second degré','supérieur', 'Formation continue','enseignement extra-scolaire']); graphe.set('chart.key.position.x', 400); graphe.set('chart.colors', ['#426F42', '#E47833','#5C3317', '#FCFAE1','#C81902']); graphe.set('chart.exploded', [0,0,15,0,0]); graphe.set('chart.resizable', true); Création du graphique Interactivité } graphe.draw();
RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js RGraph.common.key.js RGraph.common.dynamic.js RGraph.common.resizing.js RGraph.common.tooltips.js window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); graphe.set('chart.title', 'Dépense intérieure d\'éducation'); graphe.set('chart.gutter.top', 45); graphe.set('chart.key', ['Premier degré','second degré','supérieur', 'Formation continue','enseignement extra-scolaire']); graphe.set('chart.key.position.x', 400); graphe.set('chart.colors', ['#426F42', '#E47833','#5C3317', '#FCFAE1','#C81902']); graphe.set('chart.exploded', [0,0,15,0,0]); graphe.set('chart.resizable', true); graphe.set('chart.toolmps', ['Premier degré<br>38.5%','second degré<br>57%','supérieur<br>27.2%', 'Formation continue<br>9.5%','enseignement extra-scolaire<br>2.6%']); graphe.draw(); } Création du graphique Interactivité
RGraph Histogramme 1 2 3 4 <!doctype html> <html> <head> <Ntle>test histogramme RGraph</Ntle> <script src='js/rgraph/rgraph.bar.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.key.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script type='text/javascript > window.onload = funcmon() { // créamon du graphique } </script> </head> <body> <canvas id='graphique' width='850' height='250'> <img src='image.php' alt='graphique alternanf'> </canvas> </body> </html> 1. Inclure les bibliothèques 2. Créer le graphique 3. Créer le bloc conteneur 4. Donner une solunon alternanve
RGraph Histogramme window.onload = function() { var data = [[178, 175, 184],[161, 229, 269],[149, 173, 208],[192,221,247],[170,221,266]]; var graphe = new RGraph.Bar('graphique', data); Création du graphique Bibliothèques requises RGraph.bar.js RGraph.common.core.js } graphe.draw();
RGraph Histogramme window.onload = function() { var data = [[178, 175, 184],[161, 229, 269],[149, 173, 208],[192,221,247],[170,221,266]]; var graphe = new RGraph.Bar('graphique', data); Création du graphique Bibliothèques requises RGraph.bar.js RGraph.common.core.js } graphe.draw();
RGraph Histogramme window.onload = function() { var data = [[178, 175, 184],[161, 229, 269],[149, 173, 208],[192,221,247],[170,221,266]]; var graphe = new RGraph.Bar('graphique', data); graphe.set('chart.mtle', 'Taux d\'endettement en pourcentage du PIB (2010)'); graphe.set('chart.mtle.vpos', 0.6); graphe.set('chart.labels', ['Allemagne', 'Espagne', 'France','Italie','Royaume-Uni']); Création du graphique Bibliothèques requises RGraph.bar.js RGraph.common.core.js } graphe.draw();
RGraph Histogramme window.onload = function() { var data = [[178, 175, 184],[161, 229, 269],[149, 173, 208],[192,221,247],[170,221,266]]; Création du graphique var graphe = new RGraph.Bar('graphique', data); graphe.set('chart.title', 'Taux d\'endettement en pourcentage du PIB (2010)'); graphe.set('chart.title.vpos', 0.6); graphe.set('chart.labels', ['Allemagne', 'Espagne', 'France','Italie','Royaume-Uni']); graphe.set('chart.key', ['2000', '2007', '2010' ]); graphe.set('chart.key.posimon', 'gutter'); graphe.set('chart.key.posimon.y', graphe.canvas.height - 20); Bibliothèques requises RGraph.bar.js RGraph.common.core.js RGraph.common.key.js } graphe.draw();
RGraph Histogramme window.onload = function() { var data = [[178, 175, 184],[161, 229, 269],[149, 173, 208],[192,221,247],[170,221,266]]; Création du graphique var graphe = new RGraph.Bar('graphique', data); graphe.set('chart.title', 'Taux d\'endettement en pourcentage du PIB (2010)'); graphe.set('chart.title.vpos', 0.6); graphe.set('chart.labels', ['Allemagne', 'Espagne', 'France','Italie','Royaume-Uni']); graphe.set('chart.key', ['2000', '2007', '2010' ]); graphe.set('chart.key.position', 'gutter'); graphe.set('chart.key.position.y', graphe.canvas.height - 20); graphe.set('chart.guier.le\', 35); graphe.set('chart.guier.boiom', 45); graphe.set('chart.hmargin', 25); Bibliothèques requises RGraph.bar.js RGraph.common.core.js RGraph.common.key.js } graphe.draw(); 35px 25px 45px
RGraph Histogramme window.onload = function() { var data = [[178, 175, 184],[161, 229, 269],[149, 173, 208],[192,221,247],[170,221,266]]; Création du graphique var graphe = new RGraph.Bar('graphique', data); graphe.set('chart.title', 'Taux d\'endettement en pourcentage du PIB (2010)'); graphe.set('chart.title.vpos', 0.6); graphe.set('chart.labels', ['Allemagne', 'Espagne', 'France','Italie','Royaume-Uni']); graphe.set('chart.key', ['2000', '2007', '2010' ]); graphe.set('chart.key.position', 'gutter'); graphe.set('chart.key.position.y', graphe.canvas.height - 20); graphe.set('chart.gutter.left', 35); graphe.set('chart.gutter.bottom', 45); graphe.set('chart.hmargin', 25); graphe.set('chart.background.barcolor1', 'white'); graphe.set('chart.background.barcolor2', '#EEEEEE'); graphe.set('chart.background.grid.vlines', false); Bibliothèques requises RGraph.bar.js RGraph.common.core.js RGraph.common.key.js } graphe.draw();
RGraph Histogramme window.onload = function() { var data = [[178, 175, 184],[161, 229, 269],[149, 173, 208],[192,221,247],[170,221,266]]; var colors = [ '#426F42', '#E47833', '#F6E497' ]; var graphe = new RGraph.Bar('graphique', data); graphe.set('chart.title', 'Taux d\'endettement en pourcentage du PIB (2010)'); graphe.set('chart.title.vpos', 0.6); graphe.set('chart.labels', ['Allemagne', 'Espagne', 'France','Italie','Royaume-Uni']); graphe.set('chart.key', ['2000', '2007', '2010' ]); graphe.set('chart.key.position', 'gutter'); graphe.set('chart.key.position.y', graphe.canvas.height - 20); graphe.set('chart.gutter.left', 35); graphe.set('chart.gutter.bottom', 45); graphe.set('chart.hmargin', 25); graphe.set('chart.background.barcolor1', 'white'); graphe.set('chart.background.barcolor2', '#EEEEEE'); graphe.set('chart.background.grid.vlines', false); graphe.set('chart.colors', colors); Création du graphique Bibliothèques requises RGraph.bar.js RGraph.common.core.js RGraph.common.key.js } graphe.draw();
RGraph Histogramme window.onload = function() { var data = [[178, 175, 184],[161, 229, 269],[149, 173, 208],[192,221,247],[170,221,266]]; var colors = [ '#426F42', '#E47833', '#F6E497' ]; var graphe = new RGraph.Bar('graphique', data); graphe.set('chart.title', 'Taux d\'endettement en pourcentage du PIB (2010)'); graphe.set('chart.title.vpos', 0.6); graphe.set('chart.labels', ['Allemagne', 'Espagne', 'France','Italie','Royaume-Uni']); graphe.set('chart.key', ['2000', '2007', '2010' ]); graphe.set('chart.key.position', 'gutter'); graphe.set('chart.key.position.y', graphe.canvas.height - 20); graphe.set('chart.labels.ingraph', [ 5, 'Taux le plus élevé']); graphe.set('chart.gutter.left', 35); graphe.set('chart.gutter.bottom', 45); graphe.set('chart.hmargin', 25); graphe.set('chart.background.barcolor1', 'white'); graphe.set('chart.background.barcolor2', '#EEEEEE'); graphe.set('chart.background.grid.vlines', false); graphe.set('chart.colors', colors); Création du graphique Bibliothèques requises RGraph.bar.js RGraph.common.core.js RGraph.common.key.js } graphe.draw();
RGraph Histogramme window.onload = function() { var data = [[178, 175, 184],[161, 229, 269],[149, 173, 208],[192,221,247],[170,221,266]]; var colors = [ '#426F42', '#E47833', '#F6E497' ]; var graphe = new RGraph.Bar('graphique', data); graphe.set('chart.title', 'Taux d\'endettement en pourcentage du PIB (2010)'); graphe.set('chart.title.vpos', 0.6); graphe.set('chart.labels', ['Allemagne', 'Espagne', 'France','Italie','Royaume-Uni']); graphe.set('chart.key', ['2000', '2007', '2010' ]); } graphe.set('chart.key.position', 'gutter'); graphe.set('chart.key.position.y', graphe.canvas.height - 20); graphe.set('chart.labels.ingraph', [ 5, Taux le plus élevé']); graphe.set('chart.gutter.left', 35); graphe.set('chart.gutter.bottom', 45); graphe.set('chart.hmargin', 25); graphe.set('chart.background.barcolor1', 'white'); graphe.set('chart.background.barcolor2', '#EEEEEE'); graphe.set('chart.background.grid.vlines', false); graphe.set('chart.colors', colors); graphe.set('chart.crosshairs', true); graphe.draw(); Interactivité Création du graphique Bibliothèques requises RGraph.bar.js RGraph.common.core.js RGraph.common.key.js RGraph.common.dynamic.js
RGraph Avantages et inconvénients Propose de nombreux types de graphiques Fonctionnalités offertes Combinaison de graphiques Paramétrage du style (peut être long) Pérennité Elément HTML5 canvas Documentation, exemples Communauté active, flux RSS, courriel de support Développeur Plutôt facile Peu d instructions pour graphique standard Pas besoin de connaître JS
RGraph Avantages et inconvénients Expérience utilisateur Après configuration, aspect professionnel Consultation interactive Sécurité Côté client : JavaScript activé XSS Solution : filtrer les entrées et protéger les sorties Consommation des ressources Navigateur Bibliothèques en plusieurs parties 2Mo Licence Gratuite pour utilisation non commerciale (inclure lien vers site officiel dans vos pages web) Entre 99 et 1263 pour une application commerciale Aspect financier Faible coût humain RGraph.bar.js 100Ko RGraph.common.core.js 85Ko RGraph.common.key.js 28Ko RGraph.common.dynamic.js 32Ko
Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs RGraph Highcharts
Highcharts Caractéristiques Visualisation interactive de graphiques Gratuit pour une utilisation non commerciale Utilise Un framework pour la manipulation du DOM (jquery) SVG ou VML Nombreuses options de configuration Très simple d utilisation Plusieurs thèmes disponibles hup://www.highcharts.com
Highcharts Caractéristiques Visualisation interactive de graphiques Gratuit pour une utilisation non commerciale Utilise Un framework pour la manipulation du DOM (jquery) SVG ou VML Nombreuses options de configuration Très simple d utilisation Plusieurs thèmes disponibles hup://www.highcharts.com
Highcharts Caractéristiques JSFIDDLE Modifier interactivement les propriétés Observer le résultat hup://jsfiddle.net
Highcharts Courbe standard 1 <!doctype html> <html> JS <head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> 1. Inclure les bibliothèques </head> </html>
Highcharts Courbe standard 1 <!doctype html> <html> JS <head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> 1. Inclure les bibliothèques 2. Créer le bloc conteneur 2 <body> <div id="graphique" style="width:900px;height:220px"> </div> </head> </body> </html>
Highcharts Courbe standard 1 3 <!doctype html> <html> <head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> var chart; var opmons = { chart: { renderto: 'graphique', type: 'line' }, series: [{ JS JS data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7, 0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1, 2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8, 4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(funcnon() { chart = new Highcharts.Chart(opMons); }); </script> </head> 2 <body> <div id="graphique" style="width:900px;height:220px"> </div> </body> </html> 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique
Highcharts Courbe standard 1 3 <!doctype html> <html> <head> JS <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> var chart; var opnons = { chart: { renderto: 'graphique', type: 'line' }, series: [{ data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7, 0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1, 2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8, 4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(funcnon() { chart = new Highcharts.Chart(opNons); }); </script> </head> 2 <body> <div id="graphique" style="width:900px;height:220px"> </div> </body> </html> 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique 2 objets 2 courbes
Highcharts Courbe standard 1 3 <!doctype html> <html> <head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> var chart; var opnons = { chart: { renderto: 'graphique', type: 'line' }, series: [{ data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7, 0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1, 2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8, 4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(funcmon() { chart = new Highcharts.Chart(opMons); }); </script> </head> JS JS jquery 2 <body> <div id="graphique" style="width:900px;height:220px"> </div> </body> </html> 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique
Highcharts Courbe standard 1 3 <!doctype html> <html> <head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> var chart; var opnons = { chart: { renderto: 'graphique', type: 'line' }, series: [{ data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7, 0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1, 2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8, 4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(funcnon() { chart = new Highcharts.Chart(opNons); }); </script> </head> JS JS jquery 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique 4. Donner une solunon alternanve <body> 2 <div id="graphique" style="width:900px;height:220px"> </div> <noscript> 4 <p>acnvez JS pour visualiser les courbes ou consultez la <a href='courbe.php'>version non interacnve</a> </p> </noscript> </body> </html>
Highcharts Courbe standard 1 3 <!doctype html> <html> <head> JS <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> var chart; var opmons = { chart: { renderto: 'graphique', type: 'line' }, series: [{ data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7, 0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1, 2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8, 4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(funcnon() { chart = new Highcharts.Chart(opMons); }); </script> </head> 2 4 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique 4. Donner une solunon alternanve Configuration du graphique <body> <div id="graphique" style="width:900px;height:220px"> </div> <noscript> <p>acnvez JS pour visualiser les courbes ou consultez la <a href='courbe.php'>version non interacnve</a> </p> </noscript> </body> </html>
Highcharts Courbe standard Configuration minimale var opmons = { chart: { renderto: 'graphique', type: 'line' }, series: [{ data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45, 0.4, 0.7,0.5,1.5,2.3,2.2,3.1,3.7, 2.8,2,2.1,1.9,1.5, 1.6,2.4,3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5, 5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; Configuration personnalisée
Highcharts Courbe personnalisée <!doctype html> <html> <head> <title>test courbes Highcharts </title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> var chart; var options ={ chart: { renderto: 'graphique', type: 'line', height: 220 }, series: [{ data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1, 3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5, 5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(function() { chart = new Highcharts.Chart(options); }) </script> </head> <body><div id="graphique"></div></body> </html> 220px
Highcharts Courbe personnalisée <!doctype html> <html> <head> <title>test courbes Highcharts </title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/themes/gray.js"></script> <script type="text/javascript"> var chart; var options ={ chart: { renderto: 'graphique', type: 'line', height: 220 }, series: [{ data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1, 3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5, 5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(function() { chart = new Highcharts.Chart(options); }) </script> </head> <body><div id="graphique"></div></body> </html>
Highcharts Courbe personnalisée <!doctype html> <html> <head> <title>test courbes Highcharts </title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/themes/gray.js"></script> <script type="text/javascript"> var chart; var options ={ chart: { renderto: 'graphique', type: 'line', height: 220 series: [{ data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1, 3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { }, credits: {enabled: false}, title:{text:'taux d\'accroissement migratoire : UE des 15 vs EU'}, data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5, 5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(function() { chart = new Highcharts.Chart(options); }) </script> </head> <body><div id="graphique"></div></body> </html>
Highcharts Courbe personnalisée <!doctype html> <html> <head> <title>test courbes Highcharts </title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/themes/gray.js"></script> <script type="text/javascript"> var chart; var options ={ chart: { renderto: 'graphique', type: 'line', height: 220 }, credits: {enabled:false}, title:{text:'taux d\'accroissement migratoire : UE des 15 vs EU'}, series: [{ name: 'UE des 15', data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1, 3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { name: 'EU', data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5, 5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(function() { chart = new Highcharts.Chart(options); }) </script> </head> <body><div id="graphique"></div></body> </html>
Highcharts Courbe personnalisée <!doctype html> <html> <head> <title>test courbes Highcharts </title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/themes/gray.js"></script> <script type="text/javascript"> var chart; var options ={ chart: { renderto: 'graphique', type: 'line', height: 220 }, credits: {enabled:false}, title:{text:'taux d\'accroissement migratoire : UE des 15 vs EU'}, legend: { layout: 'vertical', align: 'right', verticalalign: 'top', borderwidth: 0, floating: true }, series: [{ name: 'UE des 15', data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1, 3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { name: 'EU', data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5, 5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(function() { chart = new Highcharts.Chart(options); }) </script> </head> <body><div id="graphique"></div></body> </html>
Highcharts Courbe personnalisée <!doctype html> <html> <head> <title>test courbes Highcharts </title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/themes/gray.js"></script> <script type="text/javascript"> var chart; var options ={ chart: { renderto: 'graphique', type: 'line', height: 220 }, credits: {enabled:false}, title:{text:'taux d\'accroissement migratoire : UE des 15 vs EU'}, legend: { layout: 'vertical', align: 'right', verticalalign: 'top', borderwidth: 0, floating: true }, yaxis: { max: 7, min: -5, minortickinterval: 2.5, endontick: false, title: { text: 'Taux de migration' } }, 2.5px series: [{ name: 'UE des 15', data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1, 3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { name: 'EU', data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5, 5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(function() { chart = new Highcharts.Chart(options); }) </script> </head> <body><div id="graphique"></div></body> </html>
Highcharts Courbe personnalisée <!doctype html> <html> <head> <title>test courbes Highcharts </title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/themes/gray.js"></script> <script type="text/javascript"> var chart; var options ={ chart: { renderto: 'graphique', type: 'line', height: 220 }, credits: {enabled:false}, title:{text:'taux d\'accroissement migratoire : UE des 15 vs EU'}, legend: { layout: 'vertical', align: 'right', verticalalign: 'top', borderwidth: 0, floating: true }, yaxis: { max: 7, min: -5, minortickinterval: 2.5, endontick: false, title: { text: 'Taux de migration' } }, xaxis: { tickinterval: 5, categories: ['1975','1976','1977','1978','1979','1980','1981','1982','1983','1984', '1985','1986','1987','1988','1989','1990','1991','1992','1993', '1994','1995','1996','1997','1998','1999','2000','2001','2002', '2003','2004','2005','2006','2007', '2008','2009','2010'] }, series: [{ name: 'UE des 15', data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1, 3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { name: 'EU', data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5, 5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(function() { chart = new Highcharts.Chart(options); }) </script> </head> <body><div id="graphique"></div></body> </html>
Highcharts Courbe personnalisée <!doctype html> <html> <head> <title>test courbes Highcharts </title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/themes/gray.js"></script> <script type="text/javascript"> var chart; var options ={ chart: { renderto: 'graphique', type: 'line', height: 220, zoomtype: 'xy' }, credits: {enabled:false}, title:{text:'taux d\'accroissement migratoire : UE des 15 vs EU'}, legend: { layout: 'vertical', align: 'right', verticalalign: 'top', borderwidth: 0, floating: true }, yaxis: { max: 7, min: -5, minortickinterval: 2.5, endontick: false, title: { text: 'Taux de migration' } }, xaxis: { tickinterval: 5, categories: ['1975','1976','1977','1978','1979','1980','1981','1982','1983','1984', '1985','1986','1987','1988','1989','1990','1991','1992','1993', '1994','1995','1996','1997','1998','1999','2000','2001','2002', '2003','2004','2005','2006','2007', '2008','2009','2010'] }, series: [{ name: 'UE des 15', data: [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1, 3.7,2.8,2,2.1,1.9,1.5,1.6,2.4, 3.7,3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2] }, { name: 'EU', data: [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5, 5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3] }] }; $(document).ready(function() { chart = new Highcharts.Chart(options); }) </script> </head> <body><div id="graphique"></div></body> </html>
Highcharts Diagramme à secteurs 1 2 3 4 <!doctype html> <html> <head> <Ntle> Diagramme Highcharts </Ntle> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/themes/grid.js"></script> <script type="text/javascript"> var chart; var opnons = { // opmons de configuramon }; $(document).ready(funcnon() { chart = new Highcharts.Chart(opNons); }); </script> </head> <body> <div id="graphique"> </div> <noscript> <p>acnvez JS pour visualiser les courbes ou consultez la <a href='courbe.php'>version non interacnve</a> </p> </noscript> </body> </html> 1. Inclure les bibliothèques 2. Créer le graphique 3. Créer le bloc conteneur 4. Donner une solunon alternanve
Highcharts Diagramme à secteurs var options = { chart: { renderto: 'graphique', }, height: 370, width: 500 Options 1. Inclure les bibliothèques 2. Créer le graphique 3. Créer le bloc conteneur 4. Donner une solunon alternanve title: {text: 'Dépense intérieure d\'éducation par niveau d\'enseignement'}, series: [{ name: 'Pourcentage', data: [ ['Premier degré',38.5], { name: 'Second degré', y: 57, 500px }; }] ] }, ['Supérieur,27.2], ['Formation continue,9.5], ['Enseignement extra-scolaire,2.6] 370px
Highcharts Diagramme à secteurs var options = { chart: { renderto: 'graphique', type: 'pie', height: 370, width: 500 }, Options title: {text: 'Dépense intérieure d\'éducation par niveau d\'enseignement'}, series: [{ name: 'Pourcentage', data: [ ['Premier degré',38.5], { name: 'Second degré', y: 57, }; }] ] }, ['Supérieur,27.2], ['Formation continue',9.5], ['Enseignement extra-scolaire',2.6]
Highcharts Diagramme à secteurs var options = { chart: { renderto: 'graphique', type: 'pie', height: 370, width: 500 }, Options title: {text: 'Dépense intérieure d\'éducation par niveau d\'enseignement'}, series: [{ name: 'Pourcentage', data: [ ['Premier degré',38.5], { name: 'Second degré', y: 57, Tableau d objets Liste de points data: [ 38.5, 57, 18 ] Liste de tableaux à 2 cases data: [ ['Premier degré',38.5], ['Second degré',57],['supérieur',27.2] ] Liste d objets data: [ ] { name: 'Premier degré', y: 38.5}, { name: 'Second degré', y: 57, sliced: true }, { name: 'Supérieur', y: 27.2} }; }] ] }, ['Supérieur,27.2], ['Formation continue',9.5], ['Enseignement extra-scolaire',2.6]
Highcharts Diagramme à secteurs var options = { chart: { renderto: 'graphique', type: 'pie', height: 370, width: 500 }, }; Options title: {text: 'Dépense intérieure d\'éducation par niveau d\'enseignement'}, series: [{ name: 'Pourcentage', data: [ ['Premier degré',38.5], { name: 'Second degré', y: 57, sliced: true }, ['Supérieur,27.2], ['Formation continue',9.5], ['Enseignement extra-scolaire',2.6] ] }] Tableau d objets Liste de points data: [ 38.5, 57, 18 ] Liste de tableaux à 2 cases data: [ ['Premier degré',38.5], ['Second degré',57],['supérieur',27.2] ] Liste d objets data: [ ] { name: 'Premier degré', y: 38.5}, { name: 'Second degré', y: 57, sliced: true }, { name: 'Supérieur', y: 27.2}
Highcharts Diagramme à secteurs var options = { Options chart: { renderto: 'graphique', type: 'pie', height: 370, width: 500 }, credits: { text:"france (2010)" }, title: {text: 'Dépense intérieure d\'éducation par niveau d\'enseignement'}, series: [{ name: 'Pourcentage', data: [ ['Premier degré',38.5], { name: 'Second degré', y: 57, sliced: true }, ['Supérieur,27.2], ['Formation continue',9.5], ['Enseignement extra-scolaire',2.6] ] }] };
Highcharts Diagramme à secteurs var options = { Options chart: { renderto: 'graphique', type: 'pie', height: 370, width: 500 }, credits: { text:"france (2010)" }, title: {text: 'Dépense intérieure d\'éducation par niveau d\'enseignement'}, series: [{ name: 'Pourcentage', data: [ ['Premier degré',38.5], { name: 'Second degré', y: 57, sliced: true }, ['Supérieur,27.2], ['Formation continue',9.5], ['Enseignement extra-scolaire',2.6] ] }] }; Thème <script type="text/javascript" src="js/themes/grid.js"></script>
Highcharts Diagramme à secteurs var options = { Options chart: { renderto: 'graphique', type: 'pie', height: 370, width: 500 }, credits: { text:"france (2010)" }, title: {text: 'Dépense intérieure d\'éducation par niveau d\'enseignement'}, series: [{ name: 'Pourcentage', data: [ ['Premier degré',38.5], { name: 'Second degré', y: 57, sliced: true }, ['Supérieur,27.2], ['Formation continue',9.5], ['Enseignement extra-scolaire',2.6] ] }] }; Thème <script type="text/javascript" src="js/themes/grid.js"></script>
Highcharts Histogramme 1 2 3 4 <!doctype html> <html> <head> <Ntle> Histogramme Highcharts </Ntle> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/themes/skies.js"></script> <script type="text/javascript"> var chart; var opnons = { // opmons de configuramon }; $(document).ready(funcnon() { chart = new Highcharts.Chart(opNons); }); </script> </head> <body> <div id="graphique"> </div> <noscript> <p>acnvez JS pour visualiser les courbes ou consultez la <a href='courbe.php'>version non interacnve</a> </p> </noscript> </body> </html> 1. Inclure les bibliothèques 2. Créer le graphique 3. Créer le bloc conteneur 4. Donner une solunon alternanve
Highcharts Histogramme var options = { chart: { renderto: 'graphique', Options height: 250, }, credits: {enabled: false}, title: {text: 'Taux d\'endettement en pourcentage du PIB (2010)'}, }; series: [{ name: '2000', data: [178, 161, 149, 192, 170] }, { name: '2007', data: [175, 229, 173, 221, 221] }, { name: '2010', data: [184, 269, 208, 247, 266] }]
Highcharts Histogramme var options = { Options chart: { renderto: 'graphique', type: 'column', height: 250, }, credits: {enabled: false}, title: {text: 'Taux d\'endettement en pourcentage du PIB (2010)'}, }; series: [{ name: '2000', data: [178, 161, 149, 192, 170] }, { name: '2007', data: [175, 229, 173, 221, 221] }, { name: '2010', data: [184, 269, 208, 247, 266] }]
Highcharts Histogramme var options = { chart: { renderto: 'graphique', type: 'column', height: 250, }, credits: {enabled: false}, title: {text: 'Taux d\'endettement en pourcentage du PIB (2010)'}, }; Options series: [{ name: '2000', data: [178, 161, 149, 192, 170] }, { name: '2007', data: [175, 229, 173, 221, 221] }, { name: '2010', data: [184, 269, 208, 247, 266] }] Variables à représenter Une variable series: [{ name: '2000', data: [178, 161, 149, 192, 170] }] Plusieurs variables series: [{ name: '2000', data: [178, 161, 149, 192, 170] },{ name: '2007', data: [175, 229, 173, 221, 221] }]
Highcharts Histogramme var options = { Options chart: { renderto: 'graphique', type: 'column', height: 250, }, credits: {enabled: false}, title: {text: 'Taux d\'endettement en pourcentage du PIB (2010)'}, yaxis: { max: 300, min: 0, title: { text: null } }, xaxis: { categories: ['Allemagne','Espagne','France','Italie','Royaume-Uni'] }, series: [{ name: '2000', data: [178, 161, 149, 192, 170] }, { name: '2007', data: [175, 229, 173, 221, 221] }, { name: '2010', data: [184, 269, 208, 247, 266] }] };
Highcharts Histogramme var options = { Options chart: { renderto: 'graphique', type: 'column', height: 250, }, credits: {enabled: false}, title: {text: 'Taux d\'endettement en pourcentage du PIB (2010)'}, yaxis: { max: 300, min: 0, title: { text: null } }, }; xaxis: { categories: ['Allemagne','Espagne','France','Italie','Royaume-Uni'] }, series: [{ name: '2000', data: [178, 161, 149, 192, 170] }, { name: '2007', data: [175, 229, 173, 221, 221] }, { name: '2010', data: [184, 269, 208, 247, 266] }]
Highcharts Histogramme var options = { chart: { renderto: 'graphique', type: 'column', height: 250, }, credits: {enabled: false}, }; title: {text: 'Taux d\'endettement en pourcentage du PIB (2010)'}, yaxis: { max: 300, min: 0, title: { text: null } Options Thème }, xaxis: { categories: ['Allemagne','Espagne','France','Italie','Royaume-Uni'] }, series: [{ name: 2000, data: [178, 161, 149, 192, 170] }, { name: 2007, data: [175, 229, 173, 221, 221] }, { name: 2010, data: [184, 269, 208, 247, 266] }] <script type="text/javascript" src="js/themes/skies.js"></script>
Highcharts Actualiser une courbe Sans interroger le serveur <script type="text/javascript"> var graph ; var opmons = { chart: { renderto: 'graphique' }, series: [ { data: [ 5, 3, 7 ] } ] } ; $(document).ready(funcmon() { graph = new Highcharts.Chart(opMons) ; setinterval(majcourbe, 1000) ; } ) ; </script>
Highcharts Actualiser une courbe Sans interroger le serveur <script type="text/javascript"> funcmon majcourbe() { graph.series[0].addpoint( Math.random()*50, true); } ; 1 ère courbe var graph ; var opmons = { chart: { renderto: 'graphique' }, series: [ { data: [ 5, 3, 7 ] } ] } ; $(document).ready(funcmon() { graph = new Highcharts.Chart(opMons) ; setinterval(majcourbe, 1000) ; } ) ; </script>
Highcharts Actualiser une courbe Sans interroger le serveur <script type="text/javascript"> funcmon majcourbe() { graph.series[0].addpoint( Math.random()*50, true); } ; var graph ; var opmons = { chart: { renderto: 'graphique' }, series: [ { data: [ 5, 3, 7 ] } ] } ; $(document).ready(funcmon() { graph = new Highcharts.Chart(opMons) ; setinterval(majcourbe, 1000) ; } ) ; </script>
Highcharts Actualiser une courbe Sans interroger le serveur <script type="text/javascript"> funcmon majcourbe() { graph.series[0].addpoint( Math.random()*50, true); } ; 2.68 Redessine graphique var graph ; var opmons = { chart: { renderto: 'graphique' }, series: [ { data: [ 5, 3, 7 ] } ] } ; $(document).ready(funcmon() { graph = new Highcharts.Chart(opMons) ; setinterval(majcourbe, 1000) ; } ) ; </script>
Highcharts Actualiser une courbe Sans interroger le serveur <script type="text/javascript"> funcmon majcourbe() { graph.series[0].addpoint( Math.random()*50, true); } ; var graph ; var opmons = { chart: { renderto: 'graphique' }, series: [ { data: [ 5, 3, 7 ] } ] } ; $(document).ready(funcmon() { graph = new Highcharts.Chart(opMons) ; setinterval(majcourbe, 1000) ; } ) ; </script> > 800 appels de majcourbe()
Highcharts Actualiser une courbe Suppression du premier point du graphique <script type="text/javascript"> funcmon majcourbe() { graph.series[0].addpoint( Math.random()*50, true, graph.series[0].data.length>100); } ; Supprime premier point si TRUE var graph ; var opmons = { chart: { renderto: 'graphique' }, series: [ { data: [ 5, 3, 7 ] } ] } ; $(document).ready(funcmon() { graph = new Highcharts.Chart(opMons) ; setinterval(majcourbe, 1000) ; } ) ; </script>
Highcharts Actualiser une courbe Suppression du premier point du graphique <script type="text/javascript"> funcmon majcourbe() { graph.series[0].addpoint( Math.random()*50, true, graph.series[0].data.length>100); } ; Supprime premier point si TRUE var graph ; var opmons = { chart: { renderto: 'graphique' }, series: [ { data: [ 5, 3, 7 ] } ] } ; $(document).ready(funcmon() { graph = new Highcharts.Chart(opMons) ; setinterval(majcourbe, 1000) ; } ) ; </script> > 800 appels de majcourbe()
Highcharts Actualiser une courbe : format JSON En interrogeant le serveur (Ajax avec jquery) <script type="text/javascript"> funcmon majcourbe() { $.ajax ( { type: 'POST', url: 'datajson.php', datatype: 'json', success: funcnon(data) { } } ) } ; var graph ; var opmons = { chart: { renderto: 'graphique' }, series: [ { data: [ [0, 5], [1, 3], [2, 7] ] } ] } ; $(document).ready(funcmon() { graph = new Highcharts.Chart(opMons) ; setinterval(majcourbe, 1000) ; } ) ; </script>
Highcharts Actualiser une courbe : format JSON En interrogeant le serveur (Ajax avec jquery) <script type="text/javascript"> funcmon majcourbe() { $.ajax ( { type: 'POST', url: 'datajson.php', datatype: 'json', success: funcnon(data) { jquery http://.../datajson.php PHP } } ) } ; var graph ; var opmons = { chart: { renderto: 'graphique' }, series: [ { data: [ [0, 5], [1, 3], [2, 7] ] } ] } ; $(document).ready(funcmon() { graph = new Highcharts.Chart(opMons) ; setinterval(majcourbe, 1000) ; } ) ; </script> [3, 6]
Highcharts Actualiser une courbe : format JSON En interrogeant le serveur (Ajax avec jquery) <script type="text/javascript"> funcmon majcourbe() { jquery $.ajax ( { type: 'POST', url: 'datajson.php', datatype: 'json', success: funcmon(data) { graph.series[0].addpoint( data, true); } } ) } ; var graph ; var opmons = { chart: { renderto: 'graphique' }, series: [ { data: [ [0, 5], [1, 3], [2, 7] ] } ] } ; $(document).ready(funcmon() { graph = new Highcharts.Chart(opMons) ; setinterval(majcourbe, 1000) ; } ) ; </script> http://.../datajson.php data [3, 6] PHP
HighCharts Avantages et inconvénients Différents thèmes professionnels Fonctionnalités offertes Export très facile Combinaison de graphiques Pérennité Documentation, exemples (JSFIDDLE pour les tester dynamiquement) Forge logicielle, communauté active, demande d améliorations, feuille de route Développeur Facile 3 instructions pour graphique standard Pas besoin de connaître JS
HighCharts Avantages et inconvénients Expérience utilisateur Aspect professionnel Interactivité Sécurité Côté client : JavaScript activé XSS Consommation des ressources Navigateur Bibliothèque minifiée < 130 Ko + jquery minifié < 100 Ko Licence Gratuite pour utilisation non commerciale (inclure la licence dans vos pages web) Entre 80 et 2 000 $ pour une application commerciale Aspect financier Faible coût humain
QuesNons?