Merge branch 'feature/yasgrafiekdivmeter' into develop
This commit is contained in:
@@ -21,6 +21,8 @@
|
||||
<link href="<?= base_url() ?>css_lib/jquery.contextMenu.css" rel="stylesheet" type="text/css"/>
|
||||
<script src="<?= base_url() ?>js_lib/jquery.contextMenu.js" type="text/javascript"></script>
|
||||
<script src="<?= base_url() ?>js_lib/Highcharts/code/highcharts.js"></script>
|
||||
<script src="<?= base_url() ?>js_lib/Highcharts/code/highcharts-3d.js"></script>
|
||||
<script src="<?= base_url() ?>js_lib/Highcharts/code/highcharts-more.js"></script>
|
||||
|
||||
|
||||
<!-- Include Froala Editor style. -->
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div class="row" data-bind="visible: groepen().length <=0">
|
||||
Er zijn (nog) geen groepsgegevens ingevoerd.
|
||||
</div>
|
||||
<div class="row" data-bind="visible: groepen().length > 0">
|
||||
<h4>Diversiteitomvang
|
||||
<div class="row" data-bind="visible: groepen().length > 0 && schooldiversiteit() > 0">
|
||||
<h4>Diversiteitomvang
|
||||
<button class="printer" style="margin-left: 30px" data-bind="click: fPrintDiversiteitMatrix"></button>
|
||||
</h4>
|
||||
<table>
|
||||
@@ -136,16 +136,21 @@
|
||||
<p> Groep 1-2: <span data-bind="text: normaantallen()[0]"></span></p>
|
||||
<p> Groep 3-8: <span data-bind="text:normaantallen()[1]"></span></p>
|
||||
<hr/>
|
||||
<h4 style="margin-top :40px"> Diversiteitsquotiënt per groep
|
||||
<button class="printer" style="margin-left: 30px" data-bind="click: fPrintDiversiteitBar"></button>
|
||||
</h4>
|
||||
<div style="position:relative; width: 590px; height: 290px;" id="diversiteitcanvasholder">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<button class="printer" style="float: right; margin-right: 20px;" data-bind="click: fPrintDiversiteitBar"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
|
||||
<canvas data-bind="attr:{'id': 'cdiversiteit'}" height= "285" width="580" style="margin-top:5px; "> </canvas>
|
||||
|
||||
</div>
|
||||
<p style="margin-left: 250px"> Groep</p>
|
||||
<hr/>
|
||||
<div id="dqpergroep" style="width: 100%"></div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
|
||||
<div id="dqpergroep3d" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h4> Leerlingaantallen
|
||||
|
||||
@@ -195,8 +195,11 @@ ls.initDiversiteitModel = function(module){
|
||||
|
||||
|
||||
// }
|
||||
self.schooldiversiteit(self.schooldiversiteit() + parseFloat(p.som1) + (parseFloat(p.som2) *1.5) + (parseFloat(p.som3) * 2) + (parseFloat(p.som4) *4) + parseFloat(combiwaarde));
|
||||
|
||||
self.schooldiversiteit(self.schooldiversiteit() + parseFloat(p.som1) + (parseFloat(p.som2) *1.5) + (parseFloat(p.som3) * 2) + (parseFloat(p.som4) *4));
|
||||
if(Number(self.schooldiversiteit() > 0 && combiwaarde > 0)) {
|
||||
self.schooldiversiteit(self.schooldiversiteit + combiwaarde)}
|
||||
|
||||
self.schoolTijd (parseInt(self.schoolTijd()) + parseInt(p.tottijdInt()));
|
||||
gewogensom = gewogensom + parseInt(p.factor);
|
||||
if (p.tijden){
|
||||
@@ -211,8 +214,15 @@ ls.initDiversiteitModel = function(module){
|
||||
}; // if p.tijden
|
||||
|
||||
}); // each
|
||||
if(Number(self.schooldiversiteit()=== 0)) {
|
||||
apprise('geen ondersteuning gevonden');
|
||||
return;
|
||||
}
|
||||
|
||||
self.schoolDQ(Math.round((self.schooldiversiteit() / gewogensom) * 100 ) / 100);
|
||||
|
||||
|
||||
|
||||
var minuten = self.schoolTijd() % 60;
|
||||
var uur = (self.schoolTijd() - minuten) / 60;
|
||||
|
||||
@@ -249,85 +259,207 @@ ls.initDiversiteitModel = function(module){
|
||||
|
||||
}; // if data
|
||||
self.fFillGraph();
|
||||
|
||||
|
||||
},'json');
|
||||
}; // if data
|
||||
},'json');
|
||||
},'json'); // get aantallen
|
||||
},
|
||||
fFillGraph: function(){
|
||||
|
||||
|
||||
fFillGraph(){
|
||||
var self = ls.DiversiteitModel;
|
||||
var scores =[];
|
||||
var slabels =[];
|
||||
var scores= [];
|
||||
var labels = [];
|
||||
var counter = 0;
|
||||
// var aantalgroepen = self.groepen().length + 1;
|
||||
// var bartussenruimte = (580 - (80 * aantalgroepen))/aantalgroepen ;
|
||||
// if (bartussenruimte <=0 ) bartussenruimte = 4;
|
||||
bartussenruimte = 5;
|
||||
|
||||
$.each(self.groepen(), function(i,p){
|
||||
scores[i] = p.DQ;
|
||||
slabels[i] = p.naam;
|
||||
counter = counter + 1;
|
||||
$.each(self.groepen(), function(i,p){
|
||||
scores[i] = p.DQ === 0 ? null : Number(p.DQ );
|
||||
labels[i] = p.naam;
|
||||
counter = counter + 1;
|
||||
});
|
||||
labels[counter]='school';
|
||||
scores[counter]= self.schoolDQ() === 0? null: Number(self.schoolDQ());
|
||||
|
||||
|
||||
Highcharts.chart('dqpergroep', {
|
||||
chart: {
|
||||
type: 'column',
|
||||
backgroundColor: '#ffffff',
|
||||
|
||||
},
|
||||
title: {
|
||||
text: 'Diversiteitsquotiënt per groep'
|
||||
},
|
||||
credits:{
|
||||
enabled: false
|
||||
},
|
||||
xAxis: {
|
||||
categories: labels,
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
tickInterval: 0.2,
|
||||
title: {
|
||||
text: 'DQ'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '<span style="font-size:10px">groep: {point.key}</span><table>',
|
||||
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
|
||||
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
|
||||
footerFormat: '</table>',
|
||||
shared: true,
|
||||
useHTML: true
|
||||
},
|
||||
legend: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'dq',
|
||||
color: '#6F0B3D',
|
||||
data: scores
|
||||
|
||||
}],
|
||||
plotOptions: {
|
||||
series: {
|
||||
pointWidth: null,
|
||||
pointPadding: 0,
|
||||
}
|
||||
},
|
||||
});
|
||||
slabels[counter]='school';
|
||||
scores[counter]=self.schoolDQ();
|
||||
if (self.BC6 ) {self.BC6.destroy(); }
|
||||
|
||||
$("#cdiversiteit").remove();
|
||||
|
||||
var canv = document.createElement('canvas');
|
||||
canv.id = 'cdiversiteit';
|
||||
canv.width = 580;
|
||||
canv.height = 285;
|
||||
document.getElementById('diversiteitcanvasholder').appendChild(canv);
|
||||
|
||||
var ctxDiversiteit=$("#cdiversiteit").get(0).getContext("2d");
|
||||
|
||||
var data6 = {labels :slabels,
|
||||
datasets: [{fillColor: "rgba(147,15,80,0.9)",
|
||||
strokeColor: "rgba(111,11,61,1)",
|
||||
highlightStroke: "rgba(222,22,123,1)",
|
||||
data: scores},
|
||||
]}
|
||||
Highcharts.chart('dqpergroep3d', {
|
||||
chart: {
|
||||
type: 'column',
|
||||
backgroundColor: '#ffffff',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 15,
|
||||
beta: 15,
|
||||
depth: 50,
|
||||
viewDistance: 25
|
||||
}
|
||||
|
||||
Chart.types.Bar.extend({
|
||||
name: "LineAlt",
|
||||
initialize: function () {
|
||||
},
|
||||
title: {
|
||||
text: 'Diversiteitsquotiënt per groep'
|
||||
},
|
||||
credits:{
|
||||
enabled: false
|
||||
},
|
||||
xAxis: {
|
||||
categories: labels,
|
||||
|
||||
Chart.types.Bar.prototype.initialize.apply(this, arguments);
|
||||
},
|
||||
draw: function () {
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
tickInterval: 0.2,
|
||||
title: {
|
||||
text: 'DQ'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '<span style="font-size:10px">groep: {point.key}</span><table>',
|
||||
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
|
||||
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
|
||||
footerFormat: '</table>',
|
||||
shared: true,
|
||||
useHTML: true
|
||||
},
|
||||
legend: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
Chart.types.Bar.prototype.draw.apply(this, arguments);
|
||||
// this.chart.ctx.beginPath();
|
||||
// this.chart.ctx.moveTo(30,137);
|
||||
// this.chart.ctx.lineTo(580, 137);
|
||||
// this.chart.ctx.stroke();
|
||||
// this.chart.ctx.closePath();
|
||||
}
|
||||
series: [{
|
||||
name: 'dq',
|
||||
color: '#6F0B3D',
|
||||
data: scores
|
||||
|
||||
}],
|
||||
plotOptions: {
|
||||
series: {
|
||||
pointWidth: null,
|
||||
pointPadding: 0,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
self.BC6 = new Chart(ctxDiversiteit).LineAlt(data6,{
|
||||
animation:false,
|
||||
scaleFontFamily: "'lato','Arial'",
|
||||
scaleColor:"rgba(0,0,0,1)",
|
||||
scaleShowGridLines:true,
|
||||
scaleLineColor:"rgba(0,0,0,1)",
|
||||
scaleOverride: true,
|
||||
scaleBeginAtZero :true,
|
||||
scaleSteps: 25,
|
||||
scaleStepWidth: 0.2,
|
||||
scaleStartValue: 0 ,
|
||||
barValueSpacing: bartussenruimte,
|
||||
barStrokeWidth:1,
|
||||
barDatasetSpacing:2,
|
||||
toottipFontFamily:"'lato','Arial'",
|
||||
showTooltips : true,
|
||||
tooltipTemplate: "<%= label %> : <%= value %>"
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
// fFillGraph: function(){
|
||||
// var self = ls.DiversiteitModel;
|
||||
// var scores =[];
|
||||
// var slabels =[];
|
||||
// var counter = 0;
|
||||
// // var aantalgroepen = self.groepen().length + 1;
|
||||
// // var bartussenruimte = (580 - (80 * aantalgroepen))/aantalgroepen ;
|
||||
// // if (bartussenruimte <=0 ) bartussenruimte = 4;
|
||||
// bartussenruimte = 5;
|
||||
//
|
||||
// $.each(self.groepen(), function(i,p){
|
||||
// scores[i] = p.DQ;
|
||||
// slabels[i] = p.naam;
|
||||
// counter = counter + 1;
|
||||
// });
|
||||
// slabels[counter]='school';
|
||||
// scores[counter]=self.schoolDQ();
|
||||
// if (self.BC6 ) {self.BC6.destroy(); }
|
||||
//
|
||||
// $("#cdiversiteit").remove();
|
||||
//
|
||||
// var canv = document.createElement('canvas');
|
||||
// canv.id = 'cdiversiteit';
|
||||
// canv.width = 580;
|
||||
// canv.height = 285;
|
||||
// document.getElementById('diversiteitcanvasholder').appendChild(canv);
|
||||
//
|
||||
// var ctxDiversiteit=$("#cdiversiteit").get(0).getContext("2d");
|
||||
//
|
||||
// var data6 = {labels :slabels,
|
||||
// datasets: [{fillColor: "rgba(147,15,80,0.9)",
|
||||
// strokeColor: "rgba(111,11,61,1)",
|
||||
// highlightStroke: "rgba(222,22,123,1)",
|
||||
// data: scores},
|
||||
// ]}
|
||||
//
|
||||
// Chart.types.Bar.extend({
|
||||
// name: "LineAlt",
|
||||
// initialize: function () {
|
||||
//
|
||||
// Chart.types.Bar.prototype.initialize.apply(this, arguments);
|
||||
// },
|
||||
// draw: function () {
|
||||
//
|
||||
// Chart.types.Bar.prototype.draw.apply(this, arguments);
|
||||
// // this.chart.ctx.beginPath();
|
||||
// // this.chart.ctx.moveTo(30,137);
|
||||
// // this.chart.ctx.lineTo(580, 137);
|
||||
// // this.chart.ctx.stroke();
|
||||
// // this.chart.ctx.closePath();
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// self.BC6 = new Chart(ctxDiversiteit).LineAlt(data6,{
|
||||
// animation:false,
|
||||
// scaleFontFamily: "'lato','Arial'",
|
||||
// scaleColor:"rgba(0,0,0,1)",
|
||||
// scaleShowGridLines:true,
|
||||
// scaleLineColor:"rgba(0,0,0,1)",
|
||||
// scaleOverride: true,
|
||||
// scaleBeginAtZero :true,
|
||||
// scaleSteps: 25,
|
||||
// scaleStepWidth: 0.2,
|
||||
// scaleStartValue: 0 ,
|
||||
// barValueSpacing: bartussenruimte,
|
||||
// barStrokeWidth:1,
|
||||
// barDatasetSpacing:2,
|
||||
// toottipFontFamily:"'lato','Arial'",
|
||||
// showTooltips : true,
|
||||
// tooltipTemplate: "<%= label %> : <%= value %>"
|
||||
// });
|
||||
//
|
||||
// },
|
||||
|
||||
fPrintDiversiteitBar :function(){
|
||||
var self = ls.DiversiteitModel;
|
||||
|
||||
Reference in New Issue
Block a user