
<div class="col-lg-6">
    <div class="card user-detail-box">
    <div class="box-header">
      <!--Originalheadline-->
      <!--<h4>Nutzereingaben</h4>-->
      <h4>Anzahl Benutzereingaben</h4>
    </div>
    <div class="box-body">
            <canvas id="chartJSContainerinput" width="600" height="400"></canvas>          
            <script>

              var lineChartUserInputState;
              var lineChartUserInput;

              jQuery( document ).ready(function() {

            var userInputOptionsHour = {
              type: 'line',
              data: {
                //labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [
                    {
                      //label: 'Stunden'
                      label: 'Eingaben/Stunde',
                      showLine: false,
                      borderWidth: 1,
                      data: {{inputhour| 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 Eingaben'
                      },
                      beginAtZero: true
                  }
                  
                }
              }
            }

            var userInputOptionsDay = {
              type: 'line',
              data: {
                //labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [
                    
                    {
                      //label: 'Tage',
                      label: 'Eingaben/Tag',
                      showLine: false,
                      borderWidth: 1,
                      data: {{inputday| raw}},
                      backgroundColor: 'rgba(0,255,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 Eingaben'
                      },
                      beginAtZero: true
                  }
                  
                }
              }
            }

            var userInputOptionsMonth = {
              type: 'line',
              data: {
                //labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [
                    
                    {
                      //label: 'Monat',
                      label: 'Eingaben/Monat',
                      showLine: false,
                      borderWidth: 1,
                      data: {{inputmounth| raw}},
                      backgroundColor: 'rgba(0,0,255,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 Eingaben'
                      },
                      beginAtZero: true
                  }
                  
                }
              }
            }
            
             var ctx = document.getElementById('chartJSContainerinput').getContext('2d');
             lineChartUserInput = new Chart(ctx, userInputOptionsHour);
            // Zustand, der den aktuellen aktiven (sichtbaren) Chart angibt
                    // lineChartUserInputState =  0 : Stunden
                    //                            1 : Tage
                    //                            2 : Monate
             lineChartUserInputState = 0;

              }); //document.ready


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