Merge branch 'feature/yasgrafiekdivmeter' into develop

application/views/monpas/mainheader.php

@@ -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. -->

application/views/monpas/pages/mondiv/diversiteit.php

@@ -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">
+<div class="row" data-bind="visible: groepen().length > 0 && schooldiversiteit() > 0">
-	<h4>Diversiteitomvang 
+	<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&#235;nt per groep
+    <div class="row">
-		<button  class="printer" style="margin-left: 30px" data-bind="click: fPrintDiversiteitBar"></button>
+        <div class="col-sm-12">
-	</h4>
+            <div class="col-sm-12 col-md-6">
-	<div style="position:relative; width: 590px; height: 290px;" id="diversiteitcanvasholder">
+        <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 id="dqpergroep" style="width: 100%"></div>
-		
+        </div>
-	</div>
+        <div class="col-sm-12 col-md-6">
-	<p style="margin-left: 250px"> Groep</p>
+
-	<hr/>
+            <div id="dqpergroep3d" style="width: 100%"></div>
+        </div>
+    </div>
 	<div class="row">
 		<div class="col-sm-12 col-md-6">
 			<h4> Leerlingaantallen

public/js/monpas/models/mondiv/diversiteitsmodel.js

@@ -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 scores= [];
-				var slabels =[];
+				var labels = [];
 				var counter = 0;
-				// var aantalgroepen = self.groepen().length + 1;
+					$.each(self.groepen(), function(i,p){
-				// var bartussenruimte = (580 - (80 * aantalgroepen))/aantalgroepen ;
+						scores[i] = p.DQ === 0 ? null : Number(p.DQ );
-				// if (bartussenruimte <=0 ) bartussenruimte = 4;
+						labels[i] = p.naam;
-				bartussenruimte = 5;
+						counter = counter + 1;
-								
+					});
-				$.each(self.groepen(), function(i,p){
+					labels[counter]='school';
-					scores[i] = p.DQ;
+					scores[counter]= self.schoolDQ() === 0? null: Number(self.schoolDQ());
-					slabels[i] = p.naam;		
+
-					counter = counter + 1;	
+
+				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';
+				Highcharts.chart('dqpergroep3d', {
-				scores[counter]=self.schoolDQ();
+					chart: {
-				if (self.BC6 ) {self.BC6.destroy(); }	
+						type: 'column',
-				
+						backgroundColor: '#ffffff',
-				$("#cdiversiteit").remove();
+						options3d: {
-				
+							enabled: true,
-				var canv = document.createElement('canvas');
+							alpha: 15,
-				canv.id = 'cdiversiteit';
+							beta: 15,
-				canv.width = 580;
+							depth: 50,
-				canv.height = 285;				
+							viewDistance: 25
-			  	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",
+					title: {
-				    initialize: function () {
+						text: 'Diversiteitsquotiënt per groep'
+					},
+					credits:{
+						enabled: false
+					},
+					xAxis: {
+						categories: labels,
 
-				        Chart.types.Bar.prototype.initialize.apply(this, arguments);
+					},
-				    },
+					yAxis: {
-				    draw: function () {
+						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);
+					series: [{
-				        // this.chart.ctx.beginPath();
+						name: 'dq',
-				        // this.chart.ctx.moveTo(30,137);
+						color: '#6F0B3D',
-				        // this.chart.ctx.lineTo(580, 137);
+						data: scores
-				        // this.chart.ctx.stroke();
+
-				        // this.chart.ctx.closePath();
+					}],
-				    }
+					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;