lignecsv.html

## lignecsv.html
<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>