cybermonde/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>
	<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>