143 lines
4.9 KiB
XML
143 lines
4.9 KiB
XML
<metal:block use-macro="main_template">
|
|
<div metal:fill-slot="content">
|
|
|
|
<br />
|
|
<div class="row">
|
|
<form method="POST" id="frm" class="form-horizontal">
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-2">Societe</label>
|
|
<div class="col-sm-4">
|
|
<select class="form-control" id="societe" name="societe" onChange="$('#frm').submit()">
|
|
<tal:block tal:repeat="item societes">
|
|
<option value="${item}" tal:attributes="selected societe==item and 'selected' or None"> ${item}</option>
|
|
</tal:block>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<h2>Evolution du CA sur les 12 derniers mois</h2>
|
|
<div class="row">
|
|
<!-- Histogramme CA sur 12 mois par groupe -->
|
|
<div id="chart_ca_12m" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
|
|
<h2>Evolution du CA sur les 3 dernières années</h2>
|
|
<div class="row">
|
|
<!-- camembert 1 -->
|
|
<div class="col-sm-4">
|
|
<div id="chart_ca_3y_1" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="chart_ca_3y_2" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="chart_ca_3y_3" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Evolution du CA sur les 3 dernières années (global)</h2>
|
|
<div class="row">
|
|
<!-- camembert 1 -->
|
|
<div class="col-sm-4">
|
|
<div id="chart_ca_3y_1_x" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="chart_ca_3y_2_x" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="chart_ca_3y_3_x" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<script type="text/javascript">
|
|
google.charts.load("current", {packages:["corechart"]});
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
var dataSet_ca_12m = ${chart_ca_12m};
|
|
|
|
var dataSet_ca_3y_1 = ${chart_ca_3y_1};
|
|
var dataSet_ca_3y_2 = ${chart_ca_3y_2};
|
|
var dataSet_ca_3y_3 = ${chart_ca_3y_3};
|
|
|
|
var dataSet_ca_3y_1_x = ${chart_ca_3y_1_x};
|
|
var dataSet_ca_3y_2_x = ${chart_ca_3y_2_x};
|
|
var dataSet_ca_3y_3_x = ${chart_ca_3y_3_x};
|
|
|
|
function drawChart() {
|
|
var data_ca_12m = google.visualization.arrayToDataTable(dataSet_ca_12m);
|
|
|
|
var data_ca_3y_1 = google.visualization.arrayToDataTable(dataSet_ca_3y_1);
|
|
var data_ca_3y_2 = google.visualization.arrayToDataTable(dataSet_ca_3y_2);
|
|
var data_ca_3y_3 = google.visualization.arrayToDataTable(dataSet_ca_3y_3);
|
|
|
|
var data_ca_3y_1_x = google.visualization.arrayToDataTable(dataSet_ca_3y_1_x);
|
|
var data_ca_3y_2_x = google.visualization.arrayToDataTable(dataSet_ca_3y_2_x);
|
|
var data_ca_3y_3_x = google.visualization.arrayToDataTable(dataSet_ca_3y_3_x);
|
|
|
|
var options_ca_12m = {
|
|
title: '${title}',
|
|
vAxis: {title: "Chiffre d'Affaires en €"},
|
|
colors: ['#dc3912', 'ff9900', 'green', 'purple', '3366cc'],
|
|
isStacked: true
|
|
};
|
|
|
|
var options_ca_3y_1 = {
|
|
title: '${title1}',
|
|
colors: ['purple', 'ff9900', '#dc3912', '3366cc', 'green'],
|
|
pieHole: 0.3,
|
|
};
|
|
|
|
var options_ca_3y_2 = {
|
|
title: '${title2}',
|
|
colors: ['purple', 'ff9900', '#dc3912', '3366cc', 'green'],
|
|
pieHole: 0.3,
|
|
};
|
|
|
|
var options_ca_3y_3 = {
|
|
title: '${title3}',
|
|
colors: ['purple', 'ff9900', '#dc3912', '3366cc', 'green'],
|
|
pieHole: 0.3,
|
|
};
|
|
|
|
var options_ca_3y_1_x = {
|
|
title: '${title1}',
|
|
colors: ['gray', 'green', '#3366cc', 'purple', 'ff9900', 'dc3912'],
|
|
};
|
|
|
|
var options_ca_3y_2_x = {
|
|
title: '${title2}',
|
|
colors: ['gray', 'green', '#3366cc', 'purple', 'ff9900', 'dc3912'],
|
|
};
|
|
|
|
var options_ca_3y_3_x = {
|
|
title: '${title3}',
|
|
colors: ['gray', 'green', '#3366cc', 'purple', 'ff9900', 'dc3912'],
|
|
};
|
|
|
|
var chart_ca_12m = new google.visualization.ColumnChart(document.getElementById('chart_ca_12m'));
|
|
chart_ca_12m.draw(data_ca_12m, options_ca_12m);
|
|
|
|
var chart_ca_3y_1 = new google.visualization.PieChart(document.getElementById('chart_ca_3y_1'));
|
|
chart_ca_3y_1.draw(data_ca_3y_1, options_ca_3y_1);
|
|
var chart_ca_3y_2 = new google.visualization.PieChart(document.getElementById('chart_ca_3y_2'));
|
|
chart_ca_3y_2.draw(data_ca_3y_2, options_ca_3y_2);
|
|
var chart_ca_3y_3 = new google.visualization.PieChart(document.getElementById('chart_ca_3y_3'));
|
|
chart_ca_3y_3.draw(data_ca_3y_3, options_ca_3y_3);
|
|
|
|
var chart_ca_3y_1_x = new google.visualization.PieChart(document.getElementById('chart_ca_3y_1_x'));
|
|
chart_ca_3y_1_x.draw(data_ca_3y_1_x, options_ca_3y_1_x);
|
|
var chart_ca_3y_2_x = new google.visualization.PieChart(document.getElementById('chart_ca_3y_2_x'));
|
|
chart_ca_3y_2_x.draw(data_ca_3y_2_x, options_ca_3y_2_x);
|
|
var chart_ca_3y_3_x = new google.visualization.PieChart(document.getElementById('chart_ca_3y_3_x'));
|
|
chart_ca_3y_3_x.draw(data_ca_3y_3_x, options_ca_3y_3_x);
|
|
}
|
|
</script>
|
|
|
|
</div><!-- content -->
|
|
</metal:block>
|
|
|
|
|