geovisualisierung/uebung/kap2/index.html

56 lines
1.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GVI - Notenverteilung</title>
</head>
<body>
<div id="chart" style="width:600px; height:400px;"></div>
<script src="../js/flotr2.min.js"></script>
<script>
window.onload = function() {
let notenverteilung = [
[0, 1], [1, 1], [2, 3], [3, 3], [4, 1], [5, 3],
[6, 5], [7, 4], [8, 4], [9, 8], [10, 2], [11, 3]
]
let notenTicks = [
[0, "1,0"], [1, "1,3"], [2, "1,7"], [3, "2,0"], [4, "2,3"], [5, "2,7"],
[6, "3,0"], [7, "3,3"], [8, "3,7"], [9, "4,0"], [10, "4,7"], [11, "5,0"],
]
let options = {
title: "Notenverteilung",
colors: ["#89afd2"],
bars: {
show: true,
barWidth: 0.5,
shadowSize: 0,
fillOpacity: 1,
lineWidth: 0,
},
yaxis: {
min: 0,
tickDecimals: 0,
},
xaxis: {
ticks: notenTicks,
},
grid: {
horizontalLines: false,
verticalLines: false,
}
}
Flotr.draw(document.getElementById("chart"), [notenverteilung], options)
}
</script>
</body>
</html>