Ein Dashboard aufbauen (1. Teil)

★☆☆ Anfänger - Dauer: 30 Minuten

In diesem Tutorial erfahren Sie, wie Sie ein Dashboard mit 3 Visualisierungen aus einem Datensatz erstellen, der auf einem Opendatasoft-Portal veröffentlicht wurde.

../_images/dashboard1_final.png

Dieses Tutorial vermittelt Ihnen Folgendes:

  • Was ein Widget ist

  • Was ein Iframe ist

  • Der Unterschied zwischen einem Widget und einem Iframe

  • Wie Sie ein Widget in einer mit Opendatasoft erstellten Inhaltsseite verwenden

VORRAUSSETZUNGEN

  • Um ein Dashboard zu erstellen, benötigen Sie Zugriff auf das Backoffice eines Opendatasoft-Portals und die Berechtigung “Alle Seiten bearbeiten”.

  • Wir empfehlen Ihnen, für dieses Tutorial den Datensatz “World Heritage List” (Liste der Weltkulturerbe) zu verwenden, der in unserem Datennetzwerk veröffentlicht wurde <https://data.opendatasoft.com/explore/dataset/world-heritage-list%40public-us/map/?location=2,18.46273,-0.44037&basemap=mapbox.streets>`_. Diesen Datensatz verwenden wir als Beispiel im gesamten Tutorial. Wenn Sie das Tutorial mit einem anderen Datensatz fortsetzen möchten, so sollte dieser über eine Tabellenansicht, eine Kartenansicht sowie eine Analyseansicht verfügen. Sie müssen außerdem Ihren eigenen Seitencode an den von Ihnen gewählten Datensatz anpassen.

Alle Bilder anzeigen

Alle Bilder verbergen

Erstellen Sie Ihre Inhaltsseite

1 + Öffnen Sie den Seitenbereich des Backoffice.

../_images/step1.png

2 + Klicken Sie auf den Button + Neue Seite, um eine neue Inhaltsseite zu erstellen.

../_images/step2.png

3 + Standardmäßig gelangen Sie zur Registerkarte Eigenschaften. Diese enthält verschiedene Informationen über die Seite. Einige hiervon müssen ausgefüllt werden, da Sie die Seite sonst nicht speichern können. Geben Sie einen URL-Suffix sowie einen Titel der Seite an. Sie können auch eine Beschreibung und Tags hinzufügen.

../_images/step3.png

4 + Klicken Sie auf den Button Speichern, um die neu erstellte Inhaltsseite zu speichern.

../_images/step4.png

5 + Öffnen Sie die Registerkarte Inhalt.

../_images/step5.png

6 + Klicken Sie auf Im Expertenmodus bearbeiten, um auf den HTML-/CSS-Code der Seite zuzugreifen. Es erscheint ein Popup-Fenster. Klicken Sie zur Bestätigung auf Ja, in den Expertenmodus wechseln.

../_images/step6.png

Im Bereich des HTML-/CSS-Codes sollten Sie den folgenden Code sehen:

<div class="container-fluid">
    <div class="ods-box" ></div>
</div>

Wichtig

In der HTML-Sprache wird jedes Element durch ein Tag dargestellt. Dieses Tag wird zwischen den Zeichen < und > geschrieben und besteht meist aus zwei Teilen, einem einleitenden Tag und einem abschließenden Tag. Z. b. <p></p> für Absätze, <h1></h1> für die Titelzeile, <div></div> für einen Abschnitt/Unterabschnitt usw.

Die Tags <div class="container-fluid"> und <div class="ods-box" > helfen Ihnen, Ihre Seite richtig zu formatieren, damit sich alle Elemente Ihrer Inhaltsseite in einem vordefinierten Fenster mit Rändern befinden. Alle neuen Elemente, die Sie später hinzufügen, sollten zwischen diese 2 Tags eingefügt werden.

<div class="container-fluid">
 <div class="ods-box">

   This is where you will put your code

 </div>
