

    <div class="col-lg-6">
        <div class="card user-detail-box">
        <div class="box-header">
          <!-- Originalheadline-->
          <!--<h4>Nutzer zu Trainings</h4>-->
          <h4>Anzahl abgeschlossene Trainings</h4>
        </div>
        <div class="box-body">
                <canvas id="chartJSContainertrainingcount" width="600" height="400"></canvas>
                <script>
                
                var horizontalBarUserTrainingCount;

                jQuery( document ).ready(function() {
                  var userTrainingCountOptions = {
                  type: 'bar',
                  data: {
                    labels:{{trainingfinusercountlbl | raw}},
                    datasets: [
                        {
                          label: 'Anzahl abgeschlossene Trainings',
                          backgroundColor: "rgba(0,255,0,0.25)",
                          borderColor: "rgba(0,255,0,1)",
                          hoverBackgroundColor: "rgba(0,255,0,0.5)",
                          data:{{trainingfinusercountvalues | raw}},
                          borderWidth: 1
                        }
                      ]
                  },
                  options: {
                      indexAxis: 'y',
                            plugins: {
                        zoom: {
                          zoom: {
                            wheel: {
                              enabled: true,
                            },
                            pinch: {
                              enabled: true
                            },          
                            mode: 'xy',
                          },
                          pan: {
                              enabled: true,
                              mode: 'xy'
                            },
                        }
                      },
                      scales: {
                        x:{
                          display: true,
                          title:{
                            display: true,
                            text: 'Anzahl'
                          },
                          beginAtZero: true
                        },
                        y:{
                          display: true,
                          title: {
                            display: true,
                            text: 'Training'
                          },
                          reverse: true
                        }
                    }
                  }
                }
                
                var ctx = document.getElementById('chartJSContainertrainingcount').getContext('2d');
                horizontalBarUserTrainingCount = new Chart(ctx, userTrainingCountOptions);

                }); //document.ready

 
                </script>
<!--
                <canvas id="chartJSContainer42" width="600" height="400"></canvas>
                <script>
                var options = {
                  type: 'horizontalBar',
                  data: {
                    labels:{{trainingnotfinusercountlbl | 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:{{trainingnotfinusercountvalues | raw}},
                          borderWidth: 1
                        }
                      ]
                  },
                  options: {
                      pan: {
                          enabled: true,
                          mode: 'x'
                      },
                      zoom: {
                          enabled: true,
                          mode: 'x'
                      },
                      scales: {
                        xAxes: [{
                          scaleLabel:{
                            display: true,
                            labelString: 'Anzahl'
                          },
                          ticks:{
                            beginAtZero: true
                          }

                        }],
                        yAxes: [{
                          scaleLabel: {
                            display: true,
                            labelString: 'Training'
                          },
                          ticks: {
                            reverse: false
                        }
                      }]
                    }
                  }
                }
                
                var ctx = document.getElementById('chartJSContainer42').getContext('2d');
                new Chart(ctx, options);
                </script>

              -->
                
        </div>
        <div class="box-footer d-flex justify-content-end">
              <button type="button" class="btn btn-primary mr-2" id="systemstatistiken-excelexport-training-count" title="Chart als Excel-Datei speichern"><i class="fas fa-file-excel mr-2"></i>Download Excel</button>
              <button type="button" class="btn btn-primary" id="systemstatistiken-pdfexport-training-count" title="Chart als PDF-Datei speichern"><i class="fas fa-file-pdf mr-2"></i>Download PDF</button>
        </div>
      </div>
    </div>
    <!--/lg-6-->