        <div class="col-lg-6">
            <div class="card user-detail-box">
            <div class="box-header">
              <h4>Browserverteilung (gemessen in Seitenaufrufen)</h4>
            </div>
            <div class="box-body">
                    <canvas id="chartJSContainercountbrowser" width="600" height="400"></canvas>
                    <script>

                    var pieUserActiveCountBrowser;

                    jQuery( document ).ready(function() {
                      var userActiveCountBrowserOptions = {
                      type: 'pie',
                      data: {
                        labels: {{countbrowser_l| raw}},
                        datasets: [
                            {
                              showLine: false,
                              borderWidth: 1,
                              data: {{countbrowser_v| raw}},
                              backgroundColor: generateColorsPieChart({{countbrowser_v| 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('chartJSContainercountbrowser').getContext('2d');
                    pieUserActiveCountBrowser = new Chart(ctx, userActiveCountBrowserOptions);

                    }); //document.ready


                    </script>
            </div>
            <div>
              
            </div>
            <div class="box-footer d-flex justify-content-end">
                  <button type="button" class="btn btn-primary mr-2" id="systemstatistiken-excelexport-countbrowser" 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-countbrowser" title="Chart als PDF-Datei speichern"><i class="fas fa-file-pdf mr-2"></i>Download PDF</button>
           </div>
          </div>
        </div>
        <!--/lg-6-->