        <div class="col-lg-6">
            <div class="card user-detail-box">
            <div class="box-header">
              <h4>Verteilung der Gerätetypen (gemessen in Seitenaufrufen)</h4>
            </div>
            <div class="box-body">
                    <canvas id="chartJSContainercountdevicetype" width="600" height="400"></canvas>
                    <script>

                    var pieUserActiveCountDeviceType;

                    jQuery( document ).ready(function() {
                      var userActiveCountDeviceTypeOptions = {
                      type: 'pie',
                      data: {
                        labels: {{countdevicetype_l| raw}},
                        datasets: [
                            {
                              showLine: false,
                              borderWidth: 1,
                              data: {{countdevicetype_v| raw}},
                              backgroundColor: generateColorsPieChart({{countdevicetype_l| raw}}.length),
                            }
                          ]
                      },
                      options: {
                        pan: {
                          enabled: false,
                          mode: 'x'
                        },
                        zoom: {
                            enabled: false,
                            mode: 'x'
                        },
                        tooltips:{
                          callbacks:{
                            // Hier Bearbeitung des Labels, um auch den prozentualen Anteil anzuzeigen
                            label: function(item,data){

                              // Berechne Gesamtwert für den Datensatz
                              var total = data.datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array){
                                return parseInt(previousValue) + parseInt(currentValue);
                              });

                              // Rufe das Element ab, welches durch den Mauszeiger markiert wird
                              var currentItem = data.datasets[0].data[item.index];
                              // Berechne den Anteil des aktuellen Elements im Vergleich zum Gesamtwert
                              var percentage = ((currentItem/total)*100).toFixed(2);
                              return data.labels[item.index]+": "+ currentItem+" (" +percentage + "%)";
                            }
                          }
                        }
                          
                      }
                    }

                      // Funktion, die einen zufälligen RGBA-Farbwert als String generiert.
                    function randomizeColorsPieChart(){
                      // Generiere zufällige Werte für die Farbbestandteile rot, grün und blau
                      var rValue = Math.floor(Math.random() * 255);
                      var gValue = Math.floor(Math.random() * 255);
                      var bValue = Math.floor(Math.random() * 255);
                      // Erzeugen des Strings zur Angabe des RGBA-Wert. A(lpha) wird hier fest auf 1 gesetzt
                      var colorString = "rgba("+rValue+","+gValue+","+bValue+",1)";
                        
                      return colorString;
                    }

                    // Funktion, um ein Array an Farben für die Pie-Charts zu erzeugen
                    // numberElements     Anzahl an Elementen/"Kuchenstücke" des Pie-Charts
                    //
                    // Abstände zwischen den Farben werden hier bisher noch nicht berücksichtigt. Es ist daher möglich, dass sich benachbarte Werte relativ ähnlich sind.
                    function generateColorsPieChart(numberElements){

			                var colorsPieChart = [];
  
			                for(var i=0; i< numberElements; i++){
				                colorsPieChart.push(randomizeColorsPieChart());
			                }
  
			                return colorsPieChart;
		                }
                                       
                    var ctx = document.getElementById('chartJSContainercountdevicetype').getContext('2d');
                    pieUserActiveCountDeviceType = new Chart(ctx, userActiveCountDeviceTypeOptions);

                    });
                                      
                    </script>
                    
            </div>
            <div class="box-footer d-flex justify-content-end">
                  <button type="button" id="systemstatistiken-excelexport-countdevicetype" class="btn btn-primary mr-2" title="Chart als Excel-Datei speichern"><i class="fas fa-file-excel mr-2"></i>Download Excel</button>
                  <button type="button" id="systemstatistiken-pdfexport-countdevicetype" class="btn btn-primary" title="Chart als PDF-Datei speichern"><i class="fas fa-file-pdf mr-2"></i>Download PDF</button>
           </div>
          </div>
        </div>
        <!--/lg-6-->