ars/templates/single_choice/viewer.stpl

<h2><%= name %></h2>
<span>Total Participants: <b><%= total_submissions %></b></span>
<% if show_result { %>
    <span>The correct answer is: <b><%= correct_answer %></b></span>
<% } %>

<canvas id="myChart"></canvas>


<script>
    var ctx = document.getElementById('myChart');
    var chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [
          <% for answer in answers.iter() { %>
            "<%= answer %>",
          <% } %>
        ],
<% if show_result { %>
        datasets: [
          {
            label: "correct answers",
            data: [
              <% for submissions in submissions_correct.iter() { %>
                <%= submissions %>,
              <% } %>
            ],
            borderWidth: 1,
            borderColor: '#fff',
            backgroundColor: '#fff',
          },
          {
            label: "wrong answers",
            data: [
              <% for submissions in submissions_wrong.iter() { %>
                <%= submissions %>,
              <% } %>
            ],
            borderWidth: 2,
            borderColor: '#fff',
            backgroundColor: [ pattern.draw('diagonal-right-left', '#000000') ],
          }
        ]
<% } else { %>
        datasets: [{
          data: [
            <% for submissions in submissions.iter() { %>
              <%= submissions %>,
            <% } %>
          ],

          borderWidth: 2,
          borderColor: '#FFF',
          backgroundColor: [ pattern.draw('diagonal-right-left', '#000000') ]

        }]
<% } %>
      },
      options: {
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          x: {
            stacked: true,
            ticks: {
              font: {
                size: 64,
                family: 'monospace'
              },
              color: '#FFF'
            }
          },
          y: {
            beginAtZero: true,
            stacked: true,
            ticks: {
              font: {
                size: 16,
                family: 'monospace'
              },
              color: '#FFF'
            }
          }
        }
      }
    });
</script>