73 lines
2.6 KiB
PHP
73 lines
2.6 KiB
PHP
|
<?php
|
||
|
|
/*
|
||
|
|
usage:
|
||
|
|
|
||
|
|
partial('graph.html.php', [
|
||
|
|
'id' => 'graph1',
|
||
|
|
'title' => 'Graph 1',
|
||
|
|
'gclass' => '', // classes for the graph div
|
||
|
|
'legend' => ['Geschwindigkeit', 'Fehler', 'Verweigerungen', 'Zeit', 'Geschwindigkeit', 'Punkte', 'Platz'],
|
||
|
|
'xaxis' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||
|
|
'seriesdata' => [
|
||
|
|
['name' => 'Geschwindigkeit', 'type'=>'line','stack'=>'Total', 'data' => [120, 132, 101, 134, 90, 230, 210]],
|
||
|
|
['name' => 'Fehler', 'type'=>'line','stack'=>'Total', 'data' => [220, 182, 191, 234, 290, 330, 310]],
|
||
|
|
['name' => 'Verweigerungen', 'type'=>'line','stack'=>'Total', 'data' => [150, 232, 201, 154, 190, 330, 410]],
|
||
|
|
['name' => 'Zeit', 'type'=>'line','stack'=>'Total', 'data' => [320, 332, 301, 334, 390, 330, 320]],
|
||
|
|
['name' => 'Punkte', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]],
|
||
|
|
['name' => 'Platz', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]]
|
||
|
|
],
|
||
|
|
])
|
||
|
|
*/
|
||
|
|
|
||
|
|
?>
|
||
|
|
|
||
|
|
<div id="graph<?= $id ?>" data-bs-theme="light" class="card bg-light text-black <?= $gclass ?>" style="min-height: 200px;"></div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
// Initialize the echarts instance based on the prepared dom
|
||
|
|
var myChart<?= $id ?> = echarts.init(document.getElementById('graph<?= $id ?>'));
|
||
|
|
|
||
|
|
// Specify the configuration items and data for the chart
|
||
|
|
var option = {
|
||
|
|
title: {
|
||
|
|
text: '<?= $title ?>'
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
<?php if(isset($legend)): ?>
|
||
|
|
legend: {
|
||
|
|
data: <?= json_encode($legend); ?>
|
||
|
|
},
|
||
|
|
<?php endif; ?>
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
feature: {
|
||
|
|
saveAsImage: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: <?= json_encode($xaxis); ?>
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value'
|
||
|
|
},
|
||
|
|
series: <?= json_encode($seriesdata, JSON_PRETTY_PRINT); ?>
|
||
|
|
};
|
||
|
|
|
||
|
|
// Display the chart using the configuration items and data just specified.
|
||
|
|
myChart<?= $id ?>.setOption(option);
|
||
|
|
|
||
|
|
window.addEventListener('resize', function(event) {
|
||
|
|
if(myChart<?= $id ?> != null && myChart<?= $id ?> != undefined){
|
||
|
|
myChart<?= $id ?>.resize();
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
</script>
|