<div class="col-lg-6">
    <div class="card user-detail-box">
    <div class="box-header">
      <!--Originalheadline-->
      <!--<h4>letztes Login am</h4>-->
      <h4>Zeitpunkt des letzten Logins</h4>
    </div>
    <div class="box-body">
            <canvas id="chartJSContainerlastlogin" width="600" height="400"></canvas>         
            <script>

            var lineChartUserLogin;
            var lineChartUserLoginState;

            jQuery( document ).ready(function() {
              var userLoginOptionsHour = {
              type: 'line',
              data: {
                datasets: [
                    {
                      //label: 'Stunden',
                      label: 'Benutzer/Stunde',
                      showLine: false,
                      borderWidth: 1,
                      data: {{lastloginhour| raw}},
                      backgroundColor: 'rgba(255,0,0,0.5)'
                      
                    },
                    
                  ]
              },
              options: {
              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 userLoginOptionsDay = {
              type: 'line',
              data: {
                datasets: [
                    
                    {
                      //label: 'Tage',
                      label: 'Benutzer/Tag',
                      showLine: false,
                      borderWidth: 1,
                      data: {{lastloginday| 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 userLoginOptionsMonth = {
              type: 'line',
              data: {
                datasets: [
                    {
                      //label: 'Monat',
                      label: 'Benutzer/Monat',
                      showLine: false,
                      borderWidth: 1,
                      data: {{lastloginmounth| 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
                  }
                }
              }
            }
            
            var ctx = document.getElementById('chartJSContainerlastlogin').getContext('2d');
            lineChartUserLogin  = new Chart(ctx, userLoginOptionsHour);
            // Zustand, der den aktuellen aktiven (sichtbaren) Chart angibt
                    // lineChartUserLoginState =  0 : Stunden
                    //                            1 : Tage
                    //                            2 : Monate
              lineChartUserLoginState = 0;

            });

            
            </script>
            
    </div>

    <div class="box-footer d-flex justify-content-between">
      <button type="button" class="btn btn-secondary" id="lineChartUserLoginHourButton">Stunden</button>
      <button type="button" class="btn btn-secondary" id="lineChartUserLoginDayButton">Tage</button>
      <button type="button" class="btn btn-secondary" id="lineChartUserLoginMonthButton">Monate</button>
      <button type="button" class="btn btn-secondary" id="systemstatistiken-reset-zoom-user-login">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-login" 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-login" title="Chart als PDF-Datei speichern"><i class="fas fa-file-pdf mr-2"></i>Download PDF</button>
    </div>
  </div>
</div>
<!--/lg-6-->