

    <div class="col-lg-6">
        <div class="card user-detail-box">
        <div class="box-header">
          <!-- Originalheadline-->
          <!--<h4>Wie viele Nutzer haben wie viele Trainings</h4>-->
          <h4>Anzahl abgeschlossene Trainings pro Benutzer</h4>
        </div>
        <div class="box-body">
                <canvas id="chartJSContainertraininggusercompare" width="600" height="400"></canvas>
                <script>

                jQuery( document ).ready(function() {
                  var options = {
                  type: 'horizontalBar',
                  data: {
                    labels:{{ usercounttrainingcountfinvalues| raw}},
                    datasets: [
                        {
                          label: 'abgeschlossen',
                          backgroundColor: 'rgba(0,255,0,0.25)',
                          borderColor: 'rgba(0,255,0,1)',
                          hoverBackgroundColor: "rgba(0,255,0,0.5)",
                          data:{{ usercounttrainingcountfinlbl | raw}},
                          borderWidth: 1
                        }
                      ]
                  },
                  options: {
                          plugins: {
                        zoom: {
                          zoom: {
                            wheel: {
                              enabled: true,
                            },
                            pinch: {
                              enabled: true
                            },          
                            mode: 'xy',
                          },
                          pan: {
                              enabled: true,
                              mode: 'xy'
                            },
                        }
                      },
                      scales: {
                        xAxes: [{
                          scaleLabel:{
                            display: true,
                            labelString: 'Anzahl Benutzer'
                          },
                          ticks:{
                            beginAtZero: true
                          }
                        }],
                        yAxes: [{
                          scaleLabel:{
                            display: true,
                            labelString: 'Anzahl Trainings'
                          },
                          ticks: {
                            reverse: false
                          }
                      }]
                    }
                  }
                }
                
                var ctx = document.getElementById('chartJSContainertraininggusercompare').getContext('2d');
                new Chart(ctx, options);

                }); //document.ready
               
                </script>

                <canvas id="chartJSContainertraininggusercompare2" width="600" height="400"></canvas>
                <script>
                var options = {
                  type: 'horizontalBar',
                  data: {
                    labels:{{ usercounttrainingcountnotfinvalues| raw}},
                    datasets: [
                        {
                          label: 'nicht abgeschlossen',
                          backgroundColor: 'rgba(255,0,0,0.25)',
                          borderColor: 'rgba(255,0,0,1)',
                          hoverBackgroundColor: 'rgba(255,0,0,0.5)',
                          data:{{usercounttrainingcountnotfinlbl | raw}},
                          borderWidth: 1
                        }
                      ]
                  },
                  options: {
                    pan: {
                          enabled: true,
                          mode: 'x'
                      },
                      zoom: {
                          enabled: true,
                          mode: 'x'
                      },
                      scales: {
                        xAxes: [{
                          scaleLabel:{
                            display: true,
                            labelString: 'Anzahl Benutzer'
                          },
                          ticks:{
                            beginAtZero: true,
                          }
                        }],
                        yAxes: [{
                          scaleLabel:{
                            display: true,
                            labelString: 'Anzahl Trainings'
                          },
                          ticks: {
                            reverse: false
                          }
                      }]
                    }
                  }
                }
                
                var ctx = document.getElementById('chartJSContainertraininggusercompare2').getContext('2d');
                new Chart(ctx, options);
                </script>
                
        </div>
        <div class="box-footer">

        </div>
      </div>
    </div>
    <!--/lg-6-->