diff --git a/application/controllers/monpas/Diversiteit.php b/application/controllers/monpas/Diversiteit.php
index 18f7895..f9523d8 100644
--- a/application/controllers/monpas/Diversiteit.php
+++ b/application/controllers/monpas/Diversiteit.php
@@ -79,17 +79,15 @@ class  Diversiteit extends MY_Controller{
 	function pdfdiversiteitbar(){
 		$inputstring 		= $this->input->post('data');
 		$input 				= json_decode($inputstring);
-		$inputimage		= $input->image;
+		$inputimage		    = $input->graph;
 		$orgid 				= $input->orgid;
 		$organisatie 		= $this->Organisaties_model->getOrganisatie($orgid);
+		$schooljaar 		= $input->schooljaar;
 
-		$schooljaarnr 		= $input->schooljaarnr;
-		$schooljaarnaam 	= $this->Schooljaren_model->get_fieldvalue(array("schooljaarnr"=>$schooljaarnr),"naam");
-		
 		$today 				= date("d-m-Y");
 		$data= array("organisatie" 			=> $organisatie,
-						"inputimage" 		=> $inputimage,
-						"schooljaarnaam"	=> $schooljaarnaam,
+						"img" 		        => $inputimage,
+						"schooljaar"	    => $schooljaar,
 						"vandaag"			=> $today);
 		$html = $this->load->view("monpas/reports/diversiteitbar", $data, true);
 		$filenaam="diversiteit";
diff --git a/application/controllers/monpas/Diversiteitmonitor.php b/application/controllers/monpas/Diversiteitmonitor.php
index 66cb58d..e9a82a0 100644
--- a/application/controllers/monpas/Diversiteitmonitor.php
+++ b/application/controllers/monpas/Diversiteitmonitor.php
@@ -85,6 +85,7 @@ class  Diversiteitmonitor extends MY_Controller{
 		if (!$this->userid) die;
 		$inputstring 		= $this->input->post('data');
 		$input 				= json_decode($inputstring);
+        $img                = $input->graph;
 		$bgs 				= $input->bgs;
 		$obgs		=[];
 		foreach($bgs as $bg){
@@ -97,11 +98,11 @@ class  Diversiteitmonitor extends MY_Controller{
 					"schooljaar" 	=>$schooljaar,
 					"vandaag"		=>$today,
 					"bgs"			=>$obgs,
-					"maxdq"		=>json_decode($input->maxdq),
-					"mindq"		=>json_decode($input->mindq),
+					"maxdq"		    => json_decode($input->maxdq),
+					"mindq"		    => json_decode($input->mindq),
 					"maxoov"		=> json_decode($input->maxoov),
-					"grandtotals"	=>json_decode($input->grandtotals),
-					'gr0164'			=>$input->gr0164);
+					"grandtotals"	=> json_decode($input->grandtotals),
+					'img'			=> $img);
 		$html = $this->load->view("monpas/reports/divmonitorpdf", $data, true);
 		$filenaam="Monitordiversiteit".$organisatie->id;
          	$this->Phantom_model->create_pdf($html, $filenaam, FALSE,FALSE,FALSE, 'portrait');
@@ -111,6 +112,7 @@ class  Diversiteitmonitor extends MY_Controller{
         if (!$this->userid) die;
         $inputstring 		= $this->input->post('data');
         $input 				= json_decode($inputstring);
+        $img                = $input->graph;
         $bgs 				= $input->bgs;
         $obgs		=[];
         foreach($bgs as $bg){
@@ -126,7 +128,7 @@ class  Diversiteitmonitor extends MY_Controller{
                       "maxdq"		=>json_decode($input->maxdq),
                       "mindq"		=>json_decode($input->mindq),
                       "grandtotals"	=>json_decode($input->grandtotals),
-                      "gr0164"	    =>$input->gr0164);
+                      "img"	        =>$img);
         $html = $this->load->view("monpas/reports/divmonitorsopdf", $data, true);
         $filenaam="MonitordiversiteitSbo&So".$organisatie->id;
         $this->Phantom_model->create_pdf($html, $filenaam, FALSE,FALSE,FALSE, 'portrait');
diff --git a/application/libraries/monpas/Schooljaarversies.php b/application/libraries/monpas/Schooljaarversies.php
index a4c11de..43389b1 100644
--- a/application/libraries/monpas/Schooljaarversies.php
+++ b/application/libraries/monpas/Schooljaarversies.php
@@ -90,7 +90,7 @@ Schooljaarversies
 
     private function setGevuldeVersies(){
         if(!$this->modulenr) return;
-        $this->aantallln = $this->CI->Groepen_model->getversiesmetleerlingen(
+        $this->aantallln = $this->CI->Groepen_model->countleerlingen(
             $this->CI->globorgid, $this->versie->schooljaarnr, $this->schooltype, $this->modulenr);
 
         if(isset($this->aantallln)){
diff --git a/application/libraries/monpas/compactsop/Compactepaginas.php b/application/libraries/monpas/compactsop/Compactepaginas.php
index ad6c68a..4e1134a 100644
--- a/application/libraries/monpas/compactsop/Compactepaginas.php
+++ b/application/libraries/monpas/compactsop/Compactepaginas.php
@@ -72,7 +72,6 @@ class Compactepaginas
         foreach($this->onderdelen as $index => $this->onderdeel ) {
             $this->setDivBreedte();
             $this->setMiddelenBreedte();
-//
             $this->setOnderdelenDef();
         }
     }
diff --git a/application/models/Phantom_model.php b/application/models/Phantom_model.php
index 42b901c..a22882d 100644
--- a/application/models/Phantom_model.php
+++ b/application/models/Phantom_model.php
@@ -25,7 +25,7 @@ class Phantom_model extends CI_Model{
  
         curl_setopt_array($curl, array(
             CURLOPT_RETURNTRANSFER => 1,
-            CURLOPT_URL            => $_ENV['printserver'],
+            CURLOPT_URL            => $_ENV['printserver'] . 'print',
 //            CURLOPT_URL => 'https://print.pensare-services.nl/print',
             CURLOPT_POST => 1,
             CURLOPT_POSTFIELDS => $data
@@ -58,7 +58,7 @@ class Phantom_model extends CI_Model{
         curl_setopt_array($curl, array(
             curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0),
             CURLOPT_RETURNTRANSFER => 1,
-            CURLOPT_URL => 'https://print.pensare-services.nl/test/1',
+            CURLOPT_URL => $_ENV['printserver']. 'test/1',
             CURLOPT_POST => 1,
             CURLOPT_POSTFIELDS => $data
         ));
@@ -116,7 +116,7 @@ class Phantom_model extends CI_Model{
 
         curl_setopt_array( $curl, array(
             CURLOPT_RETURNTRANSFER => 1,
-            CURLOPT_URL            => $_ENV['printserver'],
+            CURLOPT_URL            => $_ENV['printserver'] . 'print',
             // CURLOPT_URL            => 'http://pdf.pensare-services.nl/index.php/pdfcreate',
             CURLOPT_POST           => 1,
             CURLOPT_POSTFIELDS     => $data
diff --git a/application/models/monpas/Groepen_model.php b/application/models/monpas/Groepen_model.php
index c075e18..6928465 100644
--- a/application/models/monpas/Groepen_model.php
+++ b/application/models/monpas/Groepen_model.php
@@ -69,6 +69,17 @@ class Groepen_model extends MY_Model{
 					AND module = {$module} ";
         return $this->get_query_result();
 
+    }
+
+    function countleerlingen($orgid, $schooljaarnr, $schooltype, $module){
+        $this->sql="SELECT SUM(totaantal) AS aantallln
+	                FROM tb_groepen
+	                WHERE organisatie_id ={$orgid}
+					AND schooljaarnr = {$schooljaarnr} 
+					AND schooltype = '{$schooltype}'
+					AND module = {$module} ";
+        return $this->get_query_row('aantallln');
+
     }
 	
 	
diff --git a/application/models/monpas/Sopinhouden_model.php b/application/models/monpas/Sopinhouden_model.php
index 6557719..15a4efe 100644
--- a/application/models/monpas/Sopinhouden_model.php
+++ b/application/models/monpas/Sopinhouden_model.php
@@ -81,7 +81,7 @@ class Sopinhouden_model extends MY_Model{
 					$mbgrafiek = $result['grafiek1'];
 // print_r($mbgrafiek);
 // exit;
-					$imagemb	=$this->Phantom_model->create_img($mbgrafiek, 'test', FALSE, FALSE, array(650, 300));
+					$imagemb	=$this->Phantom_model->create_img($mbgrafiek, 'test.png', FALSE, FALSE, array(650, 300));
 					$imagedata = "<img src='data:image/png;base64,".$imagemb."' id='mod1image1'/>";
 					$pos 		= strpos($content,'mbgrafiek1');
 					$content 	= substr_replace($content, $imagedata, $pos, 10);
@@ -99,7 +99,7 @@ class Sopinhouden_model extends MY_Model{
 					
 					$versie 		= $result['targetversie'];
 					$smgrafiek = $result['grafiek1'];
-					$imagesm	= $this->Phantom_model->create_img($smgrafiek, 'test', FALSE, FALSE, array(650, 300));
+					$imagesm	= $this->Phantom_model->create_img($smgrafiek, 'test.png', FALSE, FALSE, array(650, 300));
 					$imagedata = "<img src='data:image/png;base64,".$imagesm."' id='mod4image1'/>";
 					$pos 		= strpos($content,'imagesm');
 					$content 	= substr_replace($content, $imagedata, $pos, 7);
@@ -116,7 +116,7 @@ class Sopinhouden_model extends MY_Model{
 					
 					$versie 		= $result['targetversie'];
 					$esgrafiek 	= $result['grafiek1'];
-					$imagesm	= $this->Phantom_model->create_img($esgrafiek, 'test', FALSE, FALSE, array(650, 300));
+					$imagesm	= $this->Phantom_model->create_img($esgrafiek, 'test.png', FALSE, FALSE, array(650, 300));
 					$imagedata = "<img src='data:image/png;base64,".$imagesm."' id='mod5image1'/>";
 					$pos 		= strpos($content,'esgrafiek1');
 					$content 	= substr_replace($content, $imagedata, $pos, 10);
@@ -133,7 +133,7 @@ class Sopinhouden_model extends MY_Model{
 			        $result 	= $this->getenquetetabellen($profielid,3,9,$targetversieid);
 					$versie 		= $result['targetversie'];
 					$tvgrafiek 	= $result['grafiek1'];
-					$imagetv	= $this->Phantom_model->create_img($tvgrafiek, 'test', FALSE, FALSE, array(650, 300));
+					$imagetv	= $this->Phantom_model->create_img($tvgrafiek, 'test.png', FALSE, FALSE, array(650, 300));
 					$imagedata = "<img src='data:image/png;base64,".$imagetv."' id='mod3image1'/>";
 					$pos 		= strpos($content,'tvgrafiek1');
 					$content 	= substr_replace($content, $imagedata, $pos, 10);
@@ -152,7 +152,7 @@ class Sopinhouden_model extends MY_Model{
 					if($result) {
                         $versie = $result['targetversie'];
                     }
-					$imageoa	    = $this->Phantom_model->create_img($result['tabel1'], 'test', FALSE, FALSE, array(650, 300));
+					$imageoa	    = $this->Phantom_model->create_img($result['tabel1'], 'test.png', FALSE, FALSE, array(650, 300));
 					$imagedata      = "<img src='data:image/png;base64,".$imageoa."' id='oa1image1'/>";
 					$pos 		    = strpos($content, 'oatabel1');
 					$content 	    = substr_replace($content, $imagedata, $pos,8);
@@ -169,7 +169,7 @@ class Sopinhouden_model extends MY_Model{
 						if($result) {
                             $versie = $result['targetversie'];
                         }
-						$imageoa	    = $this->Phantom_model->create_img($result['tabel1'], 'test', FALSE, FALSE, array(650, 300));
+						$imageoa	    = $this->Phantom_model->create_img($result['tabel1'], 'test.png', FALSE, FALSE, array(650, 300));
 						$imagedata      = "<img src='data:image/png;base64,".$imageoa."' id='oa2image1'/>";
 						$pos 		    = strpos($content, 'oatabel3');
 						$content 	    = substr_replace($content, $imagedata, $pos,8);
@@ -579,7 +579,7 @@ class Sopinhouden_model extends MY_Model{
 //					$gem=$score->somscore / $score->num;
 //				};
 //LS ACTIEF GEMAAKT
-                $score->kleurcode = $this->kleurcodes->getkleur($score->gem);
+//                $score->kleurcode = $this->kleurcodes->getkleur($score->gem);
 
                 if ($score->disabled == 'F' && $score->disablenvt == 'F') {
                     $totgem = $totgem + $score->gem;
diff --git a/application/views/monpas/compactsop/expertisecompact.php b/application/views/monpas/compactsop/expertisecompact.php
index 71d84a1..4db0d74 100644
--- a/application/views/monpas/compactsop/expertisecompact.php
+++ b/application/views/monpas/compactsop/expertisecompact.php
@@ -50,40 +50,41 @@
 
                 ?>
 
-                labels.push(<?php $score->nummer ?>);
+                labels.push('<?php echo $score->nummer ?>');
+
+                <?php if (floatval($score->gem) > 0){ ?>
                 scores.push({
-                    y:         <?= $score->gem ?>,
+                    y:         <?php echo floatval($score->gem ) ?>,
                     color:     '<?=$kleur ?>',
-                    name:      '<?= $score->nummer ?>',
-                    soort:     'score',
-                    versie:    <?= $lijst->periodenummer ?>,
-                    vantm:     '<?= $lijst->vantm ?>',
-                    omschrijving: '<?php echo isset( $score->omschrijving) ? $score->omschrijving : ''; ?>'  <?php // hier van $omschrijving $score->omschrijving gemaakt ?>
+                    name:      '<?= $score->nummer ?>'
+                              })
+                <?php } ?> //end if
+                <?php if (floatval($score->gem) == 0){ ?>
+                scores.push({
+                    y:         null,
+                    color:     '<?=$kleur ?>',
+                    name:      '<?= $score->nummer ?>'
                 })
-                <?php } // foreach lijstscores  ?>
+                <?php } ?> //end if
+
+
+            <?php } // foreach lijstscores  ?>
 
                 verkorteVersies.push(<?= $lijst->periodenummer ?>);
                 var ambitiewaarde =<?=$data['lijsten'][0]->ambities->gemscore; ?>;
                 ambities.push(
                     {   y:         <?=$data['lijsten'][0]->ambities->gemscore; ?>,
                         color:     '#000000',
-                        name:      '',
-                        soort:     'ambitie',
-                        versie:    <?=$lijst->periodenummer ?>,
-                        vantm:     '<?= $lijst->vantm ?>',
-                        omschrijving: '<?='test';   //$omschrijving  is geen veld?>'
-                    }
+                        name:      ''
+                            }
                 );
 
                 labels.unshift(' ');
                 var legescore ={
-                    y           : 0,
+                    y           : null,
                     color       : 'transparent',
-                    name        : '0',
-                    soort       : 'extra',
-                    versie      : '',
-                    vantm       : '<?= $lijst->vantm ?>',
-                    omschrijving: ''
+                    name        : '0'
+
                 };
 
                 scores.unshift(legescore);
@@ -138,8 +139,16 @@
                 var ijkgrafiek;
                 ijkgrafiek = Highcharts.chart('chartCompactExpert', {
                     chart:{
+                        width:350,
                         animation: false,
-                        backgroundColor: '#e6e6e6'
+                        backgroundColor: '#e6e6e6',
+                        options3d: {
+                            enabled: true,
+                            alpha: 15,
+                            beta: 15,
+                            viewDistance: 25,
+                            depth: 40
+                        },
                     },
                     title:{
                         text:''
@@ -151,6 +160,7 @@
                         type: 'category',
                         categories: xas,
                         labels:{
+                            skew3d: true,
                             style:{
                                 fontSize: '8px'
 
@@ -163,7 +173,8 @@
                         title: false,
                         labels:{
                             style:{
-                                fontSize: '8px'
+                                fontSize: '8px',
+                                skew3d : true
 
                             }
                         }
@@ -183,7 +194,7 @@
                                 enabled: true,
                                 inside: true,
                                 align: 'center',
-                                verticalAlign: 'bottom',
+                                verticalAlign: 'top',
                                 color: '#404040',
                                 style: {
                                     textOutline: false
diff --git a/application/views/monpas/compactsop/extracompact.php b/application/views/monpas/compactsop/extracompact.php
index 389af35..3806e80 100644
--- a/application/views/monpas/compactsop/extracompact.php
+++ b/application/views/monpas/compactsop/extracompact.php
@@ -134,7 +134,14 @@
                         ijkgrafiek = Highcharts.chart('chartCompactExtra', {
                             chart:{
                                 animation: false,
-                                backgroundColor: '#e6e6e6'
+                                backgroundColor: '#e6e6e6',
+                                options3d: {
+                                    enabled: true,
+                                    alpha: 15,
+                                    beta: 15,
+                                    viewDistance: 25,
+                                    depth: 40
+                                },
                             },
                             title:{
                                 text:''
@@ -146,6 +153,7 @@
                                 type: 'category',
                                 categories: xas,
                                 labels:{
+                                    skew3d: true,
                                     style:{
                                         fontSize: '8px'
 
@@ -157,6 +165,7 @@
                                 max: 100,
                                 title: false,
                                 labels:{
+                                    skew3d: true,
                                     style:{
                                         fontSize: '8px'
 
@@ -178,7 +187,7 @@
                                         enabled: true,
                                         inside: true,
                                         align: 'center',
-                                        verticalAlign: 'bottom',
+                                        verticalAlign: 'top',
                                         color: '#404040',
                                         style: {
                                             textOutline: false
diff --git a/application/views/monpas/compactsop/ijktabelcompact.php b/application/views/monpas/compactsop/ijktabelcompact.php
index e9bfa13..9e104da 100644
--- a/application/views/monpas/compactsop/ijktabelcompact.php
+++ b/application/views/monpas/compactsop/ijktabelcompact.php
@@ -49,17 +49,22 @@
                 if(isset($score->kleur) && $score->disabled == 'F' && $score->disablenvt =='F') $kleur = $score->kleur;
                 };
                 ?>
-
                 labels.push(<?php $score->nummer ?>);
+                <?php if(floatval($score->gem) > 0 ){ ?>
                 scores.push({
-                    y:         <?= $score->gem ?>,
+                    y:         <?= floatval($score->gem) ?>,
+                    color:     '<?=$kleur ?>',
+                    name:      '<?= $score->nummer ?>',
+                       });
+                <?php } ?>
+                <?php if($score->gem == 0 ){ ?>
+                scores.push({
+                    y:         null,
                     color:     '<?=$kleur ?>',
                     name:      '<?= $score->nummer ?>',
-                    soort:     'score',
-                    versie:    <?= $lijst->periodenummer ?>,
-                    vantm:     '<?= $lijst->vantm ?>',
-                    omschrijving: '<?php echo isset( $score->omschrijving) ? $score->omschrijving : ''; ?>'  <?php // hier van $omschrijving $score->omschrijving gemaakt ?>
                 });
+                <?php } ?>
+
                 <?php } // foreach lijstscores  ?>
 
                 verkorteVersies.push(<?= $lijst->periodenummer ?>);
@@ -67,23 +72,16 @@
                 ambities.push(
                     {   y:         <?=$data['lijsten'][0]->ambities->gemscore; ?>,
                         color:     '#000000',
-                        name:      '',
-                        soort:     'ambitie',
-                        versie:    <?=$lijst->periodenummer ?>,
-                        vantm:     '<?= $lijst->vantm ?>',
-                        omschrijving: '<?='test';   //$omschrijving  is geen veld?>'
+                        name:      ''
+
                     }
                 );
 
                 labels.unshift(' ');
                 var legescore ={
-                    y           : 0,
+                    y           : null,
                     color       : 'transparent',
-                    name        : '0',
-                    soort       : 'extra',
-                    versie      : '',
-                    vantm       : '<?= $lijst->vantm ?>',
-                    omschrijving: ''
+                    name        : '0'
                 };
 
                 scores.unshift(legescore);
@@ -138,8 +136,16 @@
                 var ijkgrafiek;
                 ijkgrafiek = Highcharts.chart('chartCompactIJk', {
                     chart:{
+                        width:350,
                         animation: false,
-                        backgroundColor: '#e6e6e6'
+                        backgroundColor: '#e6e6e6',
+                        options3d: {
+                            enabled: true,
+                            alpha: 15,
+                            beta: 15,
+                            viewDistance: 25,
+                            depth: 40
+                        },
                     },
                     title:{
                         text:''
@@ -151,6 +157,7 @@
                         type: 'category',
                         categories: xas,
                         labels:{
+                            skew3d: true,
                             style:{
                                 fontSize: '8px'
                             }
@@ -161,6 +168,7 @@
                         max: 100,
                         title: false,
                         labels:{
+                            skew3d: true,
                             style:{
                                 fontSize: '8px'
 
diff --git a/application/views/monpas/compactsop/middelencompact.php b/application/views/monpas/compactsop/middelencompact.php
index aa15fe2..24ba14c 100644
--- a/application/views/monpas/compactsop/middelencompact.php
+++ b/application/views/monpas/compactsop/middelencompact.php
@@ -62,7 +62,7 @@
         
         <div class="col-xs-3">
             <p class="subTitel1" style="text-align:center">Extra ondersteuning</p>
-
+            <?php if($data['somE'] != 0){ ?>
             <!-- eerst de grafiek, daaronder de tabel -->
             <div    class="highcharts-background" 
                     style="height: 200px; width: 160px;" 
@@ -101,8 +101,12 @@
                     </tr>
                 </tbody>
             </table>
-        </div>
+            <?php } ?>
+            <?php if($data['somE'] == 0){ ?>
+            <p class="subTitel1" style="text-align:center; font-size: 8px" >Geen extra ondersteuning</p>
+            <?php } ?>
 
+        </div>
 
         <div class="col-xs-4">
             <p class="subTitel1" style="text-align:center">Uitgavetypen</p>
@@ -216,7 +220,7 @@
                 // }()
             });
             <?php } ?>
-            <?php if ($data['subsoorten']){ ?>
+            <?php if ($data['somE']> 0){ ?>
             $(function(){
                 Highcharts.setOptions({
                     lang: {
@@ -240,7 +244,14 @@
                         chart: {
                             type: 'column',
                             backgroundColor: '#ffffff',
-                            animation: false
+                            animation: false,
+                            options3d: {
+                                enabled: true,
+                                alpha: 20,
+                                beta: 20,
+                                viewDistance: 40,
+                                depth: 75,
+                            }
                         },
                         title: {
                             text: ''
@@ -251,6 +262,7 @@
                         xAxis: {
                             categories: xas,
                             labels:{
+                                skew3d: true,
                                 style:{
                                     fontSize: '8px'
 
@@ -261,6 +273,7 @@
                             min: 0,
                             title: false,
                             labels:{
+                                skew3d: true,
                                 style:{
                                     fontSize: '8px'
 
@@ -331,7 +344,11 @@
                             plotShadow: false,
                             animation: false,
                             type: 'pie',
-                            backgroundColor: '#ffffff'
+                            backgroundColor: '#ffffff',
+                            options3d: {
+                                enabled: true,
+                                alpha: 45,
+                            },
                         },
                         title: {
                             text: ''
@@ -353,6 +370,7 @@
                         plotOptions: {
                             pie: {
                                 allowPointSelect: false,
+                                depth: 25,
                                 dataLabels: {
                                     enabled: false,
                                     showInLegend: true
diff --git a/application/views/monpas/compactsop/passendcompact.php b/application/views/monpas/compactsop/passendcompact.php
index 19bdef5..c4530f7 100644
--- a/application/views/monpas/compactsop/passendcompact.php
+++ b/application/views/monpas/compactsop/passendcompact.php
@@ -51,16 +51,22 @@
                 ?>
 
                 labels.push(<?php $score->nummer ?>);
+                <?php if(floatval($score->gem) > 0 ){ ?>
                 scores.push({
-                    y:         <?= $score->gem ?>,
+                    y:         <?= floatval($score->gem) ?>,
                     color:     '<?=$kleur ?>',
                     name:      '<?= $score->nummer ?>',
-                    soort:     'score',
-                    versie:    <?= $lijst->periodenummer ?>,
-                    vantm:     '<?= $lijst->vantm ?>',
-                    omschrijving: '<?php echo isset( $score->omschrijving) ? $score->omschrijving : ''; ?>'  <?php // hier van $omschrijving $score->omschrijving gemaakt ?>
                 });
-                <?php } // foreach lijstscores  ?>
+                <?php } ?>
+                <?php if($score->gem == 0 ){ ?>
+                scores.push({
+                    y:         null,
+                    color:     '<?=$kleur ?>',
+                    name:      '<?= $score->nummer ?>',
+                });
+                <?php } ?>
+
+            <?php } // foreach lijstscores  ?>
 
                 verkorteVersies.push(<?= $lijst->periodenummer ?>);
                 var ambitiewaarde =<?=$data['lijsten'][0]->ambities->gemscore; ?>;
@@ -68,22 +74,15 @@
                     {   y:         <?=$data['lijsten'][0]->ambities->gemscore; ?>,
                         color:     '#000000',
                         name:      '',
-                        soort:     'ambitie',
-                        versie:    <?=$lijst->periodenummer ?>,
-                        vantm:     '<?= $lijst->vantm ?>',
-                        omschrijving: '<?='test';   //$omschrijving  is geen veld?>'
-                    }
+                             }
                 );
 
                 labels.unshift(' ');
                 var legescore ={
-                    y           : 0,
+                    y           : null,
                     color       : 'transparent',
                     name        : '0',
-                    soort       : 'extra',
-                    versie      : '',
-                    vantm       : '<?= $lijst->vantm ?>',
-                    omschrijving: ''
+
                 };
 
                 scores.unshift(legescore);
@@ -139,7 +138,14 @@
                 ijkgrafiek = Highcharts.chart('chartCompactPassend', {
                     chart:{
                         animation: false,
-                        backgroundColor: '#e6e6e6'
+                        backgroundColor: '#e6e6e6',
+                        options3d: {
+                            enabled: true,
+                            alpha: 15,
+                            beta: 15,
+                            viewDistance: 25,
+                            depth: 40
+                        },
                     },
                     title:{
                         text:''
@@ -151,6 +157,7 @@
                         type: 'category',
                         categories: xas,
                         labels:{
+                            skew3d: true,
                             style:{
                                 fontSize: '8px'
                             }
@@ -161,6 +168,7 @@
                         max: 100,
                         title: false,
                         labels:{
+                            skew3d: true,
                             style:{
                                 fontSize: '8px'
 
@@ -182,7 +190,7 @@
                                 enabled: true,
                                 inside: true,
                                 align: 'center',
-                                verticalAlign: 'bottom',
+                                verticalAlign: 'top',
                                 color: '#404040',
                                 style: {
                                     textOutline: false
diff --git a/application/views/monpas/compactsop/tevredencompact.php b/application/views/monpas/compactsop/tevredencompact.php
index c9d4c23..a52d4a7 100644
--- a/application/views/monpas/compactsop/tevredencompact.php
+++ b/application/views/monpas/compactsop/tevredencompact.php
@@ -40,22 +40,24 @@
                         <?php }   ?>
 
                         <?php foreach($lijst->scores as $index2 => $score){
-                        $omschrijving = "gemiddelde";
-                        if(isset($score->omschrijving)){
-                            $omschrijving = $score->omschrijving;
-                        };
                         ?>
-
                         labels.push(<?php $score->nummer ?>);
+
+                        <?php if(floatval($score->gem) > 0 ){ ?>
                         scores.push({
-                            y:         <?= $score->gem ?>,
+                            y:         <?= floatval($score->gem) ?>,
                             color:     '<?=$score->kleur ?>',
                             name:      '<?= $score->nummer ?>',
-                            soort:     'score',
-                            versie:    <?= $lijst->periodenummer ?>,
-                            vantm:     '<?= $lijst->vantm ?>',
-                            omschrijving: '<?php echo isset( $score->omschrijving) ? $score->omschrijving : ''; ?>'  <?php // hier van $omschrijving $score->omschrijving gemaakt ?>
-                        })
+                        });
+                        <?php } ?>
+                        <?php if($score->gem == 0 ){ ?>
+                        scores.push({
+                            y:         null,
+                            color:     '<?=$score->kleur ?>',
+                            name:      '<?= $score->nummer ?>',
+                        });
+                        <?php } ?>
+
                         <?php } // foreach lijstscores  ?>
 
                         verkorteVersies.push(<?= $lijst->periodenummer ?>);
@@ -64,22 +66,15 @@
                             {   y:         <?=$data['lijsten'][0]->ambities->gemscore; ?>,
                                 color:     '#000000',
                                 name:      '',
-                                soort:     'ambitie',
-                                versie:    <?=$lijst->periodenummer ?>,
-                                vantm:     '<?= $lijst->vantm ?>',
-                                omschrijving: '<?='test';   //$omschrijving  is geen veld?>'
+
                             }
                         );
 
                         labels.unshift(' ');
                         var legescore ={
-                            y           : 0,
+                            y           : null,
                             color       : 'transparent',
                             name        : '0',
-                            soort       : 'extra',
-                            versie      : '',
-                            vantm       : '<?= $lijst->vantm ?>',
-                            omschrijving: ''
                         };
 
                         scores.unshift(legescore);
@@ -104,7 +99,6 @@
                         var extralijn = {
                             y: ambitiewaarde,
                             name: '',
-                            soort: 'extra'
                         };
                         ambities.unshift(extralijn);
                         ambities.push(extralijn);
@@ -135,7 +129,14 @@
                         ijkgrafiek = Highcharts.chart('chartCompactTevreden', {
                             chart:{
                                 animation: false,
-                                backgroundColor: '#e6e6e6'
+                                backgroundColor: '#e6e6e6',
+                                options3d: {
+                                    enabled: true,
+                                    alpha: 15,
+                                    beta: 15,
+                                    viewDistance: 25,
+                                    depth: 40
+                                },
                             },
                             title:{
                                 text:''
@@ -147,6 +148,7 @@
                                 type: 'category',
                                 categories: xas,
                                 labels:{
+                                    skew3d: true,
                                     style:{
                                         fontSize: '8px'
 
@@ -158,6 +160,7 @@
                                 max: 100,
                                 title: false,
                                 labels:{
+                                    skew3d: true,
                                     style:{
                                         fontSize: '8px'
 
@@ -179,7 +182,7 @@
                                         enabled: true,
                                         inside: true,
                                         align: 'center',
-                                        verticalAlign: 'bottom',
+                                        verticalAlign: 'top',
                                         color: '#404040',
                                         style: {
                                             textOutline: false
diff --git a/application/views/monpas/pages/ijkpunten.php b/application/views/monpas/pages/ijkpunten.php
index 32c060d..42acb27 100644
--- a/application/views/monpas/pages/ijkpunten.php
+++ b/application/views/monpas/pages/ijkpunten.php
@@ -194,7 +194,7 @@
                 </button>
 
 
-                <div id="hc-chart1" style="min-width: 310px; height: 400px; margin: 0 auto" >
+                <div id="hc-chart1" style="min-width: 310px; height: 475px; margin: 0 auto" >
                 </div>
 
                 <canvas style="display: none" id="ijkpuntencanvas">
diff --git a/application/views/monpas/pages/mondiv/diversiteit.php b/application/views/monpas/pages/mondiv/diversiteit.php
index dabd069..6102d4f 100644
--- a/application/views/monpas/pages/mondiv/diversiteit.php
+++ b/application/views/monpas/pages/mondiv/diversiteit.php
@@ -144,7 +144,7 @@
         </div>
         <div class="col-sm-12 col-md-6">
 
-            <div id="dqpergroep" style="width: 100%"></div>
+            <div id="dqpergroepX" style="width: 100%"></div>
         </div>
     </div>
 	<div class="row">
diff --git a/application/views/monpas/pages/mondiv/diversiteitso.php b/application/views/monpas/pages/mondiv/diversiteitso.php
index d5abcd4..be77842 100644
--- a/application/views/monpas/pages/mondiv/diversiteitso.php
+++ b/application/views/monpas/pages/mondiv/diversiteitso.php
@@ -144,15 +144,18 @@
 <!--	<p> Groep 1-2: <span data-bind="text: normaantallensbo()[0]"></span></p>-->
 <!--	<p> Groep 3-8: <span data-bind="text:normaantallensbo()[1]"></span></p>-->
 <!--    <hr/>-->
-	<h4 style="margin-top :40px"> Diversiteitsquoti&#235;nt per groep
-		<button  class="printer" style="margin-left: 30px" data-bind="click: fPrintDiversiteitBar"></button>
-	</h4>
-	<div style="position:relative; width: 590px; height: 410px;" id="diversiteitsocanvasholderso">
-				
-		<canvas data-bind="attr:{'id': 'cdiversiteitso'}"   height= "400"  width="580" style="margin-top:5px; "> </canvas>
-		
-	</div>
+
+	<div class="row" style="border: none">
+        <div class="col-xs-6" style="border: none">
+            <button  class="printer"  data-bind="click: fPrintDiversiteitBar" ></button>
+		     <div id="cdiversiteitsoXXX" style="margin-top:5px; ">
+                </div>
+<!--            data-bind="attr:{'id': 'cdiversiteitsoXXX'}"-->
+
+	    </div>
+
 	<hr/>
+    </div>
 	<div class="row">
 		<div class="col-sm-12 col-md-6">
 			<h4> Leerlingaantallen
diff --git a/application/views/monpas/pages/mondiv/monitordiversiteit.php b/application/views/monpas/pages/mondiv/monitordiversiteit.php
index fefa13a..1078a90 100644
--- a/application/views/monpas/pages/mondiv/monitordiversiteit.php
+++ b/application/views/monpas/pages/mondiv/monitordiversiteit.php
@@ -61,13 +61,11 @@
                 </p>
 			</div>
 			<hr/>
-			<h4>Totaal percentages en richtlijnen</h4>
+<!--			<h4>Totaal percentages en richtlijnen</h4>-->
 			<div data-bind="visible : grandtotals().llng > 0">
-				<div style="float:left; position:relative; width: 400px; height: 290px;" id="holdermondiv01">
-					<canvas data-bind="attr:{'id': 'mondiv01'}"   height= "185"  width="500" style="margin-top:5px; "> </canvas>
-				</div>
+				<div id="mondiv01X" style="margin-top:5px;"></div>
 				<div style='float:left;margin-left: 40px; '>
-					<table class-="lstable">
+					<table class="lstable">
 						<thead>
 							<tr style="border-bottom:1px solid #dbdbdb">
 								<td>Ondersteuningsvormen</td>
diff --git a/application/views/monpas/pages/mondiv/monitordiversiteitso.php b/application/views/monpas/pages/mondiv/monitordiversiteitso.php
index d934a20..75d1409 100644
--- a/application/views/monpas/pages/mondiv/monitordiversiteitso.php
+++ b/application/views/monpas/pages/mondiv/monitordiversiteitso.php
@@ -52,13 +52,13 @@
                 </p>
 			</div>
 			<hr/>
-			<h4>Percentages</h4>
+<!--			<h4>Percentages</h4>-->
+            <div class="row">
 			<div data-bind="visible : grandtotals().llng > 0">
-				<div style="float:left; position:relative; width: 400px; height: 290px;" id="holdermondivSO">
-					<canvas data-bind="attr:{'id': 'mondivSO'}"   height= "185"  width="500" style="margin-top:5px; "> </canvas>
-				</div>
-				<div style='float:left;margin-left: 40px; '>
-					<table class-="lstable">
+
+				<div id="mondivSOXXX" class="col-xs-6"></div>
+				<div class="col-xs-6" >
+					<table class="lstable">
 						<thead>
 							<tr style="border-bottom:1px solid #dbdbdb">
 								<td>Ondersteuningsvormen</td>
@@ -91,6 +91,7 @@
 
 			</div>
 		</div> <!-- linkerblok -->
+        </div>
 
 		<div class="col-sm-12 col-md-3" >	
 			 <div style="font-size: 0.8em; border:1px solid #ebebeb">
diff --git a/application/views/monpas/pages/omvangextra.php b/application/views/monpas/pages/omvangextra.php
index 7e732b7..e4df86a 100644
--- a/application/views/monpas/pages/omvangextra.php
+++ b/application/views/monpas/pages/omvangextra.php
@@ -195,12 +195,12 @@
 
             </div>
 
-            <div style="margin-top: 20px;" data-bind="visible: toonresult() == true "   >
+            <div class="col-xs-12" style="margin-top: 20px; " data-bind="visible: toonresult() == true "   >
                 <button  class="printer" style=" float: right; display: inline; margin-right: 10px;"
                          data-bind="click: fPrint">
                 </button>
 
-                <div id="omvangchart" style="min-width: 350px; height: 400px; margin: 0 auto" >
+                <div id="omvangchart" class="col-xs-12" style=" clear: both; display: block; min-width: 350px; height: 450px; margin: 0 auto" >
                 </div>
 
 
diff --git a/application/views/monpas/reports/diversiteitbar.php b/application/views/monpas/reports/diversiteitbar.php
index 17b0374..a9d5c51 100644
--- a/application/views/monpas/reports/diversiteitbar.php
+++ b/application/views/monpas/reports/diversiteitbar.php
@@ -1,6 +1,4 @@
 <div  style="font-family: Opensans, Arial,Verdana,sans; font-size: 10px">
-<h4> Diversiteitsquoti&#235;nt per groep</h4>
-<hr/>
 <table style=" font-family: inherit; font-size:inherit" >
 	<tr>
 		<td>School:</td>
@@ -8,14 +6,13 @@
 	</tr>
 	<tr>
 		<td>Schooljaar: </td>
-		<td><?=$schooljaarnaam?></td>
+		<td><?=$schooljaar?></td>
 	</tr>
 	<tr>
 		<td>Per: </td>
 		<td><?=$vandaag?></td>
 	</tr>
-</table>	
-<hr/>
-<img src="<?=$inputimage?>"  width=420/>
+</table>
+<?=$img?>
 
 </div>
\ No newline at end of file
diff --git a/application/views/monpas/reports/divmonitorpdf.php b/application/views/monpas/reports/divmonitorpdf.php
index 62b4b1b..953c35d 100644
--- a/application/views/monpas/reports/divmonitorpdf.php
+++ b/application/views/monpas/reports/divmonitorpdf.php
@@ -149,7 +149,7 @@
 			<?php  if ($grandtotals->llng >0) { ?>
 			<h4 style="margin-top: 30px;">Totaal percentages en richtlijnen</h4>
 			<div style="float: left">
-				<img src=' <?=$gr0164?>'style="width:200px" />
+				<?=$img?>
 			</div>
 			<div style="float:left; margin-left:30px">
 				<table class="lstable" >
diff --git a/application/views/monpas/reports/divmonitorsopdf.php b/application/views/monpas/reports/divmonitorsopdf.php
index 3346881..676094a 100644
--- a/application/views/monpas/reports/divmonitorsopdf.php
+++ b/application/views/monpas/reports/divmonitorsopdf.php
@@ -25,26 +25,17 @@
     }
     .pdfblok{
         border:     1px solid #dbdbdb;
-        float :     left;
-        width :     800px;
-        min-height: 250px;
+        width :     350px;
         padding:    5px;
-        position:   relative;
         margin-top: 40px;
     }
     .onderin{
-        position : absolute;
-        bottom   : 0;
         width    : 325px;
-        left     : 0;
-
     }
 
     .onderin2{
-        position : absolute;
-        bottom   : 30px;
-        width    : 350px;
-        left     : 350px;
+        width    : 325px;
+        float    : left;
 
     }
 
@@ -156,43 +147,38 @@
 			</div>
 			<hr/>
 
-			<div class="pdfblok">
+			<div>
 			<?php  if ($grandtotals->llng >0) { ?>
-			<h4 >Totaal percentages en richtlijnen</h4>
-			<div class="onderin" style="left: 0;">
-				<img src=' <?=$gr0164?>'style="width:300px" />
-			</div>
-			<div class="onderin2" ">
-				<table class="lstable" >
+				<div style="float: left">
+                <table  class="lstable" >
 					<thead>
 						<tr style="border-bottom:1px solid #dbdbdb">
 							<td>Ondersteuningsvormen</td>
 							<td>% leerlingen</td>
-							<td>richtlijn</td>
 						</tr>
 					</thead>
 					<tr>
 						<td>SBO</td>
 						<td class="tar"><?php echo round(($grandtotals->cat5 / $grandtotals->llng) * 100); ?>%</td>
-						<td class="tar" >85%</td>
 					</tr>
 					<tr>
 						<td>SO-1</td>
 						<td class="tar"><?php echo round(($grandtotals->cat6 / $grandtotals->llng) * 100); ?>%</td>
-						<td class="tar" >10%</td>
 					</tr>
 					<tr>
 						<td>SO-2</td>
 						<td class="tar"><?php echo round(($grandtotals->cat7 / $grandtotals->llng) * 100); ?>%</td>
-						<td class="tar" >3%</td>
 					</tr>
 					<tr>
                         <td> SO-3Extra ondersteuning plus</td>
 						<td class="tar"><?php echo round(($grandtotals->cat8 / $grandtotals->llng) * 100); ?>%</td>
-						<td class="tar" >2%</td>
+
 					</tr>
 				</table>
-			</div>
+                </div>
+                <div style="float: left; margin-left: 0">
+                     <?=$img ?>
+                </div>
 			<div style="clear:both"></div>
 			<?php ;}; ?>
             </div>
diff --git a/application/views/monpas/sop/diversiteitgrafiek1.php b/application/views/monpas/sop/diversiteitgrafiek1.php
index 4228f98..4d07319 100644
--- a/application/views/monpas/sop/diversiteitgrafiek1.php
+++ b/application/views/monpas/sop/diversiteitgrafiek1.php
@@ -1,72 +1,110 @@
-
-	<link rel="stylesheet" type="text/css" href="<?php echo $this->config->item('vendor_url'); ?>/css/chart.css" />
+<!doctype html>
+<html>
+<head>
 	<script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/jquery.min.js"></script>
-	<script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/chart.min.js"></script>
-    <canvas id="cdiversiteit99"   height= "260"  width="600" style="margin-top:5px;"> </canvas>
+    <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts.js"></script>
+    <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts-3d.js"></script>
+    <style>
+        body {
+            font-family: 'Verdana', 'sans-serif';
+            font-size: 12px;
+        }
+
+    </style>
+</head>
+<body>
 
 
+    <div id="graphdivstandaard"   style="margin-top:5px; height: 260px; width: 600px;"> </div>
 
 
     <script>
-		fFillGraph= function(){
-				var scores =[];
-				var slabels =[];
-				var counter = 0;
-				bartussenruimte = 5;
-				 var groepen = <?php echo json_encode($groepen); ?>
+        <?php if ($groepen){ ?>
+        $(function(){
+            fFillGraph= function(){
+                var scores =[];
+                var labels =[];
+                <?php foreach($groepen as $index => $groep) { ?>
+                labels.push('<?= $groep->naam ?>');
 
-				$.each(groepen, function(i,p){
-					scores[i] = p.dq;
-					slabels[i] = p.naam;
-					counter = counter + 1;
-				});
-				slabels[counter]='school';
-				scores[counter]=<?=$totdq?>;
+                <?php if(floatval($groep->dq) > 0){?>
+                scores.push({
+                    y: <?=(floatval($groep->dq))?>,
+                    name: '<?= $groep->naam ?>',
+                    color: '#6F0B3D'
+                })
+                <?php }
+                if(floatval($groep->dq) == 0){?>
+                scores.push({
+                    y: null,
+                    name: '<?= $groep->naam ?>',
+                    color: '#6F0B3D'
+                })
+                <?php }
+                }
+                ?>
+                labels.push('school');
+                scores.push({
+                    y: <?= $totdq ?>,
+                    name: 'school',
+                    color:'#6F0B3D'
+                })
+                Highcharts.chart('graphdivstandaard', {
+                    chart: {
+                        type: 'column',
+                        animation: false,
+                        backgroundColor: 'transparent',
+                        options3d: {
+                            enabled: true,
+                            alpha: 15,
+                            beta: 15,
+                            depth: 50,
+                            viewDistance: 25
+                        }
+                    },
+                    title: {
+                        text: ' ',
 
-			  	var ctxDiversiteit=$("#cdiversiteit99").get(0).getContext("2d");
+                    },
+                    credits: {
+                        enabled: false
+                    },
+                    xAxis: {
+                        categories: labels,
+                    },
+                    yAxis: {
+                        min: 0,
+                        tickInterval: 0.2,
+                        title: {
+                            text: 'DQ'
+                        },
+                        labels:{
+                            style:{
+                                fontSize: '8px'
 
-				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}
-							]};
+                            }
+                        }
+                    },
+                    plotOptions: {
+                        column: {
+                            pointWidth: null,
+                            groepPadding: 0,
+                            borderWidth: 0,
+                            color: '#7f036C'
+                        }
+                    },
+                    series: [{
+                        showInLegend: false,
+                        animation: false,
+                        name: 'groepen',
+                        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,95);
-				        // this.chart.ctx.lineTo(580, 95);
-				        this.chart.ctx.stroke();
-				        this.chart.ctx.closePath();
-				    }
-				});
-
-					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: 20,
-          	   									scaleStepWidth: 0.1,
-          	   				 					scaleStartValue: 0 ,
-          	   						 			barValueSpacing: bartussenruimte,
-          	   						 			barStrokeWidth:1,
-          	   						 			barDatasetSpacing:2,
-          	   						 			toottipFontFamily:"'lato','Arial'",
-          	   						 			showTooltips	: false
-									});
-
-			}();
+            }()
+        });
+        <?php } ?>
 </script>
+</body>
+</html>
diff --git a/application/views/monpas/sop/monbasgrafiek1.php b/application/views/monpas/sop/monbasgrafiek1.php
index 33dfc59..676243f 100644
--- a/application/views/monpas/sop/monbasgrafiek1.php
+++ b/application/views/monpas/sop/monbasgrafiek1.php
@@ -1,87 +1,165 @@
-	<link rel="stylesheet" type="text/css" href="<?php echo $this->config->item('vendor_url'); ?>/css/chart.css" />
-	<script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/jquery.min.js"></script>
-	<script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/chart.min.js"></script>
+<!doctype html>
+<html>
+<head>
+    <script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/jquery.min.js"></script>
+    <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts.js"></script>
+    <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts-3d.js"></script>
+    <style>
+        body {
+            font-family: 'Verdana', 'sans-serif';
+            font-size: 12px;
+        }
 
-			
-	<canvas id='schoolijkpunt2'   height= "285"  width="580" style="margin-top:5px; "> </canvas>
+    </style>
+</head>
+<body>
+
+<div id='schoolijkpunt2'   style="margin-top:5px; height:285px; width:580px; "> </div>
 			<p style="font-size:0.8em"><?=$vantm?></p>					
 <script>
+    <?php if ($scores){ ?>
+    $(function(){
 		 fFillGraph=function(){
-				
+
 				var scores =[];
-				var slabels =[];
-				var tekstlabels =[];
-				
-				var results = <?php echo json_encode($scores); ?>	
-				var ambitiescore= <?php echo $ambitie->gemscore; ?>;
-				var lijnAt = (((100 - parseFloat(ambitiescore)) / 10 ) * 25 ) +12;
-				var j=0;
-                var colors=[]
+				var labels =[];
+				var gemiddelde = [];
+
+
              <?php foreach($scores as $index => $score){ ?>
+                labels.push('<?= $score->nummer ?>');
+                <?php if($totgem){ ?>
+                gemiddelde.push({ y: <?= intval($totgem) ?>,
+                                  name: '<?= $score->nummer ?>'
+                })
+             <?php } ?>
 
-             slabels.push('<?= $score->nummer ?>');
-             tekstlabels.push('<?= $score->omschrijving ?>');
-            //  scores.push({
-            //      y:         <?= $score->gem ?>,
-            //      color:     '<?= isset($score->kleur)? $score->kleur : "#808080" ?>',
-            //      name:      '<?= $score->nummer ?>',
+              <?php if(intval($score->gem) > 0){ ?>
+              scores.push({
+                  y:     <?= intval($score->gem) ?>,
+                  color: '<?= isset($score->kleurcode)? $score->kleurcode : "#808080" ?>',
+                  name: '<?= $score->nummer ?>'
 
-            //  });
-            scores.push(<?=$score->gem ?>)
-            colors.push('<?= isset($score->kleurcode) ? $score->kleurcode : "#808080" ?>')
 
-             <?php }   ?>
-            slabels.push('gem')
-            scores.push(<?= $totgem ?>)
-            colors.push('<?= isset($totgemkleur) ? $totgemkleur : "#808080" ?>')
-			  	
-            var ctxSchoolijkpunt2=$("#schoolijkpunt2").get(0).getContext("2d");
-			
-				var data5 = {labels :slabels,
-							datasets: [{	label: tekstlabels,
-										    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 () {
+              });// object
+             <?php }  //if
+             if(intval($score->gem) == 0){ ?>
+             scores.push({
+                 y:      null,
+                 color:  '<?= isset($score->kleurcode)? $score->kleurcode : "#808080" ?>',
+                 name: '<?= $score->nummer ?>'
 
-				        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,lijnAt );
-				        this.chart.ctx.lineTo(565, lijnAt);
-				        this.chart.ctx.stroke();
-				        this.chart.ctx.closePath();
-				    }
-				});
-				
-					  BC51 = new Chart(ctxSchoolijkpunt2).LineAlt(data5,{
-					  						animation: false, 
-											scaleShowGridLines:true,
-											scaleLineColor:"rgba(0,0,0,1)",
-											scaleOverride: true,
-            						 				scaleBeginAtZero :true,
-            						 				scaleSteps: 10,     
-          	   									scaleStepWidth: 10,
-          	   				 					scaleStartValue: 0 ,
-          	   						 			barValueSpacing: 10,
-          	   						 			barStrokeWidth:1,
-          	   						 			barDatasetSpacing:2         	   						 			
+             });//object
+             <?php }  //if
+             }//foreach ?>
 
-									});	
+            labels.push('gem')
+            labels.unshift(' ');
+            labels.push(' ');
+
+             scores.push({
+                 y     :      <?= intval($totgem) ?>,
+                 color :  '<?= isset($score->kleurcode)? $score->kleurcode : "#808080" ?>',
+                 name  : 'gem'
+
+             });// object
+             scores.unshift({
+                 y: null,
+                 color: 'transparent',
+                 name: ' '
+             })
+             scores.push({
+                 y: null,
+                 color: 'transparent',
+                 name: ' '
+             })
+             gemiddelde.push({
+                 y:  <?= intval($totgem) ?>,
+                 name: 'gemiddelde'
+             })
+             gemiddelde.unshift({
+                 y: null,
+                 name: ' '
+             })
+             gemiddelde.push({
+                 y:  <?= intval($totgem) ?>,
+                 name: ' '
+             })
 
 
 
-				
+
+             Highcharts.chart('schoolijkpunt2', {
+                 chart: {
+                     type: 'spline',
+                     backgroundColor: 'transparent',
+                     options3d: {
+                         enabled: true,
+                         alpha: 15,
+                         beta: 15,
+                         depth: 50,
+                         viewDistance: 25
+                     }
+                 },
+                 title: {
+                     text: ' ',
+
+                 },
+                 credits: {
+                     enabled: false
+                 },
+                 xAxis: {
+                     categories: labels,
+                 },
+                 yAxis: {
+                     min: 0,
+                     max: 100,
+                     tickInterval: 10,
+                     title: {
+                         text: 'procenten'
+                     },
+                     labels:{
+                         style:{
+                             fontSize: '8px'
+
+                         }
+                     }
+                 },
+                 plotOptions: {
+                     column: {
+                         pointWidth: null,
+                         groepPadding: 0,
+                         borderWidth: 0,
+                     },
+                     spline: {
+                      color:  '#4d4d4d'
+                     },
+                 },
+                 series: [{
+                     showInLegend: false,
+                     animation: false,
+                     type: 'column',
+                     name: 'scores',
+                     data: scores
+                 },
+                     {showInLegend: false,
+                         animation: false,
+                         marker: {
+                          enabled: false
+                         },
+                         type: 'spline',
+                         name: 'gemiddelde',
+                         data: gemiddelde
+
+                     }]
+             });
+
 			}();
+    });
+    <?php } ?>
 
 </script>
+</body>
+</html>
 
diff --git a/application/views/monpas/sop/sopvoorpagina.php b/application/views/monpas/sop/sopvoorpagina.php
index 6e83f35..13606b9 100644
--- a/application/views/monpas/sop/sopvoorpagina.php
+++ b/application/views/monpas/sop/sopvoorpagina.php
@@ -3,13 +3,22 @@
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <style>
-	body {font-size:12px;}
-	h1 {font-size: 1.6em;}
-	h2 {font-size: 1.4em;}
-	h3 {font-size: 1.3em;}
-	h4 {font-size:1.2em;}
-	h5 {font-size: 1.1em;}
-	td {font-size:10px;}
+
+
+	body {font-size:12px;
+        font-family: 'Verdana', 'sans-serif';}
+	h1 {font-size: 1.6em;
+        font-family: 'Verdana', 'sans-serif';}
+	h2 {font-size: 1.4em;
+        font-family: 'Verdana', 'sans-serif';}
+	h3 {font-size: 1.3em;
+        font-family: 'Verdana', 'sans-serif';}
+	h4 {font-size:1.2em;
+        font-family: 'Verdana', 'sans-serif';}
+	h5 {font-size: 1.1em;
+        font-family: 'Verdana', 'sans-serif';}
+	td {font-size:10px;
+        font-family: 'Verdana', 'sans-serif';}
 
 </style>
 </head>
diff --git a/application/views/monpas/sopkeuze/divquotientgraf.php b/application/views/monpas/sopkeuze/divquotientgraf.php
index 5b8f871..fe3b5c1 100644
--- a/application/views/monpas/sopkeuze/divquotientgraf.php
+++ b/application/views/monpas/sopkeuze/divquotientgraf.php
@@ -2,9 +2,9 @@
 <html>
 <head>
 
-    <link rel="stylesheet" type="text/css" href="<?php echo $this->config->item('vendor_url'); ?>/css/chart.css" />
     <script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/jquery.min.js"></script>
-    <script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/chart.min.js"></script>
+    <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts.js"></script>
+    <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts-3d.js"></script>
 
     <style>
         body {
@@ -15,71 +15,96 @@
     </style>
 </head>
 <body>
-    <div>
-    <canvas id="grafquotient"   height= "260"  width="600" style="margin-top:5px;"> </canvas>
-    </div>
+
+    <div id="graphXXX"  style="margin-top:5px; height: 260px; width: 600px"> </div>
 
     <script>
+        <?php if ($data['groepen']){ ?>
+        $(function(){
             fFillGraph= function(){
                     var scores =[];
-                    var slabels =[];
-                    var counter = 0;
-                    bartussenruimte = 5;
-                     var groepen = <?php echo json_encode($data['groepen']); ?>
+                    var labels =[];
+                    <?php foreach($data['groepen'] as $index => $groep) { ?>
+                    labels.push('<?= $groep->naam ?>');
 
-                    $.each(groepen, function(i,p){
-                        scores[i] = p.dq;
-                        slabels[i] = p.naam;
-                        counter = counter + 1;
-                    });
-                    slabels[counter]='school';
-                    scores[counter]=<?=$data['totdq']?>;
-
-                    var ctxDiversiteit=$("#grafquotient").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,114);
-                            // this.chart.ctx.lineTo(580, 114);
-                            this.chart.ctx.stroke();
-                            this.chart.ctx.closePath();
+                    <?php if(floatval($groep->dq) > 0){?>
+                    scores.push({
+                        y: <?=(floatval($groep->dq))?>,
+                        name: '<?= $groep->naam ?>',
+                        color: '#6F0B3D'
+                    })
+                    <?php }
+                    if(floatval($groep->dq) == 0){?>
+                    scores.push({
+                        y: null,
+                        name: '<?= $groep->naam ?>',
+                        color: '#6F0B3D'
+                    })
+                    <?php }
+                    }
+                    ?>
+                    labels.push('school');
+                    scores.push({
+                        y: <?= $data['totdq'] ?>,
+                        name: 'school',
+                        color:'#6F0B3D'
+                    })
+                Highcharts.chart('graphXXX', {
+                    chart: {
+                        type: 'column',
+                        animation: false,
+                        backgroundColor: 'transparent',
+                        options3d: {
+                            enabled: true,
+                            alpha: 15,
+                            beta: 15,
+                            depth: 50,
+                            viewDistance: 25
                         }
-                    });
+                    },
+                    title: {
+                        text: ' ',
 
-                        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	: false
-                                        });
+                    },
+                    credits: {
+                        enabled: false
+                    },
+                    xAxis: {
+                        categories: labels,
+                    },
+                    yAxis: {
+                        min: 0,
+                        tickInterval: 0.2,
+                        title: {
+                            text: 'DQ'
+                        },
+                        labels:{
+                            style:{
+                                fontSize: '8px'
+
+                            }
+                        }
+                    },
+                    plotOptions: {
+                        column: {
+                            pointWidth: null,
+                            groepPadding: 0,
+                            borderWidth: 0,
+                            color: '#7f036C'
+                        }
+                    },
+                    series: [{
+                        showInLegend: false,
+                        animation: false,
+                        name: 'groepen',
+                        data: scores
+                    } ]
+                });
+
+            }()
+        });
+        <?php } ?>
 
-                }();
     </script>
         <p style="font-size: 10px;"><span>Versie: </span><?php if(isset($data['versie'])){echo $data['versie']->naam; }?></p>
 </body>
diff --git a/application/views/monpas/sopkeuze/divquotientgrafso.php b/application/views/monpas/sopkeuze/divquotientgrafso.php
index 074a905..a4ede2c 100644
--- a/application/views/monpas/sopkeuze/divquotientgrafso.php
+++ b/application/views/monpas/sopkeuze/divquotientgrafso.php
@@ -1,10 +1,9 @@
 <!doctype html>
 <html>
 <head>
-
-    <link rel="stylesheet" type="text/css" href="<?php echo $this->config->item('vendor_url'); ?>/css/chart.css" />
     <script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/jquery.min.js"></script>
-    <script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/chart.min.js"></script>
+    <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts.js"></script>
+    <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts-3d.js"></script>
 
     <style>
         body {
@@ -18,70 +17,161 @@
 <body>
 
 <div>
-    <canvas id="grafquotientso"   height= "260"  width="600" style="margin-top:5px;"> </canvas>
+    <div id="graphSOXXX"  style="margin-top:5px;height: 260px; width: 600px"> </div>
 </div>
 
-<script>	
-		fFillGraph= function(){
-				var scores =[];
-				var slabels =[];
-				var counter = 0;
-				bartussenruimte = 5;
-				 var groepen = <?php echo json_encode($data['groepen']); ?>
-	
-				$.each(groepen, function(i,p){
-					scores[i] = p.dq;
-					slabels[i] = p.naam;		
-					counter = counter + 1;	
-				});
-				slabels[counter]='school';
-				scores[counter]=<?=$data['totdq']?>;
-	
-			  	var ctxDiversiteit=$("#grafquotientso").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},
-							]}
+<script>
+    <?php if ($data['groepen']){ ?>
+    $(function(){
+        fFillGraph= function(){
+            var scores =[];
+            var labels =[];
+            <?php foreach($data['groepen'] as $index => $groep) { ?>
+            labels.push('<?= $groep->naam ?>');
 
-				Chart.types.Bar.extend({
-				    name: "LineAlt",
-				    initialize: function () {
+            <?php if(floatval($groep->dq) > 0){?>
+            scores.push({
+                y: <?=(floatval($groep->dq))?>,
+                name: '<?= $groep->naam ?>',
+                color: '#6F0B3D'
+            })
+            <?php }
+            if(floatval($groep->dq) == 0){?>
+            scores.push({
+                y: null,
+                name: '<?= $groep->naam ?>',
+                color: '#6F0B3D'
+            })
+            <?php }
+            }
+            ?>
+            labels.push('school');
+            scores.push({
+                y: <?= $data['totdq'] ?>,
+                name: 'school',
+                color:'#6F0B3D'
+            })
+            Highcharts.chart('graphSOXXX', {
+                chart: {
+                    type: 'column',
+                    animation: false,
+                    backgroundColor: 'transparent',
+                    options3d: {
+                        enabled: true,
+                        alpha: 15,
+                        beta: 15,
+                        depth: 50,
+                        viewDistance: 25
+                    }
+                },
+                title: {
+                    text: ' ',
 
-				        Chart.types.Bar.prototype.initialize.apply(this, arguments);
-				    },
-				    draw: function () {
+                },
+                credits: {
+                    enabled: false
+                },
+                xAxis: {
+                    categories: labels,
+                },
+                yAxis: {
+                    min: 0,
+                    tickInterval: 0.2,
+                    title: {
+                        text: 'DQ'
+                    },
+                    labels:{
+                        style:{
+                            fontSize: '8px'
 
-				        Chart.types.Bar.prototype.draw.apply(this, arguments);
-				        this.chart.ctx.beginPath();
-				        // this.chart.ctx.moveTo(30,114);
-				        // this.chart.ctx.lineTo(580, 114);
-				        this.chart.ctx.stroke();
-				        this.chart.ctx.closePath();
-				    }
-				});
-				
-					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: 6,
-          	   									scaleStepWidth: 0.5,
-          	   				 					scaleStartValue: 0 ,
-          	   						 			barValueSpacing: bartussenruimte,
-          	   						 			barStrokeWidth:1,
-          	   						 			barDatasetSpacing:2,
-          	   						 			toottipFontFamily:"'lato','Arial'",
-          	   						 			showTooltips	: false  	   						 			
-									});	
+                        }
+                    }
+                },
+                plotOptions: {
+                    column: {
+                        pointWidth: null,
+                        groepPadding: 0,
+                        borderWidth: 0,
+                        color: '#7f036C'
+                    }
+                },
+                series: [{
+                    showInLegend: false,
+                    animation: false,
+                    name: 'groepen',
+                    data: scores
+                } ]
+            });
 
-			}();
+            // Highcharts.chart('graphSOXXX', {
+            //     chart: {
+            //         type: 'column'
+            //     },
+            //     title: {
+            //         text: 'Monthly Average Rainfall'
+            //     },
+            //     subtitle: {
+            //         text: 'Source: WorldClimate.com'
+            //     },
+            //     xAxis: {
+            //         categories: [
+            //             'Jan',
+            //             'Feb',
+            //             'Mar',
+            //             'Apr',
+            //             'May',
+            //             'Jun',
+            //             'Jul',
+            //             'Aug',
+            //             'Sep',
+            //             'Oct',
+            //             'Nov',
+            //             'Dec'
+            //         ],
+            //         crosshair: true
+            //     },
+            //     yAxis: {
+            //         min: 0,
+            //         title: {
+            //             text: 'Rainfall (mm)'
+            //         }
+            //     },
+            //     tooltip: {
+            //         headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
+            //         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
+            //             '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
+            //         footerFormat: '</table>',
+            //         shared: true,
+            //         useHTML: true
+            //     },
+            //     plotOptions: {
+            //         column: {
+            //             pointPadding: 0.2,
+            //             borderWidth: 0
+            //         }
+            //     },
+            //     series: [{
+            //         name: 'Tokyo',
+            //         data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
+            //
+            //     }, {
+            //         name: 'New York',
+            //         data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
+            //
+            //     }, {
+            //         name: 'London',
+            //         data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
+            //
+            //     }, {
+            //         name: 'Berlin',
+            //         data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
+            //
+            //     }]
+            // });
+
+        }()
+    });
+    <?php } ?>
 </script>
 </body>
 </html>
diff --git a/application/views/monpas/sopkeuze/ijkgrafiekgemiddeld.php b/application/views/monpas/sopkeuze/ijkgrafiekgemiddeld.php
index b5ab8d9..a8a6a55 100644
--- a/application/views/monpas/sopkeuze/ijkgrafiekgemiddeld.php
+++ b/application/views/monpas/sopkeuze/ijkgrafiekgemiddeld.php
@@ -3,6 +3,8 @@
 <head>
        <script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/jquery.min.js"></script>
     <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts.js"></script>
+    <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts-3d.js"></script>
+
     <style>
         body {
             font-family: 'Verdana', 'sans-serif';
@@ -50,20 +52,23 @@
 
                 <?php foreach($lijst->scores as $index2 => $score){
                 $kleur = '#808080';
-                if($score->disabled == 'F' && $score->disablenvt == 'F' && isset($score->kleur)) $kleur = $score->kleur;
-
-
-                ?>
-
-                labels.push(<?php $score->nummer ?>);
+                if($score->disabled == 'F' && $score->disablenvt == 'F' && isset($score->kleur)) $kleur = $score->kleur;?>
+                labels.push('<?php $score->nummer ?>');
+                <?php if(intval($score->gem)> 0){ ?>
                 scores.push({
                     y:         <?= $score->gem ?>,
                     color:     '<?=$kleur ?>',
                     name:      '<?= $score->nummer ?>',
-                    soort:     'score',
-                    versie:    <?= $lijst->periodenummer ?>
                                 })
-                <?php } // foreach lijstscores  ?>
+                <?php }//if
+                if(intval($score->gem) == 0){ ?>
+                scores.push({
+                    y:         null,
+                    color:     '<?=$kleur ?>',
+                    name:      '<?= $score->nummer ?>',
+                })
+                <?php }//if
+                } // foreach lijstscores  ?>
 
                 verkorteVersies.push(<?= $lijst->periodenummer ?>);
                 var ambitiewaarde =<?=$data['lijsten'][0]->ambities->gemscore; ?>;
@@ -71,8 +76,6 @@
                     {   y:         <?=$data['lijsten'][0]->ambities->gemscore; ?>,
                         color:     '#000000',
                         name:      '',
-                        soort:     'ambitie',
-                        versie:    <?=$lijst->periodenummer ?>
                     }
                 );
 
@@ -81,8 +84,6 @@
                     y           : 0,
                     color       : 'transparent',
                     name        : '0',
-                    soort       : 'extra',
-                    versie      : <?= $lijst->periodenummer ?>,
                 };
 
                 scores.unshift(legescore);
@@ -135,6 +136,18 @@
 
                 var ijkgrafiek;
                 ijkgrafiek = Highcharts.chart('chartSopIJkGem', {
+                    chart:{
+                        animation: false,
+                        type: 'column',
+                        backgroundColor: 'transparent',
+                        options3d: {
+                            enabled: true,
+                            alpha: 15,
+                            beta: 15,
+                            depth: 50,
+                            viewDistance: 25
+                        }
+                    },
                     title:{
                         text:''
                     },
@@ -144,23 +157,16 @@
                     xAxis: {
                         type: 'category',
                         categories: xas,
-                        title:{
-                            text: xastitel
-                        }
                     },
                     yAxis: {
                         min:0,
                         max: 100,
-                        title: {
-                            text: 'Scores'
-                        }
+                        title: false,
                     },
                     legend: {
                         enabled: false
                     },
                     plotOptions: {
-
-
                         column:{
                             pointPadding: 0.05,
                             borderWidth:0
@@ -171,7 +177,7 @@
                                 enabled: true,
                                 inside: true,
                                 align: 'center',
-                                verticalAlign: 'bottom',
+                                verticalAlign: 'top',
                                 color: '#404040',
                                 style: {
                                     textOutline: false
diff --git a/application/views/monpas/sopkeuze/ijkpuntengrafiek.php b/application/views/monpas/sopkeuze/ijkpuntengrafiek.php
index 8b73032..1c3d32e 100644
--- a/application/views/monpas/sopkeuze/ijkpuntengrafiek.php
+++ b/application/views/monpas/sopkeuze/ijkpuntengrafiek.php
@@ -6,6 +6,8 @@
 
     <script type="text/javascript" src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/jquery.min.js?v=1.17.26"></script>
     <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts.js"></script>
+    <script src="<?php echo $this->config->item('vendor_url'); ?>/js_lib/Highcharts/code/highcharts-3d.js"></script>
+
     <style>
         body {
             font-family: 'Verdana', 'sans-serif';
@@ -57,25 +59,30 @@
             <?php foreach($lijst->scores as $index2 => $score){
             ?>
 
-            labels.push(<?php $score->nummer ?>);
+            labels.push('<?= $score->nummer ?>');
+            <?php if(intval($score->gem) > 0){ ?>
             scores.push({
-                y:         <?= $score->gem ?>,
+                y:         <?= intval($score->gem) ?>,
                 color:     '<?=$score->kleur ?>',
                 name:      '<?= $score->nummer ?>',
-                soort:     'score',
-                versie:    <?= $lijst->periodenummer ?>
-                <?php  ?>
             });
-            <?php } // foreach lijstscores  ?>
+            <?php }
+            if (intval($score->gem) == 0){ ?>
+            scores.push({
+                y:         null,
+                color:     '<?=$score->kleur ?>',
+                name:      '<?= $score->nummer ?>',
+            });
+            <?php } //if
+            } // foreach lijstscores  ?>
 
             verkorteVersies.push(<?= $lijst->periodenummer ?>);
             var ambitiewaarde =<?=$data['lijsten'][0]->ambities->gemscore; ?>;
             ambities.push(
                 {   y:         <?=$data['lijsten'][0]->ambities->gemscore; ?>,
                     color:     '#000000',
-                    name:      '',
-                    soort:     'ambitie',
-                    versie:    <?=$lijst->periodenummer ?>
+                    name:      ''
+
                 }
             );
 
@@ -83,11 +90,7 @@
             var legescore ={
                 y           : 0,
                 color       : 'transparent',
-                name        : '0',
-                soort       : 'extra',
-                versie      : '',
-                vantm       : '<?= $lijst->vantm ?>',
-                omschrijving: ''
+                name        : '0'
             };
 
             scores.unshift(legescore);
@@ -112,7 +115,6 @@
             var extralijn = {
                 y: ambitiewaarde,
                 name: '',
-                soort: 'extra'
             };
             ambities.unshift(extralijn);
             ambities.push(extralijn);
@@ -142,7 +144,16 @@
             var ijkgrafiek;
             ijkgrafiek = Highcharts.chart('chartSopIJk', {
                 chart:{
-                    animation: false
+                    animation: false,
+                    type: 'column',
+                    backgroundColor: 'transparent',
+                    options3d: {
+                        enabled: true,
+                        alpha: 15,
+                        beta: 15,
+                        depth: 50,
+                        viewDistance: 25
+                    }
                 },
                 title:{
                     text:''
@@ -185,7 +196,7 @@
                             enabled: true,
                             inside: true,
                             align: 'center',
-                            verticalAlign: 'bottom',
+                            verticalAlign: 'top',
                             color: '#404040',
                             style: {
                                 textOutline: false
diff --git a/public/css/monpas/main.css b/public/css/monpas/main.css
index a8b3cd2..cdf59d1 100644
--- a/public/css/monpas/main.css
+++ b/public/css/monpas/main.css
@@ -930,7 +930,6 @@ tr.selected, td.selected{
 	background-color: #c7b87e;
 	color: #ffffff;
 }*/
-
 .cirkelgradient{
 	background-color: #930f50;
 
@@ -1279,5 +1278,3 @@ z-index: 50;
 	box-shadow: none;
 
 }
-
-
diff --git a/public/js/monpas/models/compactsopmodel.js b/public/js/monpas/models/compactsopmodel.js
index e656c1f..7e4ae4b 100644
--- a/public/js/monpas/models/compactsopmodel.js
+++ b/public/js/monpas/models/compactsopmodel.js
@@ -576,9 +576,10 @@ mh.initCompactSopModel = function(){
             var self        = mh.CompactSopModel;           
             var onderdeel   = data;
             var dit         = this;
+
             
-            if (dit.naam) {
-                self.selectedBudgetVersie(this);
+            if (dit.kalenderjaar()) {
+                self.selectedBudgetVersie(dit.kalenderjaar());
             }
             return true;
         },
@@ -645,8 +646,9 @@ mh.initCompactSopModel = function(){
             }
 
             if(self.selectedBudgetVersie()){
-                self.selectedOnderdeel().gekozenVersie(self.selectedBudgetVersie().kalenderjaar());
+                self.selectedOnderdeel().gekozenVersie(self.selectedBudgetVersie());
             }
+
             self.fOnderdelenInArray();
             return true;
         },
@@ -881,6 +883,7 @@ mh.initCompactSopModel = function(){
 
             };
 
+
             $.post("index.php/monpas/compactsop/maakPDF/", submitData, function(result){
 
                 window.open('tmp/temp' + result + '.html');
diff --git a/public/js/monpas/models/ijkpuntenmodel.js b/public/js/monpas/models/ijkpuntenmodel.js
index 9db91d7..1fa7b63 100644
--- a/public/js/monpas/models/ijkpuntenmodel.js
+++ b/public/js/monpas/models/ijkpuntenmodel.js
@@ -671,7 +671,7 @@ ls.initIJkpuntenModel = function(){
                         }
 
                            labels.push(g.nummer);
-                           scores.push({ y           : parseFloat(g.gem),
+                           scores.push({ y           : Number(g.gem) == 0 ? null: Number(g.gem) ,
                                          color       : g.kleur,
                                          name        : g.nummer });
 
@@ -683,10 +683,6 @@ ls.initIJkpuntenModel = function(){
                                     y: ambitiewaarde,
                                     color: '#000000',
                                     name: '',
-                                    soort: 'ambitie',
-                                    versie: l.periodenummer,
-                                    vantm: l.vantm,
-                                    omschrijving: g.omschrijving
                                 }
                             );
                         });
@@ -695,10 +691,6 @@ ls.initIJkpuntenModel = function(){
                             y           : null,
                             color       : 'transparent',
                             name        : '0',
-                            soort       : 'extra',
-                            versie      : l.periodenummer,
-                            vantm       : l.vantm,
-                            omschrijving: ''
 
                         };
 
@@ -721,7 +713,6 @@ ls.initIJkpuntenModel = function(){
                         var extralijn = {
                             y: ambitiewaarde,
                             name: '',
-                            soort: 'extra'
                         };
                         ambities.unshift(extralijn);
                         ambities.push(extralijn);
@@ -741,6 +732,29 @@ ls.initIJkpuntenModel = function(){
 
 
 			    self.ijkgrafiek = Highcharts.chart('hc-chart1', {
+                chart: {
+                    type: 'column',
+                    options3d: {
+                        enabled: true,
+                        alpha: 20,
+                        beta: 20,
+                        viewDistance: 40,
+                        depth: 75,
+                        frame: {
+                            left: {
+                                color:'#f8f8f8'
+                            },
+                            bottom: {
+                                color:'#d9d9d9',
+                                visible: 'auto'
+                            },
+                            back: {
+                                color:'#f8f8f8'
+                            },
+                        }
+                    }
+                },
+
                 title: {
                     text: ''
                 },
@@ -765,6 +779,7 @@ ls.initIJkpuntenModel = function(){
                 xAxis: {
                     type: 'category',
                     categories: xas,
+                    skew3d: true,
                     title:{
                         text: xastitel
                     }
@@ -772,6 +787,7 @@ ls.initIJkpuntenModel = function(){
                 yAxis: {
                     min:0,
                     max: 100,
+                    skew3d: true,
                     title: {
                         text: 'Scores'
                     }
diff --git a/public/js/monpas/models/inspectiematrixmodel.js b/public/js/monpas/models/inspectiematrixmodel.js
index 6c87c4e..ed97907 100644
--- a/public/js/monpas/models/inspectiematrixmodel.js
+++ b/public/js/monpas/models/inspectiematrixmodel.js
@@ -1,422 +1,418 @@
 $(function(){
+    //instrument verwijderd feb '22
 
-    function fAddSWV(p) {
-        var dit      = this;
-        this.id      = p.id;
-        this.soort   = p.soort
-        this.naam    = p.naam
-        this.plaats  = p.plaats
-        this.geopend = ko.observable(false);
-        dit.kamers   = ko.observableArray([]);
-        if (p.kamers) {
-            $.each(p.kamers, function (j, k) {
-                dit.kamers.push(new fAddKamer(k));
-            })
-        }
-    }
+    // function fAddSWV(p) {
+    //     var dit      = this;
+    //     this.id      = p.id;
+    //     this.soort   = p.soort
+    //     this.naam    = p.naam
+    //     this.plaats  = p.plaats
+    //     this.geopend = ko.observable(false);
+    //     dit.kamers   = ko.observableArray([]);
+    //     if (p.kamers) {
+    //         $.each(p.kamers, function (j, k) {
+    //             dit.kamers.push(new fAddKamer(k));
+    //         })
+    //     }
+    // }
 
-    function fAddKamer(p) {
-        var dit      = this;
-        this.id      = p.id;
-        this.soort   = p.soort
-        this.naam    = p.naam
-        this.plaats  = p.plaats
-        this.geopend = ko.observable(false);
-        this.bgs     = ko.observableArray([]);
+    // function fAddKamer(p) {
+    //     var dit      = this;
+    //     this.id      = p.id;
+    //     this.soort   = p.soort
+    //     this.naam    = p.naam
+    //     this.plaats  = p.plaats
+    //     this.geopend = ko.observable(false);
+    //     this.bgs     = ko.observableArray([]);
+    //
+    //     if (p.bgs) {
+    //         $.each(p.bgs, function (x, z) {
+    //             dit.bgs.push(new fAddBG(z));
+    //         })
+    //     }
+    // }
 
-        if (p.bgs) {
-            $.each(p.bgs, function (x, z) {
-                dit.bgs.push(new fAddBG(z));
-            })
-        }
-    }
+    // function fAddBG(p) {
+    //     var dit      = this;
+    //     this.id      = p.id;
+    //     this.soort   = p.soort
+    //     this.naam    = p.naam
+    //     this.plaats  = p.plaats
+    //     this.geopend = ko.observable(false);
+    //     this.scholen = ko.observableArray([]);
+    //     if (p.scholen) {
+    //         $.each(p.scholen, function (a, b) {
+    //             dit.scholen.push(new fAddSchool(b));
+    //         })
+    //     }
+    // }
 
-    function fAddBG(p) {
-        var dit      = this;
-        this.id      = p.id;
-        this.soort   = p.soort
-        this.naam    = p.naam
-        this.plaats  = p.plaats
-        this.geopend = ko.observable(false);
-        this.scholen = ko.observableArray([]);
-        if (p.scholen) {
-            $.each(p.scholen, function (a, b) {
-                dit.scholen.push(new fAddSchool(b));
-            })
-        }
-    }
+    // function fAddSchool(p) {
+    //     var dit     = this;
+    //     this.id     = p.id;
+    //     this.soort  = p.soort
+    //     this.naam   = p.naam
+    //     this.brin   = p.brin
+    //     this.plaats = p.plaats
+    // }
 
-    function fAddSchool(p) {
-        var dit     = this;
-        this.id     = p.id;
-        this.soort  = p.soort
-        this.naam   = p.naam
-        this.brin   = p.brin
-        this.plaats = p.plaats
-    }
+    // function fAddOrgversion(p) {
+    //     this.id            = p.id; //orgversion id
+    //     this.periodenummer = p.periodenummer
+    //     this.versie_id     = p.versie_id
+    //     this.naam          = p.naam
+    //     this.geldigvanaf   = p.geldigvanaf;
+    //     this.geldigtm      = p.geldigtm;
+    //     this.invullentm    = p.invullentm;
+    //     this.info		   = ko.computed(function(){
+    //                         var versieInfostr=this.naam;
+    //                         versieInfostr += "- periode " + this.periodenummer +
+    //                             ", " + this.geldigvanaf + " t/m " + this.geldigtm;
+    //                         return versieInfostr;
+    //                         }
+    //                         ,this)
+    // }
 
-    function fAddOrgversion(p) {
-        this.id            = p.id; //orgversion id
-        this.periodenummer = p.periodenummer
-        this.versie_id     = p.versie_id
-        this.naam          = p.naam
-        this.geldigvanaf   = p.geldigvanaf;
-        this.geldigtm      = p.geldigtm;
-        this.invullentm    = p.invullentm;
-        this.info		   = ko.computed(function(){
-                            var versieInfostr=this.naam;
-                            versieInfostr += "- periode " + this.periodenummer +
-                                ", " + this.geldigvanaf + " t/m " + this.geldigtm;
-                            return versieInfostr;
-                            }
-                            ,this)
-    }
+    // function fAddIndeling(p) {
+    //     var dit = this;
+    //     this.id 		  = p.waardeid;
+    //     this.naam 		  = p.naam
+    //     this.volgorde     = p.volgorde;
+    //     this.organisaties = ko.observableArray([]);
+    //     if (p.users) {
+    //         $.each(p.users, function (j, k) {
+    //             dit.organisaties.push(new fAddOrgIndeling(k));
+    //         })
+    //     }
+    // }
 
-    function fAddIndeling(p) {
-        var dit = this;
-        this.id 		  = p.waardeid;
-        this.naam 		  = p.naam
-        this.volgorde     = p.volgorde;
-        this.organisaties = ko.observableArray([]);
-        if (p.users) {
-            $.each(p.users, function (j, k) {
-                dit.organisaties.push(new fAddOrgIndeling(k));
-            })
-        }
-    }
+    // function fAddOrgIndeling(k) {
+    //     var dit          = this;
+    //     this.subject     = k.fullname;
+    //     this.naamkort    = k.naamkort;
+    //     this.brin        = '';
+    //     if (k.brin) this.brin = k.brin;
+    //     this.fvid        = k.filledversionid;
+    //
+    //     this.results     = ko.observableArray([]);
+    //     if (k.oordelen) {
+    //         $.each(k.oordelen, function (j, k) {
+    //             dit.results.push(new fAddResult(k));
+    //         })
+    //     }
+    // }
 
-    function fAddOrgIndeling(k) {
-        var dit          = this;
-        this.subject     = k.fullname;
-        this.naamkort    = k.naamkort;
-        this.brin        = '';
-        if (k.brin) this.brin = k.brin;
-        this.fvid        = k.filledversionid;
+    // function fAddIJkpunt(p) {
+    //     this.nummer       = p.nummer;
+    //     this.omschrijving = p.omschrijving;
+    //     this.toelichting  = p.toelichting;
+    // }
 
-        this.results     = ko.observableArray([]);
-        if (k.oordelen) {
-            $.each(k.oordelen, function (j, k) {
-                dit.results.push(new fAddResult(k));
-            })
-        }
-    }
-
-    function fAddIJkpunt(p) {
-        this.nummer       = p.nummer;
-        this.omschrijving = p.omschrijving;
-        this.toelichting  = p.toelichting;
-    }
-
-    function fAddResult(k) {
-
-        var dit          = this;
-        this.num         = k.nummer;
-        this.normId      = k.normID;
-        this.kleur       = k.kleur;
-        this.waarde      = ko.observable("N");
-        switch(dit.normId){
-            case "1"    : dit.waarde("Z"); break;
-            case "2"    : dit.waarde("O"); break;
-            case "3"    : dit.waarde("V"); break;
-            case "4"    : dit.waarde ("G"); break;
-        }
-    }
-
-    function fAddCriteria(c) {
-        var dit          = this;
-        this.criteriumid = ko.observable(c.id);
-        this.naam        = ko.observable(c.naam);
-    }
+    // function fAddResult(k) {
+    //
+    //     var dit          = this;
+    //     this.num         = k.nummer;
+    //     this.normId      = k.normID;
+    //     this.kleur       = k.kleur;
+    //     this.waarde      = ko.observable("N");
+    //     switch(dit.normId){
+    //         case "1"    : dit.waarde("Z"); break;
+    //         case "2"    : dit.waarde("O"); break;
+    //         case "3"    : dit.waarde("V"); break;
+    //         case "4"    : dit.waarde ("G"); break;
+    //     }
+    // }
 
 
 
-    ls.initInspectiematrixModel = function(){
-        if (ls.InspectiematrixModel !== undefined){
-            ls.InspectiematrixModel.initModel();
-        }
-        else {
-            ls.InspectiematrixModel = {
-                bgs                 : ko.observableArray([]),
-                ijkpunten           : ko.observableArray([]),
-                toporg              : ko.observableArray([]),
-                kleuren             : ko.observableArray([]),
-                criteria            : ko.observableArray([]),
-                indelingen          : ko.observableArray([]),
-                selectedOrg         : ko.observable(''),
-                orgsoort            : ko.observable(1),
-                orgversions         : ko.observableArray([]),
-                selectedOrgversion  : ko.observable(),
-                selectedCriterium   : ko.observable(0),
-                versievorm          : ko.observable(),
-                inzage              : ko.observable(),
-                kleurlegenda        : ko.observable(''),
-                invulid             : ko.observable(''),
-                bezig               : ko.observable(false),
-                druk                : ko.observable(false),
-                aantalY             : ko.observable(0),
-                data                : ko.observable(false),
-                kolombreedte        : ko.pureComputed(function(){
-                                      var row = 708;
-                                      var orgbreedte = 250
-                                      var aantal = 15;
-                                      if(ls.InspectiematrixModel.aantalY()> 1)  {
-                                          aantal = ls.InspectiematrixModel.aantalY();
-                                      }
-                                      var breedte = Math.floor((row - orgbreedte)/aantal);
-                                      return breedte;
-                }),
 
-
-                orgbreedtehead    : ko.pureComputed(function(){
-                                        var aantal = 15;
-                                        if(ls.InspectiematrixModel.aantalY()> 1)  {
-                                            aantal = ls.InspectiematrixModel.aantalY();
-                                        }
-                                      orgpassend = Math.floor(708 - (aantal * ls.InspectiematrixModel.kolombreedte()))
-                                      return orgpassend;
-                }),
-
-                orgbreedtebody       : ko.pureComputed(function(){
-                                        var aantal = 15;
-                                        if(ls.InspectiematrixModel.aantalY()> 1)  {
-                                            aantal = ls.InspectiematrixModel.aantalY();
-                                        }
-                                        var orgpassend = Math.floor(708- (aantal * ls.InspectiematrixModel.kolombreedte()))
-                                        return orgpassend;
-                }),
-
-                initBindings :function(){
-                    var self = ls.InspectiematrixModel;
-                    if (!ko.dataFor(document.getElementById('paginspectiematrix')) ) {
-                        ko.applyBindings(ls.InspectiematrixModel, document.getElementById("paginspectiematrix"));
-                    }
-                    self.initModel();
-                },
-                initModel: function(){
-                    var self = ls.InspectiematrixModel;
-                    self.toporg('');
-                    self.fCheckInzageRecht();
-                    $.post("index.php/monpas/rapijkpunten/getorgs", function (data) {
-                        if (data.organisatie) {
-                            self.orgsoort(data.soort);
-                            switch (self.orgsoort()) {
-                                case 1:
-                                    self.toporg(new fAddSWV(data.organisatie));
-                                    break;
-                                case 2:
-                                    self.toporg(new fAddKamer(data.organisatie));
-                                    break;
-                                case 3:
-                                    self.toporg(new fAddBG(data.organisatie));
-                                    break;
-                                case 4:
-                                    self.toporg(new fAddSchool(data.organisatie));
-                                    break;
-                            }
-                            self.selectedOrg(self.toporg());
-
-                            self.fSwitchLevel();
-                        }
-                    }, 'json');
-
-                },
-                fToggleGeopend: function () {
-                    this.geopend(!this.geopend());
-                },
-
-                fCheckInzageRecht: function () {
-                    var self = ls.InspectiematrixModel;
-                    $.post("index.php/monpas/rapmatrix/checkinzage/", function (data) {
-                        if (data) {
-                            self.inzage(data);
-                        }
-                    }, 'json');
-                },
-
-                fCheckOwner: function () {
-                    var self = ls.InspectiematrixModel;
-                    var submitData = {
-                        "orgversieid": self.selectedOrgversion().id,
-                        "orgid": self.selectedOrg().id,
-                    }
-
-                    $.post("index.php/monpas/rapmatrix/checkowner/", submitData, function (data) {
-                        if (data) {
-                            self.invulid(parseInt(data));
-                        }
-                    }, 'json');
-                },
-
-                fSwitchOrg: function () {
-                    var self = ls.InspectiematrixModel;
-                    if (self.selectedOrg() == undefined) return;
-                    if (this.id == self.selectedOrg().id) return;
-                    self.selectedOrg(this);
-                    self.fSwitchLevel();
-                },
-                fSwitchLevel: function () {
-                    var self = ls.InspectiematrixModel;
-                    if (self.selectedOrg() == undefined) return;
-
-                    var versieid = null;
-                    if(self.selectedOrgversion() != undefined ) {
-                        versieid = self.selectedOrgversion().id;
-                    }
-
-
-                    $.post("index.php/monpas/rapijkpunten/getperiodes3/" + self.selectedOrg().id, function (data) {
-                        self.bezig(true);
-                        self.orgversions.removeAll();
-                        if (data) {
-                            $.each(data, function (i, p) {
-                                self.orgversions.push(new fAddOrgversion(p));
-                            })
-                            if(versieid != null ){
-                                $.each(self.orgversions(), function (i, q) {
-                                    if (q.id == versieid) {
-                                        self.selectedOrgversion(q);
-                                        return false;
-                                    }
-                                });
-                            }
-                            if(self.toporg().soort == 4) {
-                                self.bezig(false);
-                                self.fChangeVersion2();
-                            }
-                            else {
-                                self.fGetCriteria();
-                            }
-
-
-                        }
-                    }, 'json')
-                        .always(self.bezig(false));
-                },
-                fChangeVersion2: function () {
-                    var self = ls.InspectiematrixModel;
-                    if (self.selectedOrgversion() == undefined) return;
-                    if (self.bezig()) return;
-
-                    self.fHaalScoresOp();
-                },
-
-                    fHaalScoresOp: function(){
-                        var self = ls.InspectiematrixModel;
-                        if(self.druk()) return;
-                        var sorteerid = 0;
-                        if(self.selectedCriterium())
-                        {
-                            sorteerid = self.selectedCriterium().criteriumid();
-                        }
-
-
-
-                        var submitData = {
-                            'orgid'       : self.selectedOrg().id,
-                            'orgsoort'    : self.selectedOrg().soort,
-                            'criteriumid' : sorteerid,
-                            'orgversieid' : self.selectedOrgversion().id,
-                        }
-
-                    // showAjaxLoader();
-
-                    $.post("index.php/monpas/rapmatrix/haalInspectieScoresOp", submitData, function (results) {
-                        self.indelingen.removeAll();
-                        self.ijkpunten.removeAll();
-                        if (results) {
-                          self.fCheckOwner();
-                          self.aantalY(results.aantalY);
-                          self.data(results.uitslagen);
-                            self.kleurlegenda(results.kleurtabel);
-                            $.each(results.ijkpunten, function (i, p){
-                                self.ijkpunten.push(new fAddIJkpunt(p));
-                            }); // each
-
-                            $.each(results.labels, function (i, p) {
-                            self.indelingen.push(new fAddIndeling(p));
-                            }); // each
-
-
-                        };
-                        // if results
-
-                    }, 'json');
-                    // hideAjaxLoader();
-                },
-
-                fGetCriteria: function(){
-                    var self = ls.InspectiematrixModel;
-                    var submitData ={
-                        'orgid'    : self.selectedOrg().id,
-                        'orgsoort' : self.selectedOrg().soort
-                    }
-
-                    $.post("index.php/monpas/rapmatrix/getCriteriaSWV", submitData, function(results) {
-                        self.druk(true);
-                        self.criteria.removeAll();
-                        if (results) {
-                            $.each(results, function (i, c) {
-                                self.criteria.push(new fAddCriteria(c));
-                                if (c.id == 1000) {
-                                    self.selectedCriterium(c.id);
-                                    return false;
-                                }
-                            }); // each
-                        }
-
-                        self.druk(false);
-                        self.fChangeCriterium();
-                    },'json')
-                        .always(self.druk(false), self.bezig(false));
-                },
-
-                fChangeCriterium: function(){
-                    var self = ls.InspectiematrixModel;
-                    if (self.selectedOrgversion() == undefined) return;
-                    if (self.druk() ) return;
-                    self.fHaalScoresOp();
-                },
-
-                fToonToelichting: function () {
-                    var self = ls.InspectiematrixModel;
-                    var dit = this;
-                    apprise("Toelichting bij ijkpunt " + dit.nummer + ":<br/><i>" + dit.omschrijving + "</i><br/><hr/> " + dit.toelichting);
-                },
-
-                fPrint:function(){
-                    var self =ls.InspectiematrixModel;
-                    // if (self.bezig()) return;
-                    // self.bezig(true);
-
-                    var criterium= null;
-                    if(self.selectedCriterium()){
-                        criterium = self.selectedCriterium().naam();
-                    }
-                    var indelingen = ko.toJSON(self.indelingen());
-                    var ijkpunten = ko.toJSON(self.ijkpunten);
-                    var data ={
-                        'orgversie'	    : self.selectedOrgversion(),
-                        'organisatie'   : self.selectedOrg(),
-                        'indelingen'	: indelingen,
-                        'ijkpunten'		: ijkpunten,
-                        'criterium'     : criterium,
-                        'kopbreedte'    : self.orgbreedtehead()+"px",
-                        'orgbreedte'    : self.orgbreedtebody()+"px",
-                        'kolombreedte'  : self.kolombreedte()+"px",
-                        'uitslagen'     : self.data(),
-                        'invulid'       : self.invulid(),
-                        'inzage'        : self.inzage(),
-                        'kleurlegenda'  : self.kleurlegenda(),
-                    }
-
-                    data=JSON.stringify(data);
-                    var $form = $("<form method='post' action='index.php/monpas/rapmatrix/printinspectie' target='_blank'>").append($('<input type = "hidden" name="data" id ="data">').val(data) );
-                    $form.appendTo("body").submit();
-                }
-
-            } ; // definition van model
-            ls.InspectiematrixModel.initBindings();
-
-        }; // else
-    }// function initInspectieInspectiematrixModel
+    // ls.initInspectiematrixModel = function(){
+    //     if (ls.InspectiematrixModel !== undefined){
+    //         ls.InspectiematrixModel.initModel();
+    //     }
+    //     else {
+    //         ls.InspectiematrixModel = {
+    //             bgs                 : ko.observableArray([]),
+    //             ijkpunten           : ko.observableArray([]),
+    //             toporg              : ko.observableArray([]),
+    //             kleuren             : ko.observableArray([]),
+    //             criteria            : ko.observableArray([]),
+    //             indelingen          : ko.observableArray([]),
+    //             selectedOrg         : ko.observable(''),
+    //             orgsoort            : ko.observable(1),
+    //             orgversions         : ko.observableArray([]),
+    //             selectedOrgversion  : ko.observable(),
+    //             selectedCriterium   : ko.observable(0),
+    //             versievorm          : ko.observable(),
+    //             inzage              : ko.observable(),
+    //             kleurlegenda        : ko.observable(''),
+    //             invulid             : ko.observable(''),
+    //             bezig               : ko.observable(false),
+    //             druk                : ko.observable(false),
+    //             aantalY             : ko.observable(0),
+    //             data                : ko.observable(false),
+    //             kolombreedte        : ko.pureComputed(function(){
+    //                                   var row = 708;
+    //                                   var orgbreedte = 250
+    //                                   var aantal = 15;
+    //                                   if(ls.InspectiematrixModel.aantalY()> 1)  {
+    //                                       aantal = ls.InspectiematrixModel.aantalY();
+    //                                   }
+    //                                   var breedte = Math.floor((row - orgbreedte)/aantal);
+    //                                   return breedte;
+    //             }),
+    //
+    //
+    //             orgbreedtehead    : ko.pureComputed(function(){
+    //                                     var aantal = 15;
+    //                                     if(ls.InspectiematrixModel.aantalY()> 1)  {
+    //                                         aantal = ls.InspectiematrixModel.aantalY();
+    //                                     }
+    //                                   orgpassend = Math.floor(708 - (aantal * ls.InspectiematrixModel.kolombreedte()))
+    //                                   return orgpassend;
+    //             }),
+    //
+    //             orgbreedtebody       : ko.pureComputed(function(){
+    //                                     var aantal = 15;
+    //                                     if(ls.InspectiematrixModel.aantalY()> 1)  {
+    //                                         aantal = ls.InspectiematrixModel.aantalY();
+    //                                     }
+    //                                     var orgpassend = Math.floor(708- (aantal * ls.InspectiematrixModel.kolombreedte()))
+    //                                     return orgpassend;
+    //             }),
+    //
+    //             initBindings :function(){
+    //                 var self = ls.InspectiematrixModel;
+    //                 if (!ko.dataFor(document.getElementById('paginspectiematrix')) ) {
+    //                     ko.applyBindings(ls.InspectiematrixModel, document.getElementById("paginspectiematrix"));
+    //                 }
+    //                 self.initModel();
+    //             },
+    //             initModel: function(){
+    //                 var self = ls.InspectiematrixModel;
+    //                 self.toporg('');
+    //                 self.fCheckInzageRecht();
+    //                 $.post("index.php/monpas/rapijkpunten/getorgs", function (data) {
+    //                     if (data.organisatie) {
+    //                         self.orgsoort(data.soort);
+    //                         switch (self.orgsoort()) {
+    //                             case 1:
+    //                                 self.toporg(new fAddSWV(data.organisatie));
+    //                                 break;
+    //                             case 2:
+    //                                 self.toporg(new fAddKamer(data.organisatie));
+    //                                 break;
+    //                             case 3:
+    //                                 self.toporg(new fAddBG(data.organisatie));
+    //                                 break;
+    //                             case 4:
+    //                                 self.toporg(new fAddSchool(data.organisatie));
+    //                                 break;
+    //                         }
+    //                         self.selectedOrg(self.toporg());
+    //
+    //                         self.fSwitchLevel();
+    //                     }
+    //                 }, 'json');
+    //
+    //             },
+    //             fToggleGeopend: function () {
+    //                 this.geopend(!this.geopend());
+    //             },
+    //
+    //             fCheckInzageRecht: function () {
+    //                 var self = ls.InspectiematrixModel;
+    //                 $.post("index.php/monpas/rapmatrix/checkinzage/", function (data) {
+    //                     if (data) {
+    //                         self.inzage(data);
+    //                     }
+    //                 }, 'json');
+    //             },
+    //
+    //             fCheckOwner: function () {
+    //                 var self = ls.InspectiematrixModel;
+    //                 var submitData = {
+    //                     "orgversieid": self.selectedOrgversion().id,
+    //                     "orgid": self.selectedOrg().id,
+    //                 }
+    //
+    //                 $.post("index.php/monpas/rapmatrix/checkowner/", submitData, function (data) {
+    //                     if (data) {
+    //                         self.invulid(parseInt(data));
+    //                     }
+    //                 }, 'json');
+    //             },
+    //
+    //             fSwitchOrg: function () {
+    //                 var self = ls.InspectiematrixModel;
+    //                 if (self.selectedOrg() == undefined) return;
+    //                 if (this.id == self.selectedOrg().id) return;
+    //                 self.selectedOrg(this);
+    //                 self.fSwitchLevel();
+    //             },
+    //             fSwitchLevel: function () {
+    //                 var self = ls.InspectiematrixModel;
+    //                 if (self.selectedOrg() == undefined) return;
+    //
+    //                 var versieid = null;
+    //                 if(self.selectedOrgversion() != undefined ) {
+    //                     versieid = self.selectedOrgversion().id;
+    //                 }
+    //
+    //
+    //                 $.post("index.php/monpas/rapijkpunten/getperiodes3/" + self.selectedOrg().id, function (data) {
+    //                     self.bezig(true);
+    //                     self.orgversions.removeAll();
+    //                     if (data) {
+    //                         $.each(data, function (i, p) {
+    //                             self.orgversions.push(new fAddOrgversion(p));
+    //                         })
+    //                         if(versieid != null ){
+    //                             $.each(self.orgversions(), function (i, q) {
+    //                                 if (q.id == versieid) {
+    //                                     self.selectedOrgversion(q);
+    //                                     return false;
+    //                                 }
+    //                             });
+    //                         }
+    //                         if(self.toporg().soort == 4) {
+    //                             self.bezig(false);
+    //                             self.fChangeVersion2();
+    //                         }
+    //                         else {
+    //                             self.fGetCriteria();
+    //                         }
+    //
+    //
+    //                     }
+    //                 }, 'json')
+    //                     .always(self.bezig(false));
+    //             },
+    //             fChangeVersion2: function () {
+    //                 var self = ls.InspectiematrixModel;
+    //                 if (self.selectedOrgversion() == undefined) return;
+    //                 if (self.bezig()) return;
+    //
+    //                 self.fHaalScoresOp();
+    //             },
+    //
+    //                 fHaalScoresOp: function(){
+    //                     var self = ls.InspectiematrixModel;
+    //                     if(self.druk()) return;
+    //                     var sorteerid = 0;
+    //                     if(self.selectedCriterium())
+    //                     {
+    //                         sorteerid = self.selectedCriterium().criteriumid();
+    //                     }
+    //
+    //
+    //
+    //                     var submitData = {
+    //                         'orgid'       : self.selectedOrg().id,
+    //                         'orgsoort'    : self.selectedOrg().soort,
+    //                         'criteriumid' : sorteerid,
+    //                         'orgversieid' : self.selectedOrgversion().id,
+    //                     }
+    //
+    //                 // showAjaxLoader();
+    //
+    //                 $.post("index.php/monpas/rapmatrix/haalInspectieScoresOp", submitData, function (results) {
+    //                     self.indelingen.removeAll();
+    //                     self.ijkpunten.removeAll();
+    //                     if (results) {
+    //                       self.fCheckOwner();
+    //                       self.aantalY(results.aantalY);
+    //                       self.data(results.uitslagen);
+    //                         self.kleurlegenda(results.kleurtabel);
+    //                         $.each(results.ijkpunten, function (i, p){
+    //                             self.ijkpunten.push(new fAddIJkpunt(p));
+    //                         }); // each
+    //
+    //                         $.each(results.labels, function (i, p) {
+    //                         self.indelingen.push(new fAddIndeling(p));
+    //                         }); // each
+    //
+    //
+    //                     };
+    //                     // if results
+    //
+    //                 }, 'json');
+    //                 // hideAjaxLoader();
+    //             },
+    //
+    //             fGetCriteria: function(){
+    //                 var self = ls.InspectiematrixModel;
+    //                 var submitData ={
+    //                     'orgid'    : self.selectedOrg().id,
+    //                     'orgsoort' : self.selectedOrg().soort
+    //                 }
+    //
+    //                 $.post("index.php/monpas/rapmatrix/getCriteriaSWV", submitData, function(results) {
+    //                     self.druk(true);
+    //                     self.criteria.removeAll();
+    //                     if (results) {
+    //                         $.each(results, function (i, c) {
+    //                             self.criteria.push(new fAddCriteria(c));
+    //                             if (c.id == 1000) {
+    //                                 self.selectedCriterium(c.id);
+    //                                 return false;
+    //                             }
+    //                         }); // each
+    //                     }
+    //
+    //                     self.druk(false);
+    //                     self.fChangeCriterium();
+    //                 },'json')
+    //                     .always(self.druk(false), self.bezig(false));
+    //             },
+    //
+    //             fChangeCriterium: function(){
+    //                 var self = ls.InspectiematrixModel;
+    //                 if (self.selectedOrgversion() == undefined) return;
+    //                 if (self.druk() ) return;
+    //                 self.fHaalScoresOp();
+    //             },
+    //
+    //             fToonToelichting: function () {
+    //                 var self = ls.InspectiematrixModel;
+    //                 var dit = this;
+    //                 apprise("Toelichting bij ijkpunt " + dit.nummer + ":<br/><i>" + dit.omschrijving + "</i><br/><hr/> " + dit.toelichting);
+    //             },
+    //
+    //             fPrint:function(){
+    //                 var self =ls.InspectiematrixModel;
+    //                 // if (self.bezig()) return;
+    //                 // self.bezig(true);
+    //
+    //                 var criterium= null;
+    //                 if(self.selectedCriterium()){
+    //                     criterium = self.selectedCriterium().naam();
+    //                 }
+    //                 var indelingen = ko.toJSON(self.indelingen());
+    //                 var ijkpunten = ko.toJSON(self.ijkpunten);
+    //                 var data ={
+    //                     'orgversie'	    : self.selectedOrgversion(),
+    //                     'organisatie'   : self.selectedOrg(),
+    //                     'indelingen'	: indelingen,
+    //                     'ijkpunten'		: ijkpunten,
+    //                     'criterium'     : criterium,
+    //                     'kopbreedte'    : self.orgbreedtehead()+"px",
+    //                     'orgbreedte'    : self.orgbreedtebody()+"px",
+    //                     'kolombreedte'  : self.kolombreedte()+"px",
+    //                     'uitslagen'     : self.data(),
+    //                     'invulid'       : self.invulid(),
+    //                     'inzage'        : self.inzage(),
+    //                     'kleurlegenda'  : self.kleurlegenda(),
+    //                 }
+    //
+    //                 data=JSON.stringify(data);
+    //                 var $form = $("<form method='post' action='index.php/monpas/rapmatrix/printinspectie' target='_blank'>").append($('<input type = "hidden" name="data" id ="data">').val(data) );
+    //                 $form.appendTo("body").submit();
+    //             }
+    //
+    //         } ; // definition van model
+    //         ls.InspectiematrixModel.initBindings();
+    //
+    //     }; // else
+    // }// function initInspectieInspectiematrixModel
 });
\ No newline at end of file
diff --git a/public/js/monpas/models/mondiv/diversiteitsmodel.js b/public/js/monpas/models/mondiv/diversiteitsmodel.js
index 1425bed..f397a95 100644
--- a/public/js/monpas/models/mondiv/diversiteitsmodel.js
+++ b/public/js/monpas/models/mondiv/diversiteitsmodel.js
@@ -281,7 +281,7 @@ ls.initDiversiteitModel = function(module){
 					labels[counter]='school';
 					scores[counter]= self.schoolDQ() === 0? null: Number(self.schoolDQ());
 
-				Highcharts.chart('dqpergroep', {
+				Highcharts.chart('dqpergroepX', {
 					chart: {
 						type: 'column',
 						backgroundColor: '#ffffff',
@@ -414,11 +414,14 @@ ls.initDiversiteitModel = function(module){
 
 			fPrintDiversiteitBar :function(){
 				var self = ls.DiversiteitModel;
-				var base64 = self.BC6.toBase64Image();
+				var svgElem = document.querySelector( "#dqpergroepX" );
+				var svgData = null;
+				if ( svgElem ) svgData = new XMLSerializer().serializeToString( svgElem );
 
-				var data = {	'orgid' :  self.schoolid(),
-							'schooljaarnr': ls.MenuModel.selectedSchooljaar().schooljaarnr,
-							'image' : base64};
+
+				var data = { 'orgid' :  self.schoolid(),
+							 'schooljaarnr': ls.MenuModel.selectedSchooljaar().schooljaarnr,
+							 'graph' : svgData};
 				data=JSON.stringify(data);			
 				 var $form = $("<form method='post' action='index.php/monpas/diversiteit/pdfdiversiteitbar' target='_blank'>").append($('<input type = "hidden" name="data" id ="data">').val(data) );
 				 $form.appendTo("body").submit();
diff --git a/public/js/monpas/models/mondiv/diversiteitssomodel.js b/public/js/monpas/models/mondiv/diversiteitssomodel.js
index 36e298e..fa8e24d 100644
--- a/public/js/monpas/models/mondiv/diversiteitssomodel.js
+++ b/public/js/monpas/models/mondiv/diversiteitssomodel.js
@@ -279,7 +279,7 @@ mh.initDiversiteitSOModel = function(){
 				// var aantalgroepen = self.groepen().length + 1;
 				// var bartussenruimte = (580 - (80 * aantalgroepen))/aantalgroepen ;
 				// if (bartussenruimte <=0 ) bartussenruimte = 4;
-				bartussenruimte = 5;
+				// bartussenruimte = 5;
 								
 				$.each(self.groepen(), function(i,p){
 					scores[i] = p.DQ;
@@ -289,78 +289,178 @@ mh.initDiversiteitSOModel = function(){
 				});
 				slabels[counter]='school';
 				scores[counter]=self.schoolDQ();
-				if (self.BC6 ) {self.BC6.destroy(); }
-
 				$("#cdiversiteitso").remove();
-				
-				var canv = document.createElement('canvas');
-				canv.id = 'cdiversiteitso';
-				canv.width = 580;
-				canv.height = 400;
-			  	document.getElementById('diversiteitsocanvasholderso').appendChild(canv);
-	  			//var ctxDiversiteit
-			  	var ctxDiversiteit=$("#cdiversiteitso").get(0).getContext("2d");
+
+				Highcharts.chart('cdiversiteitsoXXX', {
+					chart: {
+					    width: 580,
+						options3d: {
+							enabled: true,
+							alpha: 15,
+							beta: 15,
+							viewDistance: 25,
+							depth: 40
+						}
+					},
+
+					title: {
+						text: 'Diversiteitsquotiënt per groep',
+					},
+					credits: {
+						enabled: false
+					},
+
+					xAxis: {
+						categories: slabels,
+						labels: {
+							skew3d: true,
+							style: {
+								fontSize : '10px',
+							},
+
+						},
+
+					},
+
+					yAxis: {
+						allowDecimals: false,
+						tickInterval: 0.2,
+						min: 0,
+						title: {
+							text   : 'quotiënt',
+							skew3d : true
+
+
+						},
+					},
+
+					plotOptions: {
+						column: {
+							stacking: 'normal',
+							depth: 40,
+							formatter:function(){
+								if(this.y > 0)
+									return this.y;
+							}
+						}
+					},
+					tooltip:{
+						useHTML: true,
+						formatter:function(){
+							if(this.y > 0)
+								return '<span> groep: '+ this.x + '</span><br><span>DQ: '+this.y+'</span></span>'
+						}
+					},
+					legend: {
+						enabled: false,
+					},
+
+					series: [{  type:'column',
+						name: 'DQ',
+						color: '#6F0B3D',
+						data: scores,
+						showInLegend: false}
+					]
+				},);
+
+
+
+				// if (self.BC6 ) {self.BC6.destroy(); }
+
+
+				//
+				// var canv = document.createElement('canvas');
+				// canv.id = 'cdiversiteitso';
+				// canv.width = 580;
+				// canv.height = 400;
+			  	// document.getElementById('diversiteitsocanvasholderso').appendChild(canv);
+	  			// //var ctxDiversiteit
+			  	// var ctxDiversiteit=$("#cdiversiteitso").get(0).getContext("2d");
 			
-				var data7 = {labels :slabels,
-							datasets: [{fillColor: "rgba(147,15,80,0.9)",      									
-            									 strokeColor: "rgba(111,11,61,1)",     
-            									 highlightStroke: "rgba(222,22,123,1)",      						 			
-                                                data: scores},
-							]}
+				// var data7 = {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();
-				        // 137
-				        // this.chart.ctx.moveTo(30, 137);
-				        // this.chart.ctx.lineTo(580, 137);
-				        this.chart.ctx.stroke();
-				        this.chart.ctx.closePath();
-				    }
-				});
+				// 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();
+				//         // 137
+				//         // 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(data7,{
-					  						animation:false,
-					  						scaleFontFamily: "'lato','Arial'",
-					  						scaleColor:"rgba(0,0,0,1)",
-											scaleShowGridLines:true,
-											scaleLineColor:"rgba(0,0,0,1)",
-											scaleOverride: true,
-            						 				scaleBeginAtZero :true,
-            						 				scaleSteps: 6,
-          	   									scaleStepWidth: 0.5,
-          	   				 					scaleStartValue: 0,
-          	   						 			barValueSpacing: bartussenruimte,
-          	   						 			barStrokeWidth:1,
-          	   						 			barDatasetSpacing:2,
-
-          	   						 			toottipFontFamily:"'lato','Arial'",
-          	   						 			showTooltips	: true,
-          	   						 			tooltipTemplate: "<%= label %> : <%= value %>"
-									});
-
-                ctxDiversiteit.stroke();
+				// 	  self.BC6 = new Chart(ctxDiversiteit).LineAlt(data7,{
+				// 	  						animation:false,
+				// 	  						scaleFontFamily: "'lato','Arial'",
+				// 	  						scaleColor:"rgba(0,0,0,1)",
+				// 							scaleShowGridLines:true,
+				// 							scaleLineColor:"rgba(0,0,0,1)",
+				// 							scaleOverride: true,
+            	// 					 				scaleBeginAtZero :true,
+            	// 					 				scaleSteps: 6,
+          	  //  									scaleStepWidth: 0.5,
+          	  //  				 					scaleStartValue: 0,
+          	  //  						 			barValueSpacing: bartussenruimte,
+          	  //  						 			barStrokeWidth:1,
+          	  //  						 			barDatasetSpacing:2,
+				//
+          	  //  						 			toottipFontFamily:"'lato','Arial'",
+          	  //  						 			showTooltips	: true,
+          	  //  						 			tooltipTemplate: "<%= label %> : <%= value %>"
+				// 					});
+				//
+                // ctxDiversiteit.stroke();
 
 			},
 
-			fPrintDiversiteitBar :function(){
-				var self = mh.DiversiteitSOModel;
-				var base64 = self.BC6.toBase64Image();
+            fPrintDiversiteitBar: function () {
+                var self = mh.DiversiteitSOModel;
 
-				var data = {	'orgid' :  self.schoolid(),
-							'schooljaarnr': ls.MenuModel.selectedSchooljaar().schooljaarnr,
-							'image' : base64};
-				data=JSON.stringify(data);			
-				 var $form = $("<form method='post' action='index.php/monpas/diversiteit/pdfdiversiteitbar' target='_blank'>").append($('<input type = "hidden" name="data" id ="data">').val(data) );
-				 $form.appendTo("body").submit();
-			},
+                var svgElem = document.querySelector( "#cdiversiteitsoXXX" );
+                var svgData = null;
+                if ( svgElem ) svgData = new XMLSerializer().serializeToString( svgElem );
+                var bestandsnaam = "Diversiteitsquotient_per_groep";
+
+                var sd = {
+                    'graph'        : svgData,
+                    'orgid'        : self.schoolid(),
+                    'schooljaar' : ls.MenuModel.selectedSchooljaar().naam,
+                    'filenaam'     : bestandsnaam,
+                };
+
+                data = JSON.stringify( sd );
+                var $form = $( "<form method='post' action='index.php/monpas/diversiteit/pdfdiversiteitbar/' target='_blank'>" ).append( $( '<input type = "hidden" name="data" id ="sodiv">' ).val( data ) );
+                $form.appendTo( "body" ).submit();
+
+            },
+
+
+
+
+			// fPrintDiversiteitBar :function(){
+			// 	var self = mh.DiversiteitSOModel;
+			// 	var base64 = self.BC6.toBase64Image();
+			//
+			// 	var data = {	'orgid' :  self.schoolid(),
+			// 				'schooljaarnr': ls.MenuModel.selectedSchooljaar().schooljaarnr,
+			// 				'image' : base64};
+			// 	data=JSON.stringify(data);
+			// 	 var $form = $("<form method='post' action='index.php/monpas/diversiteit/pdfdiversiteitbar' target='_blank'>").append($('<input type = "hidden" name="data" id ="data">').val(data) );
+			// 	 $form.appendTo("body").submit();
+			// },
 
 			fPrintLeerlingaantallen: function(){
 				var self =mh.DiversiteitSOModel;
diff --git a/public/js/monpas/models/mondiv/monitordiversiteitmodel.js b/public/js/monpas/models/mondiv/monitordiversiteitmodel.js
index b040dca..c49c42f 100644
--- a/public/js/monpas/models/mondiv/monitordiversiteitmodel.js
+++ b/public/js/monpas/models/mondiv/monitordiversiteitmodel.js
@@ -227,44 +227,123 @@ ls.initMonDivModel = function(module){
 				var slabels =['B','B⁺','E','E⁺','gem'];
 				if (!self.grandtotals()  || self.grandtotals().llng <=0) return;
 				
-					scores[0]=Math.round((self.grandtotals().cat1 / self.grandtotals().llng) * 100) 
-					scores[1]=Math.round((self.grandtotals().cat2 / self.grandtotals().llng) * 100) 
-					scores[2]=Math.round((self.grandtotals().cat3 / self.grandtotals().llng) * 100) 
-					scores[3]=Math.round((self.grandtotals().cat4 / self.grandtotals().llng) * 100) 
-					scores[4] = Math.round((self.grandtotals().cat234 / self.grandtotals().llng) * 100);
-					
-					if (Gr01 ) {Gr01.destroy(); }			
-					$("#mondiv01").remove();
-				
-					var canv = document.createElement('canvas');
-					canv.id = 'mondiv01';
-					canv.width = 280;
-					canv.height = 185;				
-			  		document.getElementById('holdermondiv01').appendChild(canv);
-			  		var ctxMondiv01=$("#mondiv01").get(0).getContext("2d");
-					var data = {labels : slabels,
-								datasets:[{	label: '',
-										  	fillColor: "rgba(147,15,80,0.9)",      									
-            									 	strokeColor: "rgba(111,11,61,1)",     
-            									 	highlightStroke: "rgba(222,22,123,1)",      						 			
-           										data: scores}]
-							   };
-					  Gr01 = new Chart(ctxMondiv01).Bar(data,{
-					  						animation: true, 
-											scaleShowGridLines:true,
-											scaleLineColor:"rgba(0,0,0,1)",
-											scaleOverride: true,
-            						 				scaleBeginAtZero :true,
-            						 				scaleSteps: 10,     
-          	   									scaleStepWidth: 10,
-          	   				 					scaleStartValue: 0 ,
-          	   						 			barValueSpacing: 10,
-          	   						 			barStrokeWidth:1,
-          	   						 			barDatasetSpacing:2,
-          	   						 			toottipFontFamily:"'lato','Arial'",
- 						 			
-          	   						 			tooltipTemplate: "<%= label %>: <%= datasetLabel[ (label -1)] %> <%= value %>%",
-									});	
+					var scores1 = Number(Math.round((self.grandtotals().cat1 / self.grandtotals().llng) * 100));
+					var scores2 = Number(Math.round((self.grandtotals().cat2 / self.grandtotals().llng) * 100));
+					var scores3  = Number(Math.round((self.grandtotals().cat3 / self.grandtotals().llng) * 100));
+					var scores4 = Number(Math.round((self.grandtotals().cat4 / self.grandtotals().llng) * 100));
+					var scores5 =  Number(Math.round((self.grandtotals().cat234 / self.grandtotals().llng) * 100));
+                    scores1 === 0 ? scores.push(null): scores.push(scores1);
+                    scores2 === 0 ? scores.push(null): scores.push(scores2)
+                    scores3 === 0 ? scores.push(null): scores.push(scores3)
+                    scores4 === 0 ? scores.push(null): scores.push(scores4)
+                    scores5 === 0 ? scores.push(null): scores.push(scores5)
+					console.log(scores, "scores")
+                    console.log(slabels, "labels")
+                Highcharts.chart('mondiv01X', {
+                    chart: {
+                        height: 250,
+                        width: 350,
+                        options3d: {
+                            enabled: true,
+                            alpha: 15,
+                            beta: 15,
+                            viewDistance: 25,
+                            depth: 40
+                        }
+                    },
+
+                    title: {
+                        text: 'totaal percentages en richtlijn',
+                    },
+                    credits: {
+                        enabled: false
+                    },
+
+                    xAxis: {
+                        categories: slabels,
+                        labels: {
+                            skew3d: true,
+                            style: {
+                                fontSize : '10px',
+                            },
+
+                        },
+
+                    },
+
+                    yAxis: {
+                        allowDecimals: false,
+                        min: 0,
+                        title: {
+                            text   : 'percentage',
+                            skew3d : true
+
+
+                        },
+                    },
+
+                    plotOptions: {
+                        column: {
+                            stacking: 'normal',
+                            depth: 40,
+                            formatter:function(){
+                                if(this.y > 0)
+                                    return this.y;
+                            }
+                        }
+                    },
+                    legend: {
+                        enabled: false,
+                    },
+
+                    series: [{  type:'column',
+                                name: 'diversiteit',
+                                color: '#6F0B3D',
+                                data: scores,
+                                showInLegend: false},
+                              { type: 'spline',
+                                name: 'richtlijn',
+                                color: '#A28A29',
+                                data: [85, 10, 3, 2, 15]},
+                            ]
+                                },
+
+                );
+
+
+
+                // if (Gr01 ) {Gr01.destroy(); }
+					// $("#mondiv01").remove();
+                    //
+					// var canv = document.createElement('canvas');
+					// canv.id = 'mondiv01';
+					// canv.width = 280;
+					// canv.height = 185;
+			  		// document.getElementById('holdermondiv01').appendChild(canv);
+			  		// var ctxMondiv01=$("#mondiv01").get(0).getContext("2d");
+					// var data = {labels : slabels,
+					// 			datasets:[{	label: '',
+					// 					  	fillColor: "rgba(147,15,80,0.9)",
+            		// 							 	strokeColor: "rgba(111,11,61,1)",
+            		// 							 	highlightStroke: "rgba(222,22,123,1)",
+           			// 							data: scores}]
+					// 		   };
+					//   Gr01 = new Chart(ctxMondiv01).Bar(data,{
+					//   						animation: true,
+					// 						scaleShowGridLines:true,
+					// 						scaleLineColor:"rgba(0,0,0,1)",
+					// 						scaleOverride: true,
+            		// 				 				scaleBeginAtZero :true,
+            		// 				 				scaleSteps: 10,
+          	   		// 							scaleStepWidth: 10,
+          	   		// 		 					scaleStartValue: 0 ,
+          	   		// 				 			barValueSpacing: 10,
+          	   		// 				 			barStrokeWidth:1,
+          	   		// 				 			barDatasetSpacing:2,
+          	   		// 				 			toottipFontFamily:"'lato','Arial'",
+ 					//
+          	   		// 				 			tooltipTemplate: "<%= label %>: <%= datasetLabel[ (label -1)] %> <%= value %>%",
+					// 				});
 		   
 			},
 			fPrintDiversiteitMonitor :function(){
@@ -275,15 +354,19 @@ ls.initMonDivModel = function(module){
 					bg=ko.toJSON(p);
 					bgs[i]=bg;
 				})
-				var Gr01_64 =  '';
-				if (Gr01 !==undefined) Gr01_64=Gr01.toBase64Image();
-				submitData = {	'bgs' 		: 	bgs,
-								'maxdq' 	: 	ko.toJSON(self.maxdq()),
-								'mindq' 	: 	ko.toJSON(self.mindq()),
-								'maxoov' 	: 	ko.toJSON(self.maxoov()),
-								"grandtotals" :  	ko.toJSON(self.grandtotals()),
-								'schooljaarnr' : 	self.schooljaarnr(),
-								"gr0164"		: Gr01_64
+
+                var svgElem = document.querySelector( "#mondiv01X" );
+                var svgData = null;
+                if ( svgElem ) svgData = new XMLSerializer().serializeToString( svgElem );
+
+
+				submitData = {	'bgs' 		  : bgs,
+								'maxdq' 	  : ko.toJSON(self.maxdq()),
+								'mindq' 	  : ko.toJSON(self.mindq()),
+								'maxoov' 	  : ko.toJSON(self.maxoov()),
+								"grandtotals" : ko.toJSON(self.grandtotals()),
+								'schooljaarnr': self.schooljaarnr(),
+								"graph"		  : svgData
 							}
 
 				data=JSON.stringify(submitData);
diff --git a/public/js/monpas/models/mondiv/monitordiversiteitsomodel.js b/public/js/monpas/models/mondiv/monitordiversiteitsomodel.js
index e298e66..e99b525 100644
--- a/public/js/monpas/models/mondiv/monitordiversiteitsomodel.js
+++ b/public/js/monpas/models/mondiv/monitordiversiteitsomodel.js
@@ -93,41 +93,113 @@ mh.initMonDivSOModel = function(module){
 					scores[1]=Math.round((self.grandtotals().cat6 / self.grandtotals().llng) * 100)
 					scores[2]=Math.round((self.grandtotals().cat7 / self.grandtotals().llng) * 100)
 					scores[3]=Math.round((self.grandtotals().cat8 / self.grandtotals().llng) * 100)
-					
-					if (Gr01 ) {Gr01.destroy(); }			
+
+
+					// if (Gr01 ) {Gr01.destroy(); }
 					$("#mondivSO").remove();
 				
-					var canv = document.createElement('canvas');
-					canv.id = 'mondivSO';
-					canv.width = 280;
-					canv.height = 185;				
-			  		document.getElementById('holdermondivSO').appendChild(canv);
-			  		var ctxMondiv01=$("#mondivSO").get(0).getContext("2d");
-					var data = {labels : slabels,
-								datasets:[{	label: '',
-										  	fillColor: "rgba(147,15,80,0.9)",      									
-            									 	strokeColor: "rgba(111,11,61,1)",     
-            									 	highlightStroke: "rgba(222,22,123,1)",      						 			
-           										data: scores}]
-							   };
-					  Gr01 = new Chart(ctxMondiv01).Bar(data,{
-					  						animation: true, 
-											scaleShowGridLines:true,
-											scaleLineColor:"rgba(0,0,0,1)",
-											scaleOverride: true,
-            						 				scaleBeginAtZero :true,
-            						 				scaleSteps: 10,     
-          	   									scaleStepWidth: 10,
-          	   				 					scaleStartValue: 0 ,
-          	   						 			barValueSpacing: 10,
-          	   						 			barStrokeWidth:1,
-          	   						 			barDatasetSpacing:2,
-          	   						 			toottipFontFamily:"'lato','Arial'",
- 						 			
-          	   						 			tooltipTemplate: "<%= label %>: <%= datasetLabel[ (label -1)] %> <%= value %>%",
-									});	
+					// var canv = document.createElement('canvas');
+					// canv.id = 'mondivSO';
+					// canv.width = 280;
+					// canv.height = 185;
+			  		// document.getElementById('holdermondivSO').appendChild(canv);
+			  		// var ctxMondiv01=$("#mondivSO").get(0).getContext("2d");
+					// var data = {labels : slabels,
+					// 			datasets:[{	label: '',
+					// 					  	fillColor: "rgba(147,15,80,0.9)",
+            		// 							 	strokeColor: "rgba(111,11,61,1)",
+            		// 							 	highlightStroke: "rgba(222,22,123,1)",
+           			// 							data: scores}]
+					// 		   };
+					//   Gr01 = new Chart(ctxMondiv01).Bar(data,{
+					//   						animation: true,
+					// 						scaleShowGridLines:true,
+					// 						scaleLineColor:"rgba(0,0,0,1)",
+					// 						scaleOverride: true,
+            		// 				 				scaleBeginAtZero :true,
+            		// 				 				scaleSteps: 10,
+          	   		// 							scaleStepWidth: 10,
+          	   		// 		 					scaleStartValue: 0 ,
+          	   		// 				 			barValueSpacing: 10,
+          	   		// 				 			barStrokeWidth:1,
+          	   		// 				 			barDatasetSpacing:2,
+          	   		// 				 			toottipFontFamily:"'lato','Arial'",
+ 					//
+          	   		// 				 			tooltipTemplate: "<%= label %>: <%= datasetLabel[ (label -1)] %> <%= value %>%",
+					// 				});
+				Highcharts.chart('mondivSOXXX', {
+					chart: {
+						height: 250,
+						width: 350,
+						options3d: {
+							enabled: true,
+
+							alpha: 15,
+							beta: 15,
+							viewDistance: 25,
+							depth: 40
+						}
+					},
+
+					title: {
+						text: 'Percentages',
+					},
+					credits: {
+						enabled: false
+					},
+
+					xAxis: {
+						categories: slabels,
+						labels: {
+							skew3d: true,
+							style: {
+								fontSize : '10px',
+							},
+
+						},
+
+					},
+
+					yAxis: {
+						allowDecimals: false,
+						min: 0,
+						title: {
+							text   : 'percentage',
+							skew3d : true
+
+
+						},
+					},
+
+
+					plotOptions: {
+						column: {
+							stacking: 'normal',
+							depth: 40,
+							formatter:function(){
+								if(this.y > 0)
+									return this.y;
+							}
+						}
+					},
+					legend: {
+						enabled: false,
+					},
+
+					series: [{  type:'column',
+						name: 'diversiteit',
+						color: '#6F0B3D',
+						data: scores,
+						showInLegend: false}
+					]
+				},);
 		   
 			},
+
+
+
+
+
 			fPrintDiversiteitMonitor :function(){
 				var self = mh.MonDivSOModel;
 				var bgs = {};
@@ -136,17 +208,21 @@ mh.initMonDivSOModel = function(module){
 					bg=ko.toJSON(p);
 					bgs[i]=bg;
 				})
-				var Gr01_64 =  '';
-				if (Gr01 !==undefined) Gr01_64=Gr01.toBase64Image();
-				submitData = {	'bgs' 		: 	bgs,
-								'maxdq' 	: 	ko.toJSON(self.maxdq()),
-								'mindq' 	: 	ko.toJSON(self.mindq()),
-								"grandtotals" :  	ko.toJSON(self.grandtotals()),
-								'schooljaarnr' : 	self.schooljaarnr(),
-								"gr0164"		: Gr01_64
+
+				var svgElem = document.querySelector( "#mondivSOXXX" );
+				var svgData = null;
+				if ( svgElem ) svgData = new XMLSerializer().serializeToString( svgElem );
+
+
+				submitData = {	'bgs' 		  : bgs,
+								'maxdq' 	  : ko.toJSON(self.maxdq()),
+								'mindq' 	  : ko.toJSON(self.mindq()),
+								"grandtotals" : ko.toJSON(self.grandtotals()),
+								'schooljaarnr': self.schooljaarnr(),
+								"graph"		  : svgData
 							}
 				data=JSON.stringify(submitData);
-							
+
 				 var $form = $("<form method='post' action='index.php/monpas/diversiteitmonitor/maakpdfsboso' target='_blank'>").append($('<input type = "hidden" name="data" id ="data">').val(data) );
 			 	$form.appendTo("body").submit();
 			}
diff --git a/public/js/monpas/models/omvangmodel.js b/public/js/monpas/models/omvangmodel.js
index 2b43232..8090ab1 100644
--- a/public/js/monpas/models/omvangmodel.js
+++ b/public/js/monpas/models/omvangmodel.js
@@ -374,13 +374,13 @@ mh.initOmvangModel = function(){
 					var aantalso = 0;
 					if(o.licht) aantalsbo = Number(o.licht);
 					if(o.zwaar) aantalsbo = aantalsbo + Number(o.zwaar);
-					datasbo.push(aantalsbo);
+					datasbo.push(Number(aantalsbo) > 0 ? Number(aantalsbo) : null);
 					if(o.laag())  aantalso = (Number(o.laag()));
 					if(o.midden())  aantalso = aantalso + Number(o.midden());
 					if(o.hoog())  aantalso = aantalso + Number(o.hoog());
-					dataso.push(aantalso);
+					dataso.push(Number(aantalso) > 0 ? Number(aantalso): null);
 
-					if(o.aantalllnarr) dataarr.push(Number(o.aantalllnarr));
+					if(Number(o.aantalllnarr) ) dataarr.push(Number(o.aantalllnarr) > 0?Number(o.aantalllnarr): null );
 				});
 
 
@@ -390,12 +390,12 @@ mh.initOmvangModel = function(){
 					aantal.push(aantallln);
 					schooljaren.unshift(' ');
 					schooljaren.push(' ' );
-					datasbo.unshift(0);
-					datasbo.push(0);
-					dataso.unshift(0);
-					dataso.push(0);
-					dataarr.unshift(0);
-					dataarr.push(0);
+					datasbo.unshift(null);
+					datasbo.push(null);
+					dataso.unshift(null);
+					dataso.push(null);
+					dataarr.unshift(null);
+					dataarr.push(null);
 
 				}
 
@@ -421,7 +421,7 @@ mh.initOmvangModel = function(){
 						name: 'arrangementen',
 						color: '#ffcc80',
 						data: dataarr,
-						stack: 'arrangementen'
+						stack: 'arrs'
 					})
 
 
@@ -436,29 +436,55 @@ mh.initOmvangModel = function(){
                     });
 
 				Highcharts.chart('omvangchart', {
+					chart: {
+						type: 'column',
+						options3d: {
+							enabled: true,
+							alpha: 20,
+							beta: 20,
+							viewDistance: 40,
+							depth: 75,
+							frame: {
+								left: {
+									color:'#f8f8f8'
+								},
+								bottom: {
+									color:'#d9d9d9',
+									visible: 'auto'
+								},
+								back: {
+									color:'#f8f8f8'
+								},
+							}
+						}
+					},
 
 					credits: {
 					 		enabled: false
 					},
 					title: {
 						text: 'Omvang extra ondersteuning',
+
 						style: {
 							fontSize: '24px'
 						}
 					},
 
 					xAxis: {
+						skew3d: true,
 						categories: schooljaren
 					},
 
 					yAxis: {
 						allowDecimals: false,
+						skew3d: true,
 						min: 0,
 						title: {
 							text: 'Aantal leerlingen'
 						},
                         stackLabels: {
                             enabled: true,
+							skew3d: true,
                             style:{
                                 fontSize: '12px',
                                 fontWeight: '200'
@@ -621,7 +647,11 @@ mh.initOmvangModel = function(){
 						height: 800,
 						plotShadow: false,
 						type: 'pie',
-						margin: [0, 0, 0, 0]
+						margin: [0, 0, 0, 0],
+						options3d: {
+							enabled: true,
+							alpha: 45,
+						},
 					},
 					title: {
 						text: titel
@@ -638,6 +668,7 @@ mh.initOmvangModel = function(){
 					plotOptions: {
 						pie: {
 							allowPointSelect: true,
+							depth: 45,
 							size: 250,
 							cursor: 'pointer',
 							dataLabels: {
diff --git a/public/js/monpas/models/ontwikkelmodel2.js b/public/js/monpas/models/ontwikkelmodel2.js
index ce4555d..4bdd67c 100644
--- a/public/js/monpas/models/ontwikkelmodel2.js
+++ b/public/js/monpas/models/ontwikkelmodel2.js
@@ -1,280 +1,281 @@
 $(function(){
+	// instrument verwijderd feb '22
 
-ls.initOntwikkelModel2 = function(){
-
-	function fAddSWV(p){
-		var dit 			= this;
-		this.id 			= p.id;
-		this.soort		= p.soort
-		this.naam 		= p.naam
-		this.plaats 		= p.plaats
-		this.geopend	= ko.observable(false);
-		dit.kamers 		= ko.observableArray([]);
-		if (p.kamers ){
-			$.each(p.kamers, function(j,k){
-				dit.kamers.push(new fAddKamer(k));
-			})
-		}
-	}
-	
-	function fAddKamer(p){
-		var dit 			= this;
-		this.id 			= p.id;
-		this.soort		= p.soort
-		this.naam 		= p.naam
-		this.plaats 		= p.plaats
-		this.geopend	= ko.observable(false);
-		this.bgs 		= ko.observableArray([]);
-
-		if (p.bgs){
-			$.each(p.bgs, function(x,z){
-				dit.bgs.push(new fAddBG(z));
-			})
-		}
-	}
-	function fAddBG(p){
-		var dit 		= this;
-		this.id 		= p.id;
-		this.soort	= p.soort
-		this.naam 	= p.naam
-		this.plaats 	= p.plaats
-		this.geopend = ko.observable(false);
-		this.scholen = ko.observableArray([]);
-		if (p.scholen){		
-			$.each(p.scholen, function(a,b){
-				dit.scholen.push(new fAddSchool(b));
-			})
-		}
-	}
-
-	function fAddSchool(p){
-		var dit 		= this;
-		this.id 		= p.id;
-		this.soort	= p.soort
-		this.naam 	= p.naam
-		this.plaats 	= p.plaats
-	}
-
-	function fAddOrgversion(p){
-		this.id					= p.id; //orgversion id
-		this.periodenummer	= p.periodenummer
-		this.versie_id			= p.versie_id
-		this.vorm				= p.vorm
-		this.scoretype			= p.scoretype
-		this.naam				= p.naam
-		this.geldigvanaf			= p.geldigvanaf;
-		this.geldigtm			= p.geldigtm;
-		this.invullentm			= p.invullentm;
-		this.info				= ko.computed(function(){
-									var infostr=this.naam + "- periode " + this.periodenummer ;
-									infostr += " van " + this.geldigvanaf + " t/m " + this.geldigtm;
-									return infostr;
-		},this)
-	}
-	function fAddResult(p){
-		this.oordeelid 	= p.oordeelid;
-		this.scoretype	= p.scoretype;
-	
-		this.huidig			= ko.observable( p.normid); 
-		this.gewenst 		= ko.observable(3);	
-		if (p.wensid) {this.gewenst(p.wensid)};
-		
-		this.omschrijving 	= p.omschrijving;
-		this.fvID			= p.fvID,
-		this.ijkID			= p.ijkpuntID
-	}
-
-	if (ls.OntwikkelModel2 !== undefined){
-		ls.OntwikkelModel2.initModel();
-	}
-	else {
-		ls.OntwikkelModel2 = {
-			toporg				: ko.observableArray([]),
-			selectedOrg			: ko.observable(''),
-			orgsoort			: ko.observable(1),
-			orgversions			: ko.observableArray([]),
-			selectedOrgversion	: ko.observable(''),
-			standaarden			: ko.observableArray([]),
-			versieid			: ko.observable(), // moet waarschijnlijk orgversie id worden!!
-			writeOK				: ko.observable(false),
-			level123			: ko.observable(false),
-			bezig				: ko.observable(false),
-			ingevuld			: ko.observable(false),
-		wijzigRecht 				: ko.pureComputed(function () {
-			if(!ls.OntwikkelModel2.ingevuld()) return false;
-			if(ls.OntwikkelModel2.level123() ) return false;
-			if(ls.OntwikkelModel2.writeOK()) return true;
-			return false;
-
-		}),
-			initBindings :function(){
-				var self = ls.OntwikkelModel2;
-
-				if (!ko.dataFor(document.getElementById('pagontwikkel2')) ) {
-					ko.applyBindings(ls.OntwikkelModel2, document.getElementById("pagontwikkel2"));				
-				}
-				self.initModel();
-			},
-
-			initModel: function(){
-				var self = ls.OntwikkelModel2;
-				self.toporg('');
-			
-				$.post("index.php/monpas/rapijkpunten/getorgs", function(data){
-					if (data.organisatie){
-
-						self.orgsoort(data.soort);
-						switch (self.orgsoort()){
-							case 1: self.toporg(new fAddSWV(data.organisatie));
-								break;
-							case 2: self.toporg(new fAddKamer(data.organisatie));
-								break;
-							case 3: self.toporg(new fAddBG(data.organisatie));
-								break;
-							case 4: self.toporg(new fAddSchool(data.organisatie));
-								break;
-						}; // switch
-						
-						self.selectedOrg(self.toporg());
-						self.fGetWriteAutorisatie();
-						self.fGetLevel();
-						self.fSwitchLevel();
-					}; // if				
-				},'json');
-			},
-
-			fGetLevel: function(){
-				var self = ls.OntwikkelModel2;
-				$.post("index.php/monpas/rapijkpunten/checkLevelInspectie/", function(result){
-					self.level123(result);
-				},'json');
-			},
-
-
-			fGetWriteAutorisatie: function(){
-				var self = ls.OntwikkelModel2;
-				$.post("index.php/shared/autorisatienivos/getwriteautorisatie/" + self.selectedOrg().id, function(result){
-					self.writeOK(result);
-				},'json');
-			},
-			fToggleGeopend: function(){
-				this.geopend(!this.geopend());
-			},
-			fUpdateGewenst: function(num){
-				var self=ls.OntwikkelModel2;
-				this.gewenst(num);
-			},
-			fSwitchOrg: function(){
-				var self = ls.OntwikkelModel2;
-				if (self.selectedOrg() == undefined) return;
-				if (this.id == self.selectedOrg().id) return;
-				self.selectedOrg(this);
-				self.standaarden.removeAll();
-				self.fGetWriteAutorisatie();
-				self.ingevuld(false);
-				if (self.selectedOrg().soort < 4) return;
-
-				self.fSwitchLevel();
-			},	
-			fSwitchLevel: function(){	
-				var self = ls.OntwikkelModel2;
-		
-				if (self.selectedOrg() == undefined) return;
-				if (this.id == self.selectedOrg().id) return;
-				var versieid = null;
-				if(self.selectedOrgversion()){
-					versieid = self.selectedOrgversion().id;
-				}
-
-				$.post("index.php/monpas/rapijkpunten/getperiodes3/" + self.selectedOrg().id, function(data){
-					self.orgversions.removeAll();
-					if (data){
-						$.each(data,function(i,p){
-							self.orgversions.push(new fAddOrgversion(p));
-						})
-						if(versieid != null ){
-							$.each(self.orgversions(), function (i, q) {
-								if (q.id == versieid) {
-									self.selectedOrgversion(q);
-									return false;
-								}
-							});
-						}
-					}
-				},'json');
-			}, 
-
-			fChangeVersion2: function(){
-				var self = ls.OntwikkelModel2;
-				if (self.selectedOrgversion() == undefined) return;
-
-
-				var submitData = {	orguserid	: false,
-									orgversieid	: self.selectedOrgversion().id,
-									orgid		: self.selectedOrg().id}
-
-				self.ingevuld(false);
-				$.post("index.php/monpas/overzichtscores/getscores", submitData, function(results){
-					self.standaarden.removeAll();
-					if (results){
-						self.ingevuld(true);
-						$.each(results, function(i,p){
-							self.standaarden.push(new fAddResult(p));
-						})
-					}
-				},'json');				
-			},
-			fToonToelichting: function(){
-				var self = ls.OntwikkelModel2;
-				var dit = this;
-				var toelichting = '';
-				if (dit.toelichting != undefined) toelichting = dit.toelichting;
-				apprise(dit.nummer + '. ' + dit.omschrijving + '<br/>Toelichting:  ' + toelichting);
-			},
-			fSaveGewenst: function(){
-				var self=ls.OntwikkelModel2;
-				if (self.bezig()) return;
-				self.bezig(true);
-				var wensarray = [];
-				$.each(self.standaarden() , function(i,p){
-					wensarray[i]={	oordeelid		: p.oordeelid,	
-									ijkID			: p.ijkID,		
-									fvID				: p.fvID,					
-								   	gewenst		: p.gewenst()  };
-				});
-				var submitData= {	wensarray		: wensarray}
-;									
-				$.post("index.php/monpas/overzichtscores/savegewenst", submitData, function(wensids){
-					self.fChangeVersion2();
-					self.bezig(false);
-				},'json')	;
-			},
-			fPrintOntwikkelmatrix: function(){
-				var self = ls.OntwikkelModel2;
-
-				if (! self.selectedOrg() ) return;
-				if (! self.selectedOrg().soort == 4) return;
-
-				var versie = self.selectedOrgversion().naam+' - periode ' + 
-							self.selectedOrgversion().periodenummer + ' van ' +
-							self.selectedOrgversion().geldigvanaf + ' t/m ' + 
-							self.selectedOrgversion().geldigtm;
-				var resultaten= [];
-	
-				if (self.standaarden){
-					$.each(self.standaarden(), function(i,p){
-						resultaten.push({'nummer' : (i + 1), 'omschrijving': p.omschrijving,  'huidig': p.huidig(), 'wens' : p.gewenst()});
-					})
-				}
-				
-				var data={	'school' 		: self.selectedOrg().naam,
-							"versie"	 		: versie,
-							"resultaten"		: resultaten }
-				var submitUrl = "index.php/monpas/overzichtscores/printontwikkelmatrix/?json=" + JSON.stringify(data);	
-				window.open(submitUrl);
-			}
-		} ; // definition van model
-		ls.OntwikkelModel2.initBindings();
-	}; // else
-}// function initOntwikkelModel2
+// ls.initOntwikkelModel2 = function(){
+//
+// 	function fAddSWV(p){
+// 		var dit 			= this;
+// 		this.id 			= p.id;
+// 		this.soort		= p.soort
+// 		this.naam 		= p.naam
+// 		this.plaats 		= p.plaats
+// 		this.geopend	= ko.observable(false);
+// 		dit.kamers 		= ko.observableArray([]);
+// 		if (p.kamers ){
+// 			$.each(p.kamers, function(j,k){
+// 				dit.kamers.push(new fAddKamer(k));
+// 			})
+// 		}
+// 	}
+//
+// 	function fAddKamer(p){
+// 		var dit 			= this;
+// 		this.id 			= p.id;
+// 		this.soort		= p.soort
+// 		this.naam 		= p.naam
+// 		this.plaats 		= p.plaats
+// 		this.geopend	= ko.observable(false);
+// 		this.bgs 		= ko.observableArray([]);
+//
+// 		if (p.bgs){
+// 			$.each(p.bgs, function(x,z){
+// 				dit.bgs.push(new fAddBG(z));
+// 			})
+// 		}
+// 	}
+// 	function fAddBG(p){
+// 		var dit 		= this;
+// 		this.id 		= p.id;
+// 		this.soort	= p.soort
+// 		this.naam 	= p.naam
+// 		this.plaats 	= p.plaats
+// 		this.geopend = ko.observable(false);
+// 		this.scholen = ko.observableArray([]);
+// 		if (p.scholen){
+// 			$.each(p.scholen, function(a,b){
+// 				dit.scholen.push(new fAddSchool(b));
+// 			})
+// 		}
+// 	}
+//
+// 	function fAddSchool(p){
+// 		var dit 		= this;
+// 		this.id 		= p.id;
+// 		this.soort	= p.soort
+// 		this.naam 	= p.naam
+// 		this.plaats 	= p.plaats
+// 	}
+//
+// 	function fAddOrgversion(p){
+// 		this.id					= p.id; //orgversion id
+// 		this.periodenummer	= p.periodenummer
+// 		this.versie_id			= p.versie_id
+// 		this.vorm				= p.vorm
+// 		this.scoretype			= p.scoretype
+// 		this.naam				= p.naam
+// 		this.geldigvanaf			= p.geldigvanaf;
+// 		this.geldigtm			= p.geldigtm;
+// 		this.invullentm			= p.invullentm;
+// 		this.info				= ko.computed(function(){
+// 									var infostr=this.naam + "- periode " + this.periodenummer ;
+// 									infostr += " van " + this.geldigvanaf + " t/m " + this.geldigtm;
+// 									return infostr;
+// 		},this)
+// 	}
+// 	function fAddResult(p){
+// 		this.oordeelid 	= p.oordeelid;
+// 		this.scoretype	= p.scoretype;
+//
+// 		this.huidig			= ko.observable( p.normid);
+// 		this.gewenst 		= ko.observable(3);
+// 		if (p.wensid) {this.gewenst(p.wensid)};
+//
+// 		this.omschrijving 	= p.omschrijving;
+// 		this.fvID			= p.fvID,
+// 		this.ijkID			= p.ijkpuntID
+// 	}
+//
+// 	if (ls.OntwikkelModel2 !== undefined){
+// 		ls.OntwikkelModel2.initModel();
+// 	}
+// 	else {
+// 		ls.OntwikkelModel2 = {
+// 			toporg				: ko.observableArray([]),
+// 			selectedOrg			: ko.observable(''),
+// 			orgsoort			: ko.observable(1),
+// 			orgversions			: ko.observableArray([]),
+// 			selectedOrgversion	: ko.observable(''),
+// 			standaarden			: ko.observableArray([]),
+// 			versieid			: ko.observable(), // moet waarschijnlijk orgversie id worden!!
+// 			writeOK				: ko.observable(false),
+// 			level123			: ko.observable(false),
+// 			bezig				: ko.observable(false),
+// 			ingevuld			: ko.observable(false),
+// 		wijzigRecht 				: ko.pureComputed(function () {
+// 			if(!ls.OntwikkelModel2.ingevuld()) return false;
+// 			if(ls.OntwikkelModel2.level123() ) return false;
+// 			if(ls.OntwikkelModel2.writeOK()) return true;
+// 			return false;
+//
+// 		}),
+// 			initBindings :function(){
+// 				var self = ls.OntwikkelModel2;
+//
+// 				if (!ko.dataFor(document.getElementById('pagontwikkel2')) ) {
+// 					ko.applyBindings(ls.OntwikkelModel2, document.getElementById("pagontwikkel2"));
+// 				}
+// 				self.initModel();
+// 			},
+//
+// 			initModel: function(){
+// 				var self = ls.OntwikkelModel2;
+// 				self.toporg('');
+//
+// 				$.post("index.php/monpas/rapijkpunten/getorgs", function(data){
+// 					if (data.organisatie){
+//
+// 						self.orgsoort(data.soort);
+// 						switch (self.orgsoort()){
+// 							case 1: self.toporg(new fAddSWV(data.organisatie));
+// 								break;
+// 							case 2: self.toporg(new fAddKamer(data.organisatie));
+// 								break;
+// 							case 3: self.toporg(new fAddBG(data.organisatie));
+// 								break;
+// 							case 4: self.toporg(new fAddSchool(data.organisatie));
+// 								break;
+// 						}; // switch
+//
+// 						self.selectedOrg(self.toporg());
+// 						self.fGetWriteAutorisatie();
+// 						self.fGetLevel();
+// 						self.fSwitchLevel();
+// 					}; // if
+// 				},'json');
+// 			},
+//
+// 			fGetLevel: function(){
+// 				var self = ls.OntwikkelModel2;
+// 				$.post("index.php/monpas/rapijkpunten/checkLevelInspectie/", function(result){
+// 					self.level123(result);
+// 				},'json');
+// 			},
+//
+//
+// 			fGetWriteAutorisatie: function(){
+// 				var self = ls.OntwikkelModel2;
+// 				$.post("index.php/shared/autorisatienivos/getwriteautorisatie/" + self.selectedOrg().id, function(result){
+// 					self.writeOK(result);
+// 				},'json');
+// 			},
+// 			fToggleGeopend: function(){
+// 				this.geopend(!this.geopend());
+// 			},
+// 			fUpdateGewenst: function(num){
+// 				var self=ls.OntwikkelModel2;
+// 				this.gewenst(num);
+// 			},
+// 			fSwitchOrg: function(){
+// 				var self = ls.OntwikkelModel2;
+// 				if (self.selectedOrg() == undefined) return;
+// 				if (this.id == self.selectedOrg().id) return;
+// 				self.selectedOrg(this);
+// 				self.standaarden.removeAll();
+// 				self.fGetWriteAutorisatie();
+// 				self.ingevuld(false);
+// 				if (self.selectedOrg().soort < 4) return;
+//
+// 				self.fSwitchLevel();
+// 			},
+// 			fSwitchLevel: function(){
+// 				var self = ls.OntwikkelModel2;
+//
+// 				if (self.selectedOrg() == undefined) return;
+// 				if (this.id == self.selectedOrg().id) return;
+// 				var versieid = null;
+// 				if(self.selectedOrgversion()){
+// 					versieid = self.selectedOrgversion().id;
+// 				}
+//
+// 				$.post("index.php/monpas/rapijkpunten/getperiodes3/" + self.selectedOrg().id, function(data){
+// 					self.orgversions.removeAll();
+// 					if (data){
+// 						$.each(data,function(i,p){
+// 							self.orgversions.push(new fAddOrgversion(p));
+// 						})
+// 						if(versieid != null ){
+// 							$.each(self.orgversions(), function (i, q) {
+// 								if (q.id == versieid) {
+// 									self.selectedOrgversion(q);
+// 									return false;
+// 								}
+// 							});
+// 						}
+// 					}
+// 				},'json');
+// 			},
+//
+// 			fChangeVersion2: function(){
+// 				var self = ls.OntwikkelModel2;
+// 				if (self.selectedOrgversion() == undefined) return;
+//
+//
+// 				var submitData = {	orguserid	: false,
+// 									orgversieid	: self.selectedOrgversion().id,
+// 									orgid		: self.selectedOrg().id}
+//
+// 				self.ingevuld(false);
+// 				$.post("index.php/monpas/overzichtscores/getscores", submitData, function(results){
+// 					self.standaarden.removeAll();
+// 					if (results){
+// 						self.ingevuld(true);
+// 						$.each(results, function(i,p){
+// 							self.standaarden.push(new fAddResult(p));
+// 						})
+// 					}
+// 				},'json');
+// 			},
+// 			fToonToelichting: function(){
+// 				var self = ls.OntwikkelModel2;
+// 				var dit = this;
+// 				var toelichting = '';
+// 				if (dit.toelichting != undefined) toelichting = dit.toelichting;
+// 				apprise(dit.nummer + '. ' + dit.omschrijving + '<br/>Toelichting:  ' + toelichting);
+// 			},
+// 			fSaveGewenst: function(){
+// 				var self=ls.OntwikkelModel2;
+// 				if (self.bezig()) return;
+// 				self.bezig(true);
+// 				var wensarray = [];
+// 				$.each(self.standaarden() , function(i,p){
+// 					wensarray[i]={	oordeelid		: p.oordeelid,
+// 									ijkID			: p.ijkID,
+// 									fvID				: p.fvID,
+// 								   	gewenst		: p.gewenst()  };
+// 				});
+// 				var submitData= {	wensarray		: wensarray}
+// ;
+// 				$.post("index.php/monpas/overzichtscores/savegewenst", submitData, function(wensids){
+// 					self.fChangeVersion2();
+// 					self.bezig(false);
+// 				},'json')	;
+// 			},
+// 			fPrintOntwikkelmatrix: function(){
+// 				var self = ls.OntwikkelModel2;
+//
+// 				if (! self.selectedOrg() ) return;
+// 				if (! self.selectedOrg().soort == 4) return;
+//
+// 				var versie = self.selectedOrgversion().naam+' - periode ' +
+// 							self.selectedOrgversion().periodenummer + ' van ' +
+// 							self.selectedOrgversion().geldigvanaf + ' t/m ' +
+// 							self.selectedOrgversion().geldigtm;
+// 				var resultaten= [];
+//
+// 				if (self.standaarden){
+// 					$.each(self.standaarden(), function(i,p){
+// 						resultaten.push({'nummer' : (i + 1), 'omschrijving': p.omschrijving,  'huidig': p.huidig(), 'wens' : p.gewenst()});
+// 					})
+// 				}
+//
+// 				var data={	'school' 		: self.selectedOrg().naam,
+// 							"versie"	 		: versie,
+// 							"resultaten"		: resultaten }
+// 				var submitUrl = "index.php/monpas/overzichtscores/printontwikkelmatrix/?json=" + JSON.stringify(data);
+// 				window.open(submitUrl);
+// 			}
+// 		} ; // definition van model
+// 		ls.OntwikkelModel2.initBindings();
+// 	}; // else
+// }// function initOntwikkelModel2
 });
\ No newline at end of file