====== CRM/RTR audio measuring ======

===== Displaying the rating in the questionnaire =====

Using the chart library ChartJS, the rating can be displayed as a chart, either after the assessment (on the following page), or live during the recording.

==== Live chart ====

To display a chart during data collection, save the following HTML/JavaScript code in a section (**List of Questions** -> **Add Text** -> //Display// "HTML Code").

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


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

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

// Updating the chart during recording
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>

The placeholder ''%questionID%'' is replaced by the following PHP code with the identifier of the question. Place the following PHP code under **Compose Questionnaire** directly under the CRM question. The identifier ''CR01'' must be replaced with the identifier of the CRM question, and the identifier ''CR02'' must be replaced with the identifier of the text containing the JavaScript code.

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


==== Chart after completion ====

If the chart is to be displayed on a later page in the questionnaire, the data is retrieved from the dataset using ''value()''. To do this, create the following HTML/JavaScript code in a section in the **Questionnaire** (**Add text** -> //Display// "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: 'Rating',
                backgroundColor: 'rgb(99, 99, 200)',
                borderColor: 'rgb(99, 99, 200)',
                data: %data%,
            }]
        },
        options: {}
    }
);

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

Place the following PHP code in the questionnaire (**Compose Questionnaire**) where you want the chart to appear. Replace "CR01rsp" with the variable identifier of your CRM question. If the question's identifier is AB01, the variable identifier will be "AB01rsp" by default.

<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>

Drag the text module created above to the same page in the questionnaire (**Compose Questionnaire**) under the PHP code.