<div class="col-lg-6">
    <div class="card user-detail-box">
    <div class="box-header">
      <!--Originalheadline-->
      <!--<h4>Lektion abgeschlossen</h4>-->
      <h4>Anzahl abgeschlossene Lektionen</h4>
    </div>
    <div class="box-body">
            <canvas id="chartJSContainerlektion" width="600" height="400"></canvas>           
            <script>

              var lineChartLektionState; 
              var lineChartLektion;

              jQuery( document ).ready(function() {
                var userLektionenOptionsHour = {
              type: 'line',
              data: {
                //labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [
                    {
                      //label: 'Stunden',
                      label: 'Lektionen/Stunde',
                      showLine: false,
                      borderWidth: 1,
                      data: {{lektionhour| 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 Lektionen'
                      },
                      beginAtZero: true
                  }
                  
                }
              }
            }


            var userLektionenOptionsDay = {
              type: 'line',
              data: {
                //labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [
                    
                    {
                      //label: 'Tage',
                      label: 'Lektionen/Tag',
                      showLine: false,
                      borderWidth: 1,
                      data: {{lektionday| 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 Lektionen'
                      },
                      beginAtZero: true
                  }
                  
                }
              }
            }



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

            
             var ctx = document.getElementById('chartJSContainerlektion').getContext('2d');
             lineChartLektion = new Chart(ctx, userLektionenOptionsHour);
            // Zustand, der den aktuellen aktiven (sichtbaren) Chart angibt
                    // lineChartLektionState =    0 : Stunden
                    //                            1 : Tage
                    //                            2 : Monate
             lineChartLektionState = 0;

              }); //document.ready

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