<div class="col-lg-6">
  <div class="card user-detail-box">
  <div class="box-header">
    <!--Originalheadline-->
    <!--<h4>Zu welcher Tageszeit aktive (Klicks)</h4>-->
    <h4>Benutzeraktivität (gemessen in Seitenaufrufe/Uhrzeit)</h4>
  </div>
  <div class="box-body">
          <canvas id="chartJSContainercounthouractive" width="600" height="400"></canvas>
          <script>

            var barUserActiveCounthour;

            jQuery( document ).ready(function() {
              var userActiveCounthourOptions = {
            type: 'bar',
            data: {
              labels: {{counthouractive_l| raw}},
              datasets: [
                  {
                    label: 'Aktivität in Seitenaufrufe/Uhrzeit',
                    backgroundColor: 'rgba(0,0,255,0.25)',
                    borderColor: 'rgba(0,0,255,1)',
                    hoverBackgroundColor: 'rgba(0,0,255,0.5)',
                    showLine: false,
                    borderWidth: 1,
                    data: {{counthouractive_v| raw}}
                    
                  }
                ]
            },
            options:{
              plugins: {
                  zoom: {
                    zoom: {
                      wheel: {
                        enabled: true,
                      },
                      pinch: {
                        enabled: true
                      },          
                      mode: 'xy',
                    },
                    pan: {
                        enabled: true,
                        mode: 'xy'
                      },
                  },
                  tooltip:{
                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].label<10){
                        timeString = "0";
                        timeString =timeString.concat(value[0].label).concat(":00");

                      }
                      else{
                        timeString = String(value[0].label);
                        timeString = timeString.concat(":00");
                      }
                    }
                    else if(timeVariant == 1){
                      timeString = String(value[0].label).concat(" Uhr");
                    }
                    return timeString;
                  }
                }
              }
                },
              scales: {
                  x:{
                      display: true,
                      title:{
                      display: true,
                        text: 'Uhrzeit'
                      }
                  },
                  y:{
                      display: true,
                      title: {
                        display: true,
                        text: 'Anzahl Seitenaufrufe'
                      },
                      beginAtZero: true
                  }
              },

            }

          }
        
          
          var ctx = document.getElementById('chartJSContainercounthouractive').getContext('2d');
          barUserActiveCounthour = new Chart(ctx, userActiveCounthourOptions);

            }); //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-counthour" 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-counthour" title="Chart als PDF-Datei speichern"><i class="fas fa-file-pdf mr-2"></i>Download PDF</button>
  </div>
</div>
</div>
<!--/lg-6-->