Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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