179 lines
5.6 KiB
PHP
179 lines
5.6 KiB
PHP
<!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;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div>
|
|
<div id="graphSOXXX" style="margin-top:5px;height: 260px; width: 600px"> </div>
|
|
</div>
|
|
|
|
<script>
|
|
<?php if ($data['groepen']){ ?>
|
|
$(function(){
|
|
fFillGraph= function(){
|
|
var scores =[];
|
|
var labels =[];
|
|
<?php foreach($data['groepen'] as $index => $groep) { ?>
|
|
labels.push('<?= $groep->naam ?>');
|
|
|
|
<?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: ' ',
|
|
|
|
},
|
|
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
|
|
} ]
|
|
});
|
|
|
|
// 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>
|
|
|