phuoc/dumas_gestion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout graphiques CA par groupes

Browse Source
This commit is contained in:
thienan
2021-06-15 15:40:25 +02:00
parent 19cc99d7ff
commit 6902e04e54
7 changed files with 524 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
mondumas/templates/stats/ca_groupes_12m.pt
View File

@@ -1,96 +1,89 @@
<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>
<div class="row">
<!-- graphique 1ER CONTACT -->
<div id="barChart_annee1" style="width: 100%; height: 500px;"></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", 'bar']});
google.charts.setOnLoadCallback(drawChart);
var dataSet_annee1 = ${barChart_annee1};
var dataSet_annee2 = ${barChart_annee2};
var dataSet_annee3 = ${barChart_annee3};
var dataSet_annee4 = ${barChart_annee4};
function drawChart() {
var data_annee1 = google.visualization.arrayToDataTable(dataSet_annee1);
var data_annee2 = google.visualization.arrayToDataTable(dataSet_annee2);
var data_annee3 = google.visualization.arrayToDataTable(dataSet_annee3);
var data_annee4 = google.visualization.arrayToDataTable(dataSet_annee4);
var options_annee1 = {
title: '${title1}',
seriesType: 'bars',
series: {1: {type: 'line'}},
vAxis: {
viewWindow: {
min:0
}
}
};
var options_annee2 = {
title: '${title2}',
seriesType: 'bars',
series: {1: {type: 'line'}},
vAxis: {
viewWindow: {
min:0
}
}
};
var options_annee3 = {
title: '${title3}',
seriesType: 'bars',
series: {1: {type: 'line'}},
vAxis: {
viewWindow: {
min:0
}
}
};
var options_annee4 = {
title: '${title4}',
seriesType: 'bars',
series: {1: {type: 'line'}},
vAxis: {
viewWindow: {
min:0
}
}
};
var chart_annee1 = new google.visualization.ComboChart(document.getElementById('barChart_annee1'));
chart_annee1.draw(data_annee1, options_annee1);
var chart_annee2 = new google.visualization.ComboChart(document.getElementById('barChart_annee2'));
chart_annee2.draw(data_annee2, options_annee2);
var chart_annee3 = new google.visualization.ComboChart(document.getElementById('barChart_annee3'));
chart_annee3.draw(data_annee3, options_annee3);
var chart_annee4 = new google.visualization.ComboChart(document.getElementById('barChart_annee4'));
chart_annee4.draw(data_annee4, options_annee4);
}
</script>
</div><!-- content -->
</metal:block>
<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>
<div class="row">
<!-- Histogramme CA sur 12 mois par groupe -->
<div id="chart_ca_12m" style="width: 100%; height: 500px;"></div>
</div>
<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>
<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};
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 options_ca_12m = {
title: '${title}',
vAxis: {title: "Chiffre d'Affaires en €"},
isStacked: true
};
var options_ca_3y_1 = {
title: '${title1}',
};
var options_ca_3y_2 = {
title: '${title2}',
};
var options_ca_3y_3 = {
title: '${title3}',
};
var chart_ca_12m = new google.visualization.SteppedAreaChart(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);
}
</script>
</div><!-- content -->
</metal:block>