</div>
../_images/step6b.png

7 + Speichern Sie Ihre Seite.

../_images/step7.png

8 + Klicken Sie auf Vorschau, um die aktuelle Darstellung Ihrer Seite zu sehen. Klicken Sie erneut auf Vorschau, um das Vorschaufenster auszublenden und zum Code zurückzukehren.

../_images/step8.png

Versehen Sie Ihre Seite mit Inhalten: Datenvisualisierungen

Rufen Sie den Widget-Code einer Visualisierung ab

Wichtig

Ein Widget ist ein Code, der es jedem ermöglicht, ein interaktives Element direkt auf einer Webseite zu integrieren. Opendatasoft bietet unterschiedliche Widgets, die in der Widget-Dokumentation aufgelistet und erläutert werden. Einige der häufigsten Opendatasoft-Widgets - die wir in diesem Tutorial verwenden - sind die Visualisierungs-Widgets. Jede Datenvisualisierung eines veröffentlichten Datensatzes ist als Widget verfügbar. Dessen Code wird unterhalb der Visualisierung angezeigt und kann kopiert werden.

9 + Öffnen Sie den Datenbereich, wo unser Datensatz veröffentlicht wird. Stellen Sie sicher, dass Sie sich auf der Seite des Datensatzes befinden, auf der Sie die verfügbaren Datenvisualisierungen sehen können.

../_images/step10.png

10 + Beginnen wir mit der Tabellenansicht. Klicken Sie auf die Registerkarte Tabelle.

../_images/step9.png

11 + Scrollen Sie in der Tabelle nach unten. 3 Registerkarten sollten zu sehen sein: Teilen, Einbettung und Widget. Unter Teilen wird die direkte URL der Visualisierung angezeigt. Unter Einbettung wird der Iframe-Code der Visualisierung angezeigt. Unter Widget wird der Widget-Code der Visualisierungen angezeigt. Ob Code oder URL: jedes Element kann kopiert und dann eingefügt werden. Für dieses Tutorial verwenden wir die Widget-Codes der Tabellen-,Karten- und Analyse-Visualisierungen unseres Datensatzes.

../_images/step11.png

Wichtig

Ein Iframe bietet die Möglichkeit, Opendatasoft-Inhalte einfach und sicher in einen isolierten Bereich zu integrieren, unabhängig vom Rest der Seite. Iframes eignen sich ideal, wenn Sie Opendatasoft-Inhalte außerhalb der Opendatasoft-Umgebung integrieren möchten, wobei wahrscheinlich einige Interaktions- und Anpassungsmaßnahmen erforderlich sind. Widgets können auch in eine Seite außerhalb der Opendatasoft-Umgebung integriert werden, doch würde dies einen erheblichen Aufwand mit sich bringen.

Da wir ein Dashboard direkt auf einer Opendatasoft-Seite erstellen, ist die Verwendung von Opendatasoft-Widgets die beste Option. In der Opendatasoft-Umgebung sind sie leicht anpassbar und sehr interaktiv mit anderen Widgets.

12 + Klicken Sie in der Registerkarte Tabelle unseres Datensatzes (wo der Widget-Code angezeigt wird) auf den Button KOPIEREN, um den Widget-Code der Tabellenvisualisierung zu kopieren.

../_images/step12.png

Fügen Sie Ihrer Seite ein Visualisierungs-Widget hinzu

13 + Wechseln Sie erneut zum Backoffice, um Ihre Opendatasoft-Inhaltsseite weiter zu bearbeiten.

../_images/step13.png

14 + Fügen Sie Ihren Widget-Code der Tabellenvisualisierung an der richtigen Stelle ein, d. h. zwischen den Tag ods-box (siehe 6. Schritt).

<div class="container-fluid">
  <div class="ods-box">

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <ods-table context="worldheritagelistpublicus" sort="date_inscribed"></ods-table>
    </ods-dataset-context>

  </div>
</div>
../_images/step14.png

15 + Speichern Sie Ihre Seite und klicken Sie auf Vorschau: unsere Seite verfügt nun über eine Tabellenvisualisierung!

../_images/step15.png

Fügen Sie Ihrer Seite weitere Widgets hinzu: Karte und Diagramm

16 + Fügen wir unserer Seite jetzt eine Karte hinzu! Rufen Sie wie eben den Widget-Code aus der Kartenansicht unseres Datensatzes ab (siehe Schritte 9 bis 12, jedoch unter Verwendung der Registerkarte Karte).

../_images/step16.png

17 + Fügen Sie Ihren Widget-Code der Kartenvisualisierung unter dem Widget-Code der Tabellenvisualisierung ein (siehe “Fügen Sie Ihrer Seite ein Widget hinzu”).

<div class="container-fluid">
  <div class="ods-box">

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <ods-table context="worldheritagelistpublicus" sort="date_inscribed"></ods-table>
    </ods-dataset-context>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
    </ods-dataset-context>

  </div>
</div>
../_images/step17.png

18 + Fügen wir noch etwas hinzu: ein Diagramm! Rufen Sie den Widget-Code aus der Analyseansicht unseres Datensatzes ab.

../_images/step18.png

19 + Fügen Sie Ihren Widget-Code der Analysevisualisierung unter dem Widget-Code der Kartenvisualisierung ein.

<div class="container-fluid">
  <div class="ods-box">

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <ods-table context="worldheritagelistpublicus"></ods-table>
    </ods-dataset-context>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
    </ods-dataset-context>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <ods-chart align-month="true">
        <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
          <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
          </ods-chart-serie>
        </ods-chart-query>
      </ods-chart>
    </ods-dataset-context>

  </div>
</div>
../_images/step19.png

20 + Speichern Sie Ihre Seite und klicken Sie auf Vorschau: Wir haben jetzt 3 Visualisierungen auf unserer Seite!

../_images/step20.png

Fügen Sie Ihrer Inhaltsseite einen Titel hinzu

21 + In HTML werden Titel (Header genannt) im Allgemeinen durch h1-Tags definiert. Das h ist unveränderlich, es steht für “header”. Die Zahl (hier 1) kann jedoch durch eine beliebige Zahl von 1 bis 6 ersetzt werden, wobei h1 die Hauptüberschrift und h6 die letzte Zwischenüberschrift ist. Fügen Sie über allen der Seite hinzugefügten Widget-Codes der Visualisierung und direkt unter dem Tag ods-box eine Hauptüberschrift für Ihre Inhaltsseite hinzu.

<div class="container-fluid">
  <div class="ods-box">

    <h1>Write your title here</h1>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <ods-table context="worldheritagelistpublicus"></ods-table>
    </ods-dataset-context>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
    </ods-dataset-context>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <ods-chart align-month="true">
        <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
          <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
          </ods-chart-serie>
        </ods-chart-query>
      </ods-chart>
    </ods-dataset-context>

  </div>
</div>
../_images/step21.png

22 + Speichern Sie Ihre Seite und klicken Sie auf:tutorial-keycap:Vorschau: unser Dashboard hat jetzt einen Titel!

../_images/step22.png

23 + Klicken Sie auf den Button Seite öffnen, um das Endergebnis Ihrer Seite im Portal zu sehen.

../_images/step23.png

HERZLICHEN GLÜCKWUNSCH!

Sie haben dieses Tutorial abgeschlossen und wissen jetzt, wie man ein einfaches Dashboard mit 3 Datensatz-Visualisierungen erstellt!

Wenn Sie Ihr Dashboard noch mehr anpassen möchten, können Sie sich den zweiten Teil dieses Tutorials ansehen: “Ein Dashboard aufbauen (2. Teil)”. Hier erfahren Sie, wie Sie Ihre Widgets miteinander verknüpfen, erweiterte Widgets hinzufügen und Ihr Dashboard besser organisieren und gestalten können.