        <div class="col-lg-6">
            <div class="card user-detail-box">
            <div class="box-header">
              <!--Originalheadline-->
              <!--<h4>Nutzer hinzugefügt am</h4>-->
              <h4>Anzahl hinzugefügte Benutzer</h4>
            </div>
            <div class="box-body">
                    <canvas id="chartJSContainerUserActive" width="600" height="400"></canvas>
                    <script>

                        var lineChartUserActive;
                        var lineChartUserActiveState;

                        jQuery(document).ready(function () {

                          var userActiveOptionsHour = {
                      type: 'line',
                      data: {
                        datasets: [
                            {
                              //label: 'Stunden',
                              label: 'Benutzer/Stunde',
                              showLine: false,
                              borderWidth: 1,
                              data: {{usercreatedatehour| raw}},
                              backgroundColor: "rgba(255,0,0,0.5)"
                            }, 
                          ]
                      },
                      
                      options: {
                        pan: {
                          enabled: true,
                          mode: 'xy',
                        },
                        plugins: {
                          zoom: {
                            zoom: {
                              wheel: {
                                enabled: true,
                              },
                              pinch: {
                                enabled: true
                              },          
                              mode: 'xy',
                            },
                            pan: {
                                enabled: true,
                                mode: 'xy'
                              },
                          }
                        },
                        scales: {
                          x:{
                            display: true,
                            type: 'time',
                                time: {
                              unit: 'month'
                            },
                            title:{
                              display: true,
                              text: 'Zeit'
                            }
                          },
                          y:{
                            display: true,
                            title: {
                              display: true,
                              text: 'Anzahl Benutzer'
                            },
                            beginAtZero: true
                          }
                        }
                      }
                      
                    }

                    var userActiveOptionsDay = {
                      type: 'line',
                      data: {
                        datasets: [
                            {
                              label: 'Benutzer/Tag',
                              showLine: false,
                              borderWidth: 1,
                              data: {{usercreatedateday| raw}},
                              backgroundColor: "rgba(0,255,0,0.5)"
                            },
                            
                          ]
                      },
                      options: {
                        pan: {
                          enabled: true,
                          mode: 'xy'
                      },
                        plugins: {
                          zoom: {
                            zoom: {
                              wheel: {
                                enabled: true,
                              },
                              pinch: {
                                enabled: true
                              },          
                              mode: 'xy',
                            },
                            pan: {
                                enabled: true,
                                mode: 'xy'
                              },
                          }
                        },
                        scales: {
                          x:{
                            display: true,
                            type: 'time',
                                time: {
                              unit: 'month'
                            },
                            title:{
                              display: true,
                              text: 'Zeit'
                            }
                          },
                          y:{
                            display: true,
                            title: {
                              display: true,
                              text: 'Anzahl Benutzer'
                            },
                            beginAtZero: true
                          }
                        }
                      }
                    }

                    var userActiveOptionsMonth = {
                      type: 'line',
                      data: {
                        datasets: [
                            {
                              label: 'Benutzer/Monat',
                              showLine: false,
                              borderWidth: 1,
                              data: {{usercreatedatemounth| raw}},
                              backgroundColor: "rgba(0,0,255,0.5)"
                            }
                            
                          ]
                      },
                      options: {
                        pan: {
                          enabled: true,
                          mode: 'xy'
                      },
                        plugins: {
                          zoom: {
                            zoom: {
                              wheel: {
                                enabled: true,
                              },
                              pinch: {
                                enabled: true
                              },          
                              mode: 'xy',
                            },
                            pan: {
                                enabled: true,
                                mode: 'xy'
                              },
                          }
                        },
                        scales: {
                          x:{
                            display: true,
                            type: 'time',
                                time: {
                              unit: 'month'
                            },
                            title:{
                              display: true,
                              text: 'Zeit'
                            }
                          },
                          y:{
                            display: true,
                            title: {
                              display: true,
                              text: 'Anzahl Benutzer'
                            },
                            beginAtZero: true
                          }
                        }
                      }
                    }
                    // Generiere line-Chart (Stunden)
                     var ctx = document.getElementById('chartJSContainerUserActive').getContext('2d');
                     lineChartUserActive = new Chart(ctx, userActiveOptionsHour);
                    // Zustand, der den aktuellen aktiven (sichtbaren) Chart angibt
                    // lineChartUserActiveState = 0 : Stunden
                    //                            1 : Tage
                    //                            2 : Monate
                     lineChartUserActiveState = 0;

                        }); //document.ready

                  

                    
                    </script>   
            </div>
            <div class="box-footer d-flex justify-content-between">
              <button type="button" class="btn btn-secondary" id="lineChartUserActiveHourButton">Stunden</button>
              <button type="button" class="btn btn-secondary" id="lineChartUserActiveDayButton">Tage</button>
              <button type="button" class="btn btn-secondary" id="lineChartUserActiveMonthButton">Monate</button>
              <button type="button" class="btn btn-secondary" id="systemstatistiken-reset-zoom-user-active">Reset Zoom</button>
            </div>
            <div class="box-footer d-flex justify-content-end">
                <button type="button" class="btn btn-primary mr-2" id="systemstatistiken-excelexport-user-active" 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-user-active" title="Chart als PDF-Datei speichern"><i class="fas fa-file-pdf mr-2"></i>Download PDF</button>
            </div>
          </div>
        </div>
        <!--/lg-6-->