Guten Tag,
meine Teilnehmenden sollen ein grafisches Feedback erhalten, für das ich Highcharts verwenden wollte. In einem früheren Projekt haben wir so ein Säulendiagramm angezeigt, das auch fehlerfrei ausgegeben wurde.
Nun habe ich versucht, zusätzlich die Standardabweichung der angegebenen Werte der Teilnehmenden als Fehlerbalken ausgeben zu lassen, was allerdings nicht funktioniert, da das Feld, in dem das Diagramm angezeigt werden sollte, komplett leer bleibt.
Der ursprüngliche Code sieht wie folgt aus:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
</p>
</figure>
<style type="text/css">
.highcharts-figure, .highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Lehrevaluationsfeedback Vergleich mit <b>LV154<b>'
},
subtitle: {
text: 'Vergleich zwischen <b>Ihrer Lehrveranstaltung (LV475)</b> und <b>LV154</b>'
},
xAxis: {
categories: [
''
],
crosshair: false
},
yAxis: {
min: 0,
title: {
text: 'Gesamtevaluation'
}
},
credits: {
enabled: false
},
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} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'LV475 (Ihr Wert)',
data: [%wert1%]
}, {
name: 'LV154 (Vergleichswert)',
data: [%wert2%]
}]
});
</script>
Der um die Fehlerbalken ergänzte Code ist folgender:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
</p>
</figure>
<style type="text/css">
.highcharts-figure, .highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Lehrevaluationsfeedback Vergleich mit <b>LV154<b>'
},
subtitle: {
text: 'Vergleich zwischen <b>Ihrer Lehrveranstaltung (LV475)</b> und <b>LV154</b>'
},
xAxis: {
categories: [
''
],
crosshair: false
},
yAxis: {
min: 0,
title: {
text: 'Gesamtevaluation'
}
},
credits: {
enabled: false
},
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} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'LV475 (Ihr Wert)',
data: [%wert1%]
}, {
name: 'LV154 (Vergleichswert)',
data: [%wert2%]
}, {
name: 'Standardabweichung',
type: 'errorbar',
data: [[%error1%, %error2%], [%error3%, %error4%]],
tooltip: {
pointFormat: '(Standardabweichung: {point.low}-{point.high})<br/>'
}
}]
});
</script>
Die Berechnung der Werte funktioniert laut debug-Informationen und läuft über folgenden Code:
$wert1 = value('CS01_01');
$diffeval = 0.5;
$sd1 = value('CS01_02');
$diffsd = 0.1;
$sd2 = $sd1 + $diffsd;
if (value('RA0') == 1) {
$wert2 = $wert1 - $diffeval;
} else {
$wert2 = $wert1;
}
$error1 = $wert1 - $sd1;
$error2 = $wert1 + $sd1;
$error3 = $wert2 - $sd2;
$error4 = $wert2 + $sd2;
replace('%wert1%', sprintf('%1.1f', $wert1));
replace('%wert2%', sprintf('%1.1f', $wert2));
replace('%error1%', sprintf('%1.1f', $error1));
replace('%error2%', sprintf('%1.1f', $error2));
replace('%error3%', sprintf('%1.1f', $error3));
replace('%error4%', sprintf('%1.1f', $error4));
Können Sie mir hier weiterhelfen bzw. mich in eine Richtung weisen, was an dem Code fehlerhaft sein könnte?
Vielen Dank schon im Voraus!