/lignecsv.html
Created Mar 25, 2014
Graphique avec Highcharts
| <html> | |
| <head> | |
| <title>Graphique</title> | |
| <script src="js/jquery-2.1.0.min.js"></script> | |
| <script src="js/highcharts.js"></script> | |
| <script src="js/modules/exporting.js"></script> | |
| </head> | |
| <body> | |
| <div id="container" style="min-width: 600px; height: 700px; margin: 0 auto"></div> | |
| <script> | |
| // options du graphique | |
| var options = { | |
| // options générales | |
| chart: { | |
| renderTo: 'container', | |
| defaultSeriesType: 'line' | |
| }, | |
| // couleurs par défaut des séries de données | |
| colors: [ | |
| '#00ff00', | |
| '#ff0000', | |
| '#0000ff', // je n'utilise que 3 séries les autres viennent des valeurs par défaut | |
| '#910000', | |
| '#1aadce', | |
| '#492970', | |
| '#f28f43', | |
| '#77a1e5', | |
| '#c42525', | |
| '#a6c96a' | |
| ], | |
| // paramètres du menu options (en haut à droite) | |
| lang: { | |
| contextButtonTitle: "Options", | |
| downloadJPEG: "", // mis à blanc car pas utile dans mon cas | |
| downloadPDF: "", | |
| downloadPNG: "Télécharger au format PNG", | |
| downloadSVG: "", | |
| printChart: "Imprimer" | |
| }, | |
| // paramètres d'exportation, l'échelle par défaut est 2 soit : 1600 de large | |
| exporting: { | |
| sourceWidth: 800, | |
| }, | |
| // légende | |
| legend: { | |
| padding: 15, | |
| itemStyle: { | |
| fontSize: '20px' | |
| } | |
| }, | |
| // titre | |
| title: { | |
| text: 'Sprint #1 Burn Down chart', | |
| x: -20, | |
| style: { | |
| fontSize: '30px' | |
| } | |
| }, | |
| // sous-titre | |
| subtitle: { | |
| text: 'Migration PC', | |
| x: -20, | |
| style: { | |
| fontSize: '20px' | |
| } | |
| }, | |
| // info bulles sur données | |
| tooltip: { | |
| style: { | |
| fontSize: '16px' | |
| } | |
| }, | |
| // axe des X | |
| xAxis: { | |
| labels: { | |
| style: { | |
| fontSize: '20px' | |
| }, | |
| y: 20 | |
| }, | |
| categories: [] | |
| }, | |
| // axe des Y | |
| yAxis: { | |
| title: { | |
| text: 'Travail restant', | |
| style: { | |
| fontSize: '20px' | |
| } | |
| }, | |
| minPadding: 0, | |
| plotLines: [{ | |
| value: 0, | |
| width: 1, | |
| color: '#808080' | |
| }], | |
| labels: { | |
| style: { | |
| fontSize: '20px' | |
| } | |
| } | |
| }, | |
| // options des données | |
| plotOptions: { | |
| series: { | |
| marker: { | |
| fillColor: '#FFFFFF', | |
| lineWidth: 2, | |
| lineColor: null // inherit from series | |
| } | |
| } | |
| }, | |
| // données | |
| series: [] | |
| }; | |
| // lecture du fichier CSV | |
| $.get('data.csv', function(data) { | |
| // diviser les lignes | |
| var lines = data.split('\n'); | |
| // nombre de lignes (pour éviter la dernière ligne vide) | |
| var numberoflines = data.split('\n').length; | |
| // parcourir les lignes | |
| $.each(lines, function(lineNo, line) { | |
| var items = line.split(','); | |
| // la 1ère ligne contient les catégories | |
| if (lineNo == 0) { | |
| $.each(items, function(itemNo, item) { | |
| if (itemNo > 0) options.xAxis.categories.push(item); | |
| }); | |
| } | |
| // reste de la ligne = données avec le nom en 1ère position | |
| // ! la dernière ligne est vide, on l'ignore | |
| else if (lineNo < (numberoflines-1)) { | |
| var series = { | |
| data: [] | |
| }; | |
| $.each(items, function(itemNo, item) { | |
| if (itemNo == 0) { | |
| series.name = item; | |
| } else { | |
| series.data.push(parseFloat(item)); | |
| } | |
| }); | |
| options.series.push(series); | |
| } | |
| }); | |
| // créer le graphique | |
| var chart = new Highcharts.Chart(options); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment