Benutzerdefinierte Visualisierungen erstellen

Der Custom Visualization Builder (CVB) ist eine Testumgebung, in der Entwickler ihre benutzerdefinierte Visualisierung erstellen und testen können, bevor sie sie in Looker einfügen. Hier ein Beispiel für die Verwendung dieses Tools:

Die CVB hat zwei Seiten:

1. Auf der linken Seite wird der JavaScript-Code Ihrer Visualisierung geschrieben.
2. Die rechte Seite ist ebenfalls in zwei Bereiche unterteilt:
   1. Der obere Bereich enthält die folgenden Tabs:
      1. Abfrageantwort: Hier können Sie das JSON-Format Ihrer Abfrageantwort hinzufügen.
      2. Rohdaten: Hier müssen Sie ein Array der von Looker zurückgegebenen Daten eingeben.
      3. Abhängigkeiten: Dieser Tab ist ebenfalls obligatorisch. Sie müssen also ein String-Array mit den CDN-Links aller Abhängigkeiten eingeben, die für Ihre Visualisierung erforderlich sind.
   2. Der untere Bereich, in dem die resultierende Visualisierung angezeigt wird.

Angenommen, Sie möchten die folgende Visualisierung mit der Chart.js-Bibliothek erstellen:

Das Visualisierungsobjekt hat zwei erforderliche Eigenschaften: die create- und die updateAsync-Funktion. In dieser Anleitung liegt der Schwerpunkt auf der Funktion, die jedes Mal aufgerufen wird, wenn sich der Zustand Ihrer Visualisierung ändern muss. Sie wird immer nach create aufgerufen und kann mehrmals aufgerufen werden.

Schritt 1: Daten extrahieren und vorbereiten

Die Daten werden über den ersten Parameter, der üblicherweise data heißt, an die Funktion updateAsync übergeben. Im folgenden Code wird jedes Element dieses data-Objekts durchlaufen und die Datenwerte in ein actual_data-Array und die Labels in ein data_labels-Array geschoben. Diese beiden Arrays werden später zum Zeichnen der Visualisierung verwendet.

const data_labels = []
const actual_data = []

data.forEach((d)=>{
     data_labels.push(d["Products Category"])
     actual_data.push(d["Products Count"])
})

Schritt 2: Visualisierung an die Seite anhängen

Chart.js benötigt eine canvas, um die Visualisierung auf der Seite zu rendern. Sie müssen ein canvas-Element mit einem id Ihrer Wahl erstellen (in dieser Anleitung wird myChart verwendet) und dieses canvas an das div-Element anhängen, das vom CVB zum Rendern der Visualisierung verwendet wird. Diese div hat ein ID-Attribut namens vis.

const vizCanvas = document.createElement('canvas')
vizCanvas.setAttribute("id", "myChart")

const vizDiv = document.getElementById("vis")
vizDiv.appendChild(vizCanvas)

Schritt 3: Visualisierung auf der Seite zeichnen

Da Sie jetzt ein canvas-Element mit der ID myChart auf der Seite haben, können Sie dieses Element anvisieren und die Visualisierung so zeichnen:

const ctx = document.getElementById("myChart")
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: data_labels,
    datasets: [{
      label: 'Top 5 Product Category',
      data: actual_data,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
  }
});

doneRendering()

Es ist wichtig, die Funktion doneRendering am Ende aufzurufen, um anzugeben, dass die Visualisierung vollständig gerendert wurde. Dies ist besonders wichtig, wenn für Ihre Visualisierung asynchrone Aufrufe erforderlich sind oder sie als PDF gerendert werden muss.

Der Code sieht dann so aus:

const visObject = {
    create: function(element, config){
        element.innerHTML = "";
    },

    updateAsync: function (data, element, config, queryResponse, details, doneRendering) {
        const data_labels = []
        const actual_data = []

        data.forEach((d)=>{
            data_labels.push(d["Products Category"])
            actual_data.push(d["Products Count"])
        })

        const vizCanvas = document.createElement('canvas')
        vizCanvas.setAttribute("id", "myChart")

        const vizDiv = document.getElementById("vis")
        vizDiv.appendChild(vizCanvas)

        const ctx = document.getElementById("myChart")
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data_labels,
                datasets: [{
                    label: 'Top 5 Product Category',
                    data: actual_data,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },

            }
        });

        doneRendering()
    }
};

looker.plugins.visualizations.add(visObject);

Daten aus Looker

Hier sind die von Looker zurückgegebenen Daten, die Sie auf dem Tab RAW DATA (Rohdaten) des CVB angeben können:

[{"Products Category":"Jumpsuits & Rompers","Products Count":"162"},
{"Products Category":"Suits","Products Count":"184"},
{"Products Category":"Skirts","Products Count":"364"},
{"Products Category":"Plus","Products Count":"439"},
{"Products Category":"Blazers & Jackets","Products Count":"551"}]

Abhängigkeiten

Für das Rendern dieser Visualisierung ist die folgende Abhängigkeit erforderlich:

["https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"]

Antwort auf Abfrage

Sie können die Abfrageantwort in Looker extrahieren, indem Sie einen API-Aufruf an den Endpunkt Get Query senden.

Letzter Schritt

Sobald Ihr Code funktioniert und die Visualisierung wie erwartet gerendert wird, können Sie der Anleitung in der Dokumentation folgen, um Ihre Visualisierung in Looker einzureichen.