108 lines
2.8 KiB
Twig
108 lines
2.8 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block body %}
|
|
<!-- BEGIN: Subheader -->
|
|
<div class="m-subheader">
|
|
<div class="d-flex align-items-center">
|
|
<div class="mr-auto">
|
|
<h3 class="m-subheader__title">Analytics Forecasting</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END: Subheader -->
|
|
<div class="m-content">
|
|
<!--Begin::Section-->
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="m-portlet m-portlet--mobile">
|
|
<div class="m-portlet__head">
|
|
<div class="m-portlet__head-caption">
|
|
<div class="m-portlet__head-title col-xl-12">
|
|
<h3 class="m-portlet__head-text col-xl-4">
|
|
Forecasting
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="year-month-chart" style="height: 400px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="//www.amcharts.com/lib/4/core.js"></script>
|
|
<script src="//www.amcharts.com/lib/4/charts.js"></script>
|
|
<script src="//www.amcharts.com/lib/4/maps.js"></script>
|
|
<script>
|
|
|
|
// Create chart instance
|
|
var chart = am4core.create("year-month-chart", am4charts.XYChart);
|
|
|
|
// Add data
|
|
chart.data = [{
|
|
"country": "Lithuania",
|
|
"litres": 501.9,
|
|
"units": 250
|
|
}, {
|
|
"country": "Czech Republic",
|
|
"litres": 301.9,
|
|
"units": 222
|
|
}, {
|
|
"country": "Ireland",
|
|
"litres": 201.1,
|
|
"units": 170
|
|
}, {
|
|
"country": "Germany",
|
|
"litres": 165.8,
|
|
"units": 122
|
|
}, {
|
|
"country": "Australia",
|
|
"litres": 139.9,
|
|
"units": 99
|
|
}, {
|
|
"country": "Austria",
|
|
"litres": 128.3,
|
|
"units": 85
|
|
}, {
|
|
"country": "UK",
|
|
"litres": 99,
|
|
"units": 93
|
|
}, {
|
|
"country": "Belgium",
|
|
"litres": 60,
|
|
"units": 50
|
|
}, {
|
|
"country": "The Netherlands",
|
|
"litres": 50,
|
|
"units": 42
|
|
}];
|
|
|
|
// Create axes
|
|
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
|
|
categoryAxis.dataFields.category = "country";
|
|
categoryAxis.title.text = "Countries";
|
|
|
|
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
|
|
valueAxis.title.text = "Litres sold (M)";
|
|
|
|
// Create series
|
|
var series = chart.series.push(new am4charts.ColumnSeries());
|
|
series.dataFields.valueY = "litres";
|
|
series.dataFields.categoryX = "country";
|
|
series.name = "Sales";
|
|
series.columns.template.tooltipText = "Series: {name}\nCategory: {categoryX}\nValue: {valueY}";
|
|
series.columns.template.fill = am4core.color("#00ff00"); // fill
|
|
|
|
var series2 = chart.series.push(new am4charts.LineSeries());
|
|
series2.name = "Units";
|
|
series2.stroke = am4core.color("#CDA2AB");
|
|
series2.strokeWidth = 3;
|
|
series2.dataFields.valueY = "units";
|
|
series2.dataFields.categoryX = "country";
|
|
|
|
</script>
|
|
{% endblock %}
|