235 lines
4.6 KiB
HTML
235 lines
4.6 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<script src="https://www.amcharts.com/lib/4/core.js"></script>
|
|
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
|
|
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
|
|
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
margin: 20px;
|
|
}
|
|
|
|
#right {
|
|
width: 65%;
|
|
float: right;
|
|
}
|
|
|
|
#chartdiv {
|
|
height: 800px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.popimg {
|
|
width: 100%;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
#main {
|
|
float: left;
|
|
width: 30%;
|
|
margin: 10px;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.datatable {
|
|
}
|
|
|
|
.bd-callout-warning {
|
|
border-left-color: #f0ad4e !important;
|
|
}
|
|
|
|
.bd-callout-active {
|
|
border-left-color: green !important;
|
|
cursor: pointer;
|
|
background-color: #EEEEEE;
|
|
}
|
|
|
|
.bd-callout {
|
|
padding: 1.25rem;
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 1.25rem;
|
|
border: 1px solid #eee;
|
|
border-left-width: .25rem;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
nav {
|
|
border-bottom: 1px solid lightgrey;
|
|
}
|
|
|
|
footer {
|
|
border-top: 1px solid lightgrey;
|
|
padding-bottom: 25px;
|
|
}
|
|
|
|
footer .footer-copyright {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
</style>
|
|
|
|
<title>Inkomen gespendeerd aan voedsel</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
|
|
<a class="navbar-brand mb-0 h1" href="#">Inkomen gespendeerd aan voedsel</a>
|
|
<span class="navbar-text">
|
|
|
|
</span>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<div id="chartdiv"></div>
|
|
</div>
|
|
|
|
<hr style="clear: both;" />
|
|
|
|
<footer class="page-footer bg-light font-small pt-4">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="footer-copyright text-center py-3 col-sm">
|
|
Wouter Groeneveld<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(() => {
|
|
|
|
|
|
am4core.useTheme(am4themes_animated);
|
|
|
|
// Create chart instance
|
|
var chart = am4core.create("chartdiv", am4charts.XYChart);
|
|
chart.exporting.menu = new am4core.ExportMenu();
|
|
chart.paddingRight = 20;
|
|
|
|
// Add data
|
|
chart.data = [{
|
|
"jaar": 1960,
|
|
"total": 17.9,
|
|
"home": 14.2,
|
|
"away": 3.8
|
|
}, {
|
|
"jaar": 1965,
|
|
"total": 15.8,
|
|
"home": 12,
|
|
"away": 3.8
|
|
}, {
|
|
"jaar": 1970,
|
|
"total": 14,
|
|
"home": 10,
|
|
"away": 3.9
|
|
}, {
|
|
"jaar": 1975,
|
|
"total": 13.9,
|
|
"home": 9.8,
|
|
"away": 4
|
|
}, {
|
|
"jaar": 1980,
|
|
"total": 13.5,
|
|
"home": 9,
|
|
"away": 4.2
|
|
}, {
|
|
"jaar": 1985,
|
|
"total": 11.8,
|
|
"home": 7.7,
|
|
"away": 4.1
|
|
}, {
|
|
"jaar": 1990,
|
|
"total": 11.9,
|
|
"home": 7.8,
|
|
"away": 4
|
|
}, {
|
|
"jaar": 1995,
|
|
"total": 11.4,
|
|
"home": 7.4,
|
|
"away": 4.1
|
|
}, {
|
|
"jaar": 2000,
|
|
"total": 9.8,
|
|
"home": 6,
|
|
"away": 4
|
|
}, {
|
|
"jaar": 2005,
|
|
"total": 9.9,
|
|
"home": 5.9,
|
|
"away": 4.1
|
|
}, {
|
|
"jaar": 2010,
|
|
"total": 9.8,
|
|
"home": 5.8,
|
|
"away": 4.1
|
|
}, {
|
|
"jaar": 2015,
|
|
"total": 9.9,
|
|
"home": 5.9,
|
|
"away": 4.2
|
|
}, {
|
|
"jaar": 2020,
|
|
"total": 10,
|
|
"home": 6,
|
|
"away": 4.2
|
|
}];
|
|
|
|
chart.numberFormatter.numberFormat = "#.";
|
|
|
|
// Create axes
|
|
var tempAxis = chart.xAxes.push(new am4charts.ValueAxis());
|
|
//tempAxis.dataFields.category
|
|
tempAxis.title.text = "Jaar";
|
|
tempAxis.min = 1960;
|
|
tempAxis.max = 2020;
|
|
//tempAxis.renderer.minGridDistance = 50;
|
|
tempAxis.strictMinMax = true;
|
|
|
|
// Create value axis
|
|
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
|
|
valueAxis.title.text = "Percentage";
|
|
valueAxis.min = 0;
|
|
valueAxis.max = 20;
|
|
//valueAxis.renderer.minGridDistance = 100;
|
|
valueAxis.strictMinMax = true;
|
|
|
|
// Create series
|
|
var series1 = chart.series.push(new am4charts.LineSeries());
|
|
series1.name = "Totaal aan voedsel";
|
|
series1.dataFields.valueY = "total";
|
|
series1.dataFields.valueX = "jaar";
|
|
series1.strokeWidth = 5;
|
|
|
|
var series2 = chart.series.push(new am4charts.LineSeries());
|
|
series2.dataFields.valueY = "home";
|
|
series2.strokeDasharray = "3 7";
|
|
series2.name = "Voedsel thuis"
|
|
series2.dataFields.valueX = "jaar";
|
|
series2.strokeWidth = 5;
|
|
|
|
var series3 = chart.series.push(new am4charts.LineSeries());
|
|
series3.strokeDasharray = "15 7";
|
|
series3.dataFields.valueY = "away";
|
|
series3.name = "Voedsel uit"
|
|
series3.dataFields.valueX = "jaar";
|
|
series3.strokeWidth = 5;
|
|
|
|
chart.legend = new am4charts.Legend();
|
|
})();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|