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