====== CRM/RTR-Messung Audio ======

===== Anzeige der Bewertung im Fragebogen =====

Mithilfe der Diagramm-Bibliothek ChartJS lässt sich die Bewertung als Diagramm anzeigen. Wahlweise im Anschluss an die Bewertung (auf der folgenden Seite) oder live während der Aufzeichnung.

==== Live-Chart ====

Für die Anzeige eines Diagramms während der Datenerhebung speichern Sie folgenden HTML-/JavaScript-Code in einer Rubrik  (**Fragenkatalog** -> **Text hinzufügen** -> //Darstellung// "HTML-Code").

<code html>
<div>
    <canvas id="chart" style="width: 100%; height: 200px"></canvas>
</div>


<script type="text/javascript">
<!--

// Chart initialisieren
var chart = new Chart(
    document.getElementById('chart'),
    {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Bewertung',
                backgroundColor: 'rgb(99, 99, 200)',
                borderColor: 'rgb(99, 99, 200)',
                data: [],
            }],
        },
        options: {
            scales: {
                yAxis: {
                    min: 0,
                    max: 100
                }
            }
        }
    }
);

// Aktualisierung des Charts während der Aufnahme
var rtr = document.getElementById("%questionID%_tab");
rtr.addEventListener("change", function(evt) {
    var response = evt.detail.response;
    var samples = evt.detail.duration * evt.detail.resolution;
    
    // Set labels for the whole duration
    if (chart.data.labels.length < evt.detail.duration) {
        labels = [];
        for (var i=0; i<samples; i++) {
            labels.push((i + 1) / evt.detail.resolution);
        }
        chart.data.labels = labels;
    }
    
    chart.data.datasets[0].data = response;
    chart.update("none");
});

// -->
</script>
</code>

Der Platzhalter ''%questionID%'' wird durch folgenden PHP-Code durch die Kennung der Frage ersetzt. Platzieren Sie den folgenden PHP-Code unter **Fragebogen zusammenstellen** direkt unter der CRM-Frage. Die Kennung "CR01" muss durch die Kennung der CRM-Frage ersetzt werden, die Kennung "CR02" durch die Kennung des Textes mit dem JavaScript-Code.

<code php>
library('ChartJS');
show('CR02', [
    '%questionID%' => 'CR01'
]);
</code>


==== Chart nach Abschluss ====

Wenn das Diagramm auf einer späteren Seite im Fragebogen angezeigt werden soll, werden die Daten mittels ''value()'' aus dem Datensatz abgerufen. Legen Sie dafür folgenden HTML-/JavaScript-Code in einer Rubrik im **Fragenkatalog** an (**Text hinzufügen** -> //Darstellung// "HTML-Code").

<code html>
<div>
    <canvas id="chart" style="width: 100%; height: 200px"></canvas>
</div>


<script type="text/javascript">
<!--

var myChart = new Chart(
    document.getElementById('chart'),
    {
        type: 'line',
        data: {
            labels: %labels%,
            datasets: [{
                label: 'Bewertung',
                backgroundColor: 'rgb(99, 99, 200)',
                borderColor: 'rgb(99, 99, 200)',
                data: %data%,
            }]
        },
        options: {}
    }
);

// -->
</script>
</code>

Den folgenden PHP-Code platzieren Sie dort im Fragebogen (**Fragebogen zusammenstellen**) wo das Chart erscheinen soll. Ersetzen Sie "CR01rsp" durch die Variablenkennung Ihrer CRM-Frage. Wenn die Frage die Kennung AB01 hat, lautet die Kennung der Variable standardmäßig "AB01rsp".

<code php>
$data = value('CR01rsp', 'label');
$data = explode(',', $data);

$values = [null];
foreach ($data as $value) {
  $iValue = (int)$value;
  if ($iValue >= 0) {
    $values[] = (int)$value;
  } else {
    $values[] = NULL;
  }
}

replace('%data%', json_encode($values));
replace('%labels%', json_encode(array_keys($values)));
library('ChartJS');
option('nextbutton', false);
</code>

Ziehen Sie den oben erstellten Textbaustein auf dieselbe Seite im Fragebogen (**Fragebogen zusammenstellen**) unter den PHP-Code.