+1 vote
in SoSci Survey (dt.) by s154695 (485 points)
edited by s154695

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!

by SoSci Survey (312k points)
Posten sie gerne man einen Pretes-Link direkt (!) zur betroffenen Seite, dann werfe ich einen Blick auf den Code.

Schauen Sie aber auch unbedingt mal in die Fehlerkonsole Ihres Browsers: https://www.soscisurvey.de/help/doku.php/de:general:browser-tools
by s154695 (485 points)
Vielen Dank für die Hilfe! Mit dem Hinweis auf die Fehlerkonsole konnte ich das ursprüngliche Problem beheben. Ich hatte eines der zusätzlichen Module/Erweiterungen, die für die Darstellung von Fehlerbalken notwendig sind, nicht abgerufen.

Allerdings stimmt die Anzeige weiterhin nicht, da die Fehlerbalken nicht auf der entsprechenden Säule angezeigt werden. Könnten Sie diesbezüglich trotzdem nachschauen?

Pretest-Link direkt zur betroffenen Seite:
https://www.soscisurvey.de/feedbacklehrevaluation/?act=k6rFFrfvI7CJSeEJaV3Evy45

Wenn ich die Seite aufrufe, ohne vorher die notwendigen Daten zur Diagramm-Erstellung angegeben habe, erhalte ich allerdings eine Fehlermeldung für den PHP-Code, die mit Daten nicht auftritt.

Daher (nur für den Fall) noch ein Link zur vorherigen Seite (direkt davor), auf der die notwendigen Daten eingegeben werden:
https://www.soscisurvey.de/feedbacklehrevaluation/?act=7kz3iaehBOSLVn2edK7GnHVe

1 Answer

0 votes
by SoSci Survey (312k points)

Also, so ganz schlecht sieht es nicht aus bei mir:

Screenshot

Wir werden hier nicht den Support für die Verwendung von Chart.JS leisten können. Aber wenn Sie nochmal konkretisieren möchten, was genau Sie anders darstellen möchten, sehe ich gerne nochmal drauf.

Auf der vorigen Seite wird mir übrigens noch eine Fehlermeldung angezeigt:

Fehler im Fragebogen: Unsupported operand types: string + int
Zeile: 7

Eventuell wäre da ein (int) oder (float) vor einer Textvariable hilfreich.

by s154695 (485 points)
Vielen Dank für die Mühe!

Ich habe mich jetzt noch einmal näher mit der API Reference auseinandergesetzt und konnte das Problem selbst beheben.

Falls zukünftige Nutzer*innen ein ähnliches Problem mit der Platzierung der Fehlerbalken haben hier ein kurzer Abriss der Lösung:
Ich hatte fälschlicherweise die Standardabweichungen für beide Säulen zusammengefasst, allerdings müssen diese je getrennt sein.

Zusätzlich musste ich dann die Position der Fehlerbalken anpassen (pointPlacement).
Hilfreich war für mich v.a. folgende Seite:

https://api.highcharts.com/highcharts/plotOptions.errorbar

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...