        <div class="col-lg-6">
            <div class="card user-detail-box">
            <div class="box-header">
              <!-- Originalheadline-->
              <!--<h4>Zu welcher Tageszeit aktive (in Sekunden)</h4>-->
              <h4>Benutzeraktivität (gemessen in Sekunden/Uhrzeit)</h4>
            </div>
            <div class="box-body">
                    <canvas id="chartJSContainersumhouractive" width="600" height="400"></canvas>
                    <script>
                     
                    var barUserActiveSumhour;
                    jQuery( document ).ready(function() {

                    var userActiveSumHourOptions = {
                      type: 'bar',
                      data: {
                        labels: {{sumhouractive_l| raw}},
                        datasets: [
                            {
                              label: 'Aktivität in Sekunden/Uhrzeit',
                              backgroundColor: 'rgba(0,255,255,0.25)',
                              borderColor: 'rgba(0,255,255,1)',
                              hoverBackgroundColor: 'rgba(0,255,255,0.5)',
                              showLine: false,
                              borderWidth: 1,
                              data: {{sumhouractive_v| raw}}
                              
                            }
                          ]
                      },
                      options: {
                                plugins: {
                          zoom: {
                            zoom: {
                              wheel: {
                                enabled: true,
                              },
                              pinch: {
                                enabled: true
                              },          
                              mode: 'xy',
                            },
                            pan: {
                                enabled: true,
                                mode: 'xy'
                              },
                          }
                        },
                        tooltips:{
                          callbacks:{
                            title:function(value){
                              // Varianten zur Darstellung der Zeit 
                              // timeVariant = 0: Darstellung in der Form HH:00
                              // timeVariant = 1: Darstellung in der Form HH Uhr
                              
                              // Nutzung des xLabel-Werts des Parameters value um den entsprechenden Wert des Labels zu erhalten
                              var timeVariant = 0;
                              var timeString = "";
                              if(timeVariant == 0){
                                // Stelle eine 0 an die Stundenzahl voran
                                if(value[0].xLabel<10){
                                  timeString = "0";
                                  timeString =timeString.concat(value[0].xLabel).concat(":00");

                                }
                                else{
                                  timeString = String(value[0].xLabel);
                                  timeString = timeString.concat(":00");
                                }
                              }
                              else if(timeVariant == 1){
                                timeString = String(value[0].xLabel).concat(" Uhr");
                              }
                              return timeString;
                            }
                          }
                        },
                        scales:{
                          xAxes:{
                            scaleLabel:{
                              display:true,
                              labelString: 'Uhrzeit'
                            }
                          },
                          yAxes:{
                            scaleLabel:{
                              display:true,
                              labelString: 'Zeit in Sekunden'
                            },
                            ticks:{
                              beginAtZero:true
                            }
                          }
                        }
                          
                      }
                    }
                  
                    
                    var ctx = document.getElementById('chartJSContainersumhouractive').getContext('2d');
                    barUserActiveSumhour = new Chart(ctx, userActiveSumHourOptions);

                    }); //document.ready


                    </script>
                    
            </div>

            
            <div class="box-footer d-flex justify-content-end">
                <button type="button" class="btn btn-primary mr-2" id="systemstatistiken-excelexport-sumhour" 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-sumhour" title="Chart als PDF-Datei speichern"><i class="fas fa-file-pdf mr-2"></i>Download PDF</button>
            </div>
          </div>
        </div>
        <!--/lg-6-->