Overigen/monpas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3d-grafieken

Browse Source
This commit is contained in:
Monique
2022-03-01 14:43:16 +01:00
parent 19e5ed3e04
commit 0aecc25074
39 changed files with 1944 additions and 1329 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/views/monpas/sopkeuze/divquotientgraf.php
+84 -59
View File
@@ -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>
application/views/monpas/sopkeuze/divquotientgrafso.php
+151 -61
View File
@@ -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>
application/views/monpas/sopkeuze/ijkgrafiekgemiddeld.php
+28 -22
View File
@@ -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
application/views/monpas/sopkeuze/ijkpuntengrafiek.php
+28 -17
View File
@@ -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