<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading">Ergebnisse der vorherigen Teilnehmer</div>
 
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-6">
            <ul class="list-group">
                <li class="list-group-item" style="background-color:#058DC7;color:white">
                  <span class="badge myBadge">{' [Q1.pc.1]'}%</span>
                  <span class="badge myBadge">{' [Q1.nb.1]'}</span> sehr gut
                </li>
                <li class="list-group-item" style="background-color:#ED561B;color:white">
                  <span class="badge myBadge">{' [Q1.pc.2]'}%</span>
                  <span class="badge myBadge">{' [Q1.nb.2]'}</span> gut
                </li>
                <li class="list-group-item" style="background-color:#50B432;color:white">
                  <span class="badge myBadge">{' [Q1.pc.3]'}%</span>
                  <span class="badge myBadge">{' [Q1.nb.3]'}</span> mittel
                </li>
                <li class="list-group-item" style="background-color:#DDDF00;color:white">
                  <span class="badge myBadge">{' [Q1.pc.4]'}%</span>
                  <span class="badge myBadge">{' [Q1.nb.4]'}</span> schlecht
                </li>
                <li class="list-group-item" style="background-color:#ddd;color:#333">
                  <span class="badge myBadge">{' [Q1.moy2]'}</span> Mittelwert
                </li>
            </ul>
          </div>
 
          <div class="col-sm-6">
            <div id="chart1" style="width:100%;height:250px;"> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" charset="utf-8">
Highcharts.setOptions({
    colors: ['#058DC7', '#ED561B', '#50B432', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
});
 
// Create the chart Drilldown
Highcharts.chart('chart1', {
  chart: {
    type: 'pie',
    backgroundColor: 'transparent'
  },
  title: {
    text: ''
  },
  series: [{
    name: '',
    data: [{
      name: 'sehr gut',
      y: {' [Q1.nb.1]'}
    }, {
      name: 'gut',
      y: {'[Q1.nb.2]'}
    }, {
      name: 'mittel',
      y: {'[Q1.nb.3]'}
    }, {
      name: 'schlecht',
      y: {'[Q1.nb.4]'}
    }]
  }]
});
 
</script>

<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
  var prozent1=Math.floor({' [Q1.nb.1]'});
  var prozent2=Math.floor({' [Q1.nb.2]'});
  var prozent3=Math.floor({' [Q1.nb.3]'});
  var prozent4=Math.floor({' [Q1.nb.4]'});
 
  $('#answer{SGQ}1').val(prozent1);
  $('#answer{SGQ}2').val(prozent2);
  $('#answer{SGQ}3').val(prozent3);
  $('#answer{SGQ}4').val(prozent4);
  $('#question{QID}').hide();
 
});
</script>