better graphs
All checks were successful
Build and push / Pulling repo on server (push) Successful in 2s
All checks were successful
Build and push / Pulling repo on server (push) Successful in 2s
This commit is contained in:
parent
44c0cfcfae
commit
153e5d6305
@ -17,9 +17,53 @@ class Demo extends Page{
|
|||||||
|
|
||||||
function test()
|
function test()
|
||||||
{
|
{
|
||||||
$u = new User();
|
$graph1 = partial('graph.html.php', [
|
||||||
$u->load('Chris','firstname');
|
'id' => 'graph1',
|
||||||
var_dump($u->data);
|
'title' => 'Graph 1',
|
||||||
|
'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]]
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
|
||||||
|
$graph2 = partial('graph.html.php', [
|
||||||
|
'id' => 'graph2',
|
||||||
|
'title' => 'Punkte',
|
||||||
|
'xaxis' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||||
|
'seriesdata' => [
|
||||||
|
['name' => 'Punkte', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]],
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
|
||||||
|
$graph3 = partial('graph.html.php', [
|
||||||
|
'id' => 'graph3',
|
||||||
|
'title' => 'Graph 3',
|
||||||
|
'legend' => ['Punkte'],
|
||||||
|
'xaxis' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||||
|
'seriesdata' => [
|
||||||
|
['name' => 'Punkte', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]],
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
|
||||||
|
return '<div class="container text-center">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
'.$graph1.'
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
'.$graph2.'
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
'.$graph3.'
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
function index()
|
function index()
|
||||||
|
|||||||
@ -57,7 +57,6 @@ class Smart extends Page {
|
|||||||
|
|
||||||
$this->set('results_dogs', $results);
|
$this->set('results_dogs', $results);
|
||||||
$this->set('dogs', $dogs);
|
$this->set('dogs', $dogs);
|
||||||
$this->set('query', $query);
|
|
||||||
$this->set('template', 'search.html.php');
|
$this->set('template', 'search.html.php');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -37,8 +37,7 @@
|
|||||||
<?php foreach ($results as $res) :
|
<?php foreach ($results as $res) :
|
||||||
// graph data preparation
|
// graph data preparation
|
||||||
|
|
||||||
if ($res['bew'] != 'DIS' && $res['punkte'] != 'DIS')
|
if ($res['bew'] != 'DIS' && $res['punkte'] != 'DIS') {
|
||||||
{
|
|
||||||
$sdata['dates'][] = date("d.m.Y", strtotime($res['date']));
|
$sdata['dates'][] = date("d.m.Y", strtotime($res['date']));
|
||||||
$sdata['speed'][] = $res['msek'] ?: 0;
|
$sdata['speed'][] = $res['msek'] ?: 0;
|
||||||
$sdata['errors'][] = $res['f'] ?: 0;
|
$sdata['errors'][] = $res['f'] ?: 0;
|
||||||
@ -71,88 +70,47 @@
|
|||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<?php if (count($results) > 0) : ?>
|
<div class="row">
|
||||||
<div class="col">
|
<?php if (count($results) > 0) : ?>
|
||||||
<div id="graph<?= $dog ?>" data-bs-theme="light" class="card bg-light text-black" style="min-height: 400px;"></div>
|
<div class="col">
|
||||||
|
<?= partial('graph.html.php', [
|
||||||
|
'id' => 'graph1'.$dog,
|
||||||
|
'title' => 'Fehler und Verweigerungen',
|
||||||
|
'xaxis' => $sdata['dates'],
|
||||||
|
'seriesdata' => [
|
||||||
|
['name' => 'Fehler', 'type' => 'line', 'stack' => 'Total', 'data' => $sdata['errors']],
|
||||||
|
['name' => 'Verweigerungen', 'type' => 'line', 'stack' => 'Total', 'data' => $sdata['refusals']],
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<div class="col">
|
||||||
// Initialize the echarts instance based on the prepared dom
|
<?= partial('graph.html.php', [
|
||||||
var myChart = echarts.init(document.getElementById('graph<?= $dog ?>'));
|
'id' => 'graph2'.$dog,
|
||||||
|
'title' => 'Geschwindigkeit',
|
||||||
|
'xaxis' => $sdata['dates'],
|
||||||
|
'seriesdata' => [
|
||||||
|
['name' => 'Geschwindigkeit', 'type' => 'line', 'stack' => 'Total', 'data' => $sdata['speed']],
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
// Specify the configuration items and data for the chart
|
<div class="col">
|
||||||
var option = {
|
<?= partial('graph.html.php', [
|
||||||
title: {
|
'id' => 'graph3'.$dog,
|
||||||
text: 'Stacked Line'
|
'title' => 'Platzierung',
|
||||||
},
|
'xaxis' => $sdata['dates'],
|
||||||
tooltip: {
|
'seriesdata' => [
|
||||||
trigger: 'axis'
|
['name' => 'Platzierung', 'type' => 'line', 'stack' => 'Total', 'data' => $sdata['ranking']],
|
||||||
},
|
],
|
||||||
legend: {
|
]);
|
||||||
data: ['Geschwindigkeit', 'Fehler', 'Verweigerungen', 'Zeit', 'Geschwindigkeit', 'Punkte', 'Platz']
|
?>
|
||||||
},
|
</div>
|
||||||
grid: {
|
</div>
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
toolbox: {
|
|
||||||
feature: {
|
|
||||||
saveAsImage: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: <?= json_encode($sdata['dates']); ?>
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: 'Geschwindigkeit',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
data: <?= json_encode($sdata['speed']); ?>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Fehler',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
data: <?= json_encode($sdata['errors']); ?>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Verweigerungen',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
data: <?= json_encode($sdata['refusals']); ?>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Zeit',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
data: <?= json_encode($sdata['time']); ?>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Punkte',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
data: <?= json_encode($sdata['points']); ?>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Platz',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
data: <?= json_encode($sdata['ranking']); ?>
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
// Display the chart using the configuration items and data just specified.
|
<?php endif; ?>
|
||||||
myChart.setOption(option);
|
|
||||||
</script>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|||||||
73
web/templates/partials/graph.html.php
Normal file
73
web/templates/partials/graph.html.php
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<?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>
|
||||||
Reference in New Issue
Block a user