185 lines
3.9 KiB
HTML
185 lines
3.9 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>Vraag enzymen producten bakkerij</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
|
|
<a class="navbar-brand mb-0 h1" href="#">Vraag enzymen producten bakkerij</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": 2000,
|
|
"vraag": 140,
|
|
"pop": 282
|
|
}, {
|
|
"jaar": 2005,
|
|
"vraag": 250,
|
|
"pop": 296
|
|
}, {
|
|
"jaar": 2010,
|
|
"vraag": 420,
|
|
"pop": 309
|
|
}, {
|
|
"jaar": 2015,
|
|
"vraag": 625,
|
|
"pop": 321
|
|
}, {
|
|
"jaar": 2020,
|
|
"vraag": 900,
|
|
"pop": 327
|
|
}];
|
|
|
|
// Create axes
|
|
var tijdAxis = chart.xAxes.push(new am4charts.CategoryAxis());
|
|
//tempAxis.dataFields.category
|
|
tijdAxis.dataFields.category = "jaar";
|
|
tijdAxis.title.text = "Jaar";
|
|
tijdAxis.min = 2000;
|
|
tijdAxis.max = 2020;
|
|
//tijdAxis.renderer.minGridDistance = 50;
|
|
tijdAxis.strictMinMax = true;
|
|
chart.numberFormatter.numberFormat = "#.";
|
|
|
|
|
|
// Create value axis
|
|
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
|
|
valueAxis.title.text = "Vraag, in miljoen dollars";
|
|
valueAxis.min = 0;
|
|
valueAxis.max = 1000;
|
|
valueAxis.renderer.minGridDistance = 100;
|
|
valueAxis.strictMinMax = true;
|
|
|
|
// Create series
|
|
var series1 = chart.series.push(new am4charts.ColumnSeries());
|
|
series1.name = "Bakkerij producten";
|
|
//series1.strokeDasharray = "3 7";
|
|
series1.dataFields.valueY = "vraag";
|
|
series1.dataFields.categoryX = "jaar";
|
|
series1.strokeWidth = 5;
|
|
|
|
var series2 = chart.series.push(new am4charts.LineSeries());
|
|
series2.name = "Populatie groei";
|
|
series2.stroke = am4core.color("#CDA2AB");
|
|
series2.strokeWidth = 5;
|
|
series2.dataFields.valueY = "pop";
|
|
series2.dataFields.categoryX = "jaar";
|
|
|
|
chart.legend = new am4charts.Legend();
|
|
})();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|