Ein Dashboard aufbauen (2. Teil)

★★☆ Fortgeschrittene - Dauer: 1 Stunde

In diesem Tutorial erfahren Sie, wie Sie von einem einfachen Dashboard mit 3 Visualisierungen zu einem organisierten, formatierten Dashboard mit interaktiven Widgets, die miteinander verbunden sind, übergehen können!

../_images/dashboard2_final.png

Dieses Tutorial vermittelt Ihnen Folgendes:

  • Wie Sie Widgets mithilfe eines Kontexts miteinander verbinden

  • Wie Sie weitere Opendatasoft-Widgets hinzufügen können

  • Wie Sie CSS-Klassen verwenden, um Ihr Dashboard zu formatieren und zu organisieren

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 dringend, den ersten Teil dieses Tutorials “Ein Dashboard aufbauen (1. Teil)” zu beachten, da dieser zweite Teil an der Stelle weitermacht, wo wir mit dem ersten Teil aufgehört haben. Die Voraussetzungen des ersten Teils enthalten außerdem alle Informationen über den gewählten Beispieldatensatz.

Alle Bilder anzeigen

Alle Bilder verbergen

Widgets miteinander verbinden

Am Ende des ersten Teils dieses Tutorials zum Erstellen eines Dashboards hatten wir ein einfaches Dashboard mit einem Titel und 3 Widgets (eine Tabellenansicht, eine Kartenansicht und ein Diagramm aus demselben Datensatz). In diesem vorherigen Teil haben wir festgestellt, dass der große Vorteil von Widgets darin besteht, dass sie miteinander interagieren können. Wenn wir jedoch eine Form auf der Karte zeichnen, werden die angezeigten Elemente der Karte gefiltert, wobei jedoch nur die Karte reagiert. Sowohl die Tabelle als auch das Diagramm ignorieren den Filter.

Das liegt daran, dass unsere Widgets noch nicht miteinander verbunden sind. Um dies zu erreichen, muss der gleiche Kontext für alle Widgets verwendet werden. Der Kontext ist der Knotenpunkt zwischen allen Elementen Ihrer Seite. Deshalb müssen alle Widgets, die miteinander interagieren sollen, den gleichen Kontext verwenden. Darüber hinaus ist der Kontext das Bindeglied zwischen Ihren Widgets und dem zugrunde liegenden Datensatz: Er bestimmt, auf Grundlage welchen Datensatzes Ihre Widgets funktionieren und welche Daten aus welchem Datensatz Ihre Widgets verwenden.

1 + Dann sehen wir uns diesen Kontext einmal genauer an! Schauen Sie sich den HTML-Code Ihrer Seite an. Für jedes von uns hinzugefügte Widget enthält der Code zwei Hauptelemente: zunächst ods-dataset-context und dann ods-map oder ods-table oder ods-chart, je nach Widget. Im folgenden Code haben wir Kommentare hinzugefügt, damit Sie die verschiedenen Elemente sehen können.

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

    <!-- TITLE OF THE PAGE -->
    <h1>UNESCO World Heritage</h1>

    <!-- TABLE WIDGET -->
    <!-- Context of the table -->
    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <!-- Table widget tag -->
      <ods-table context="worldheritagelistpublicus"></ods-table>
    </ods-dataset-context>

    <!-- MAP WIDGET -->
    <!-- Context of the map -->
    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <!-- Map widget tag -->
      <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
    </ods-dataset-context>

    <!-- CHART WIDGET -->
    <!-- Context of the chart -->
    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <!-- Chart widget tags -->
      <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/step110.png

Wie Sie sehen können, haben wir für jedes Widget einen eigenen Kontext. Das ist im vorliegenden Fall nicht besonders nützlich, da all unsere Widgets die gleichen Daten aus demselben Datensatz verwenden. Außerdem wird so verhindert, dass wir unsere Widgets miteinander verbinden können. Aus diesem Grund benötigen wir einen einzigen Kontext.

2 + At the very beginning of your code, above the div tag with the container-fluid class, declare the unique context of your page. Just like for the widgets, use the tag ods-dataset-context (and don’t forget the closing tag!). Look at the code below to understand how this tag works (once again, comments are used to add explainations to the code).

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

    <!--
        worldheritagelistpublicus: name of your context
        world-heritage-list@public-us: technical identifier of your dataset
    -->

</ods-dataset-context>
../_images/step24.png

3 + Löschen Sie den Kontext jedes Widgets. Vergessen Sie nicht, dass Tags aus zwei Teilen bestehen: Sie müssen sowohl das öffnende Tag als auch das schließende Tag für jedes Widget löschen. Ihr Code sollte nun so aussehen, mit einem einzigen Kontext, gefolgt von den 3 Widget-Tags:

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

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

    <h1>UNESCO World Heritage</h1>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <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>

  </div>
</div>

</ods-dataset-context>
../_images/step31.png

4 + Speichern Sie Ihre Seite und klicken Sie auf den Button Seite öffnen. Wenn Sie nun eine Form auf der Karte zeichnen, wird die Karte entsprechend dieser Form gefiltert, und die Tabelle als auch das Diagramm werden ebenfalls gefiltert. Unsere Widgets sind miteinander verknüpft!

../_images/step41.png

Weitere Opendatasoft-Widgets hinzufügen

5 + Jetzt, wo unsere Widgets miteinander verbunden sind, können wir weitere Widgets hinzufügen, um unser Dashboard noch besser zu machen. Beginnen wir mit dem Hinzufügen einer Suchleiste. Damit können wir eine Textsuche für alle Visualisierungen gleichzeitig durchführen. In der Opendatasoft-Dokumentation finden Sie weitere Informationen über das von uns verwendete Widget mit der Bezeichnung odsTextSearch

In der Dokumentation des Widgets odsTextSearch finden Sie unterschiedliche Informationen:

  • eine Beschreibung, um zu erfahren, wofür das Widget verwendet werden kann

  • den Widget-Code, den Sie kopieren und in den Code Ihrer Seite einfügen können

  • eine Tabelle mit den Attributen des Widgets und welche Werte Sie ausfüllen müssen, damit das Widget funktioniert

  • ein Beispiel für den endgültigen Code und das Endergebnis

../_images/step51.png

6 + Kopieren Sie den odsTextSearch Widget-Code.

<ods-text-search
      placeholder="{string}"
      button="{string}"
      field="{string}"
      suffix="{string}"
      context="{CatalogContext|DatasetContext|CatalogContext[]|DatasetContext[]}"
      autofocus="{string}">
</ods-text-search>
../_images/step61.png

7 + Fügen Sie den Widget-Code an die Stelle des Codes Ihrer Seite ein, wo er angezeigt werden soll. Fügen wir ihn unter dem Titel ein, über dem ersten Visualisierungs-Widget.

Vorsicht

Speichern Sie Ihre Seite noch nicht! Da die Attribute des Widgets noch nicht abgeschlossen sind, ist Ihr Widget für die Plattform ungültig und erzeugt einen Fehler.

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

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search
    placeholder="{string}"
    button="{string}"
    field="{string}"
    suffix="{string}"
    context="{CatalogContext|DatasetContext|CatalogContext[]|DatasetContext[]}"
    autofocus="{string}">
  </ods-text-search>

  <ods-table context="worldheritagelistpublicus"></ods-table>

  <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

  <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>

</div>
</div>

</ods-dataset-context>
../_images/step71.png

8 + In diesem Zustand kann die Suchleiste nicht funktionieren. Zuerst müssen wir bestimmen, welche Attribute wir benötigen, und ihre Werte ausfüllen. Für dieses Widget ist nur das Attribut Kontext obligatorisch. Löschen wir zum Zwecke der Einfachheit dieses Tutorials die anderen Attribute.

<ods-text-search context="{CatalogContext|DatasetContext|CatalogContext[]|DatasetContext[]}">
</ods-text-search>
../_images/step81.png

9 + Zu Beginn dieses Tutorials (siehe Schritt 2) haben wir einen einzigen Kontext erstellt, den wir auf unserer gesamten Seite verwenden können. Der Name unseres Kontexts lautet “worldheritagelistpublicus”. Es handelt sich um denselben Kontextnamen, den wir verwenden müssen, um das Kontextattribut unseres odsTextSearch-Widgets auszufüllen.

<ods-text-search context="worldheritagelistpublicus">
</ods-text-search>

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

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <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>

  </div>
</div>

</ods-dataset-context>
../_images/step91.png

10 + Speichern Sie Ihre Seite und klicken Sie auf Vorschau. Unser Dashboard hat jetzt eine Suchleiste!

../_images/step101.png

11 + Fügen wir unserem Dashboard ein weiteres sehr nützliches Element hinzu: Filter! Auf diese Weise können wir Filter für unsere Visualisierungen anwenden, genau wie bei der Navigation in einem Datensatz. In der Opendatasoft-Dokumentation finden Sie weitere Informationen über das von uns verwendete Widget mit der Bezeichnung odsFacets.

Wichtig

Das Widget odsFacets ermöglicht es, die bereits für den Datensatz eingerichteten Filter abzurufen. Das bedeutet, dass Ihr Widget nichts anzeigen kann wenn Sie es für ein Dashboard verwenden, aber der zugehörige Datensatz keinen definierten Filter hat.

../_images/step111.png

6 + Kopieren Sie den odsFacets Widget-Code.

<ods-facets context="{DatasetContext}">
</ods-facets>
../_images/step121.png

13 + Fügen Sie den Widget-Code an die Stelle des Codes Ihrer Seite ein, wo er angezeigt werden soll. Fügen wir ihn unter die Suchleiste ein.

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

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="{DatasetContext}">
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <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>

  </div>
</div>

</ods-dataset-context>
../_images/step131.png

14 + Genau wie beim odsTextSearch-Widget müssen die Attribute des odsFacets-Widgets ausgefüllt werden. Letzteres hat nur eines: das Attribut Kontext! Füllen wir es mit dem Namen unseres Seitenkontexts aus, ebenso wie beim odsTextSearch-Widget!

<ods-facets context="worldheritagelistpublicus">
</ods-facets>

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

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="worldheritagelistpublicus">
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <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>

  </div>
</div>

</ods-dataset-context>
../_images/step141.png

15 + Speichern Sie Ihre Seite und klicken Sie auf Vorschau. Die Filter unseres Datensatzes werden nun in unserem Dashboard angezeigt!

../_images/step151.png

16 + Nehmen wir jetzt einmal an, dass wir nicht alle Filter unseres Datensatzes anzeigen möchten. In unserem Beispiel der UNESCO-Weltkulturerbe wollen wir nur das Filtern nach Kategorie und Land ermöglichen. Kopieren Sie den folgenden Code (auch in der odsFacets Widget-Dokumentation verfügbar):

<ods-facets context="mycontext">
   <h3>First field</h3>
   <ods-facet name="myfield"></ods-facet>

   <h3>Second field</h3>
   <ods-facet name="mysecondfield"></ods-facet>
</ods-facets>
../_images/step161.png

17 + Fügen Sie ihn als Ersatz für den vorherigen, einfachen odsFacets Widget-Code ein, den wir im Vorfeld verwendet haben.

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

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="mycontext">
      <h3>First field</h3>
      <ods-facet name="myfield"></ods-facet>

      <h3>Second field</h3>
      <ods-facet name="mysecondfield"></ods-facet>
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <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>

  </div>
</div>

</ods-dataset-context>
../_images/step171.png

18 + Füllen Sie das Kontext-Attribut korrekt mit dem Namen Ihres Seitenkontexts aus.

<ods-facets context="worldheritagelistpublicus">
  <h3>First field</h3>
  <ods-facet name="myfield"></ods-facet>

  <h3>Second field</h3>
  <ods-facet name="mysecondfield"></ods-facet>
</ods-facets>
../_images/step181.png

19 + Werfen wir jetzt einen Blick auf den Rest des erweiterten odsFacets Widget-Codes. Die beiden h3-Tags weisen darauf hin, dass wir Titel hinzugefügt haben: sie werden verwendet, um den Namen der Filter zu schreiben, die wir anzeigen möchten, also “Kategorie” und “Land”. Das Attribut ods-facet name gibt die technische Kennung des Feldes an, auf dem der Filter basiert.

Hinweis

Um die technische Kennung zu erhalten, müssen Sie das Schema des Datensatzes kennen. Sie finden es in der Registerkarte Informationen des Datensatzes. Das Schema des Datensatzes bietet alle Informationen zu jedem Feld: Name (Beschriftung), Beschreibung, Kennung, Typ und ein Wertbeispiel. Es ist oft angebracht, den Typ und die Kennung jedes Feldes zu kennen, wenn Sie mit erweiterten Widget-Parametern arbeiten.

Im folgenden Code wurden Kommentare hinzugefügt, damit Sie die verschiedenen Elemente sehen, die uns vorliegen.

<!-- CONTEXT NAME -->
<ods-facets context="worldheritagelistpublicus">
   <!-- Name of filter #1 -->
   <h3>First field</h3>
   <!-- Technical identifier of related field -->
   <ods-facet name="myfield"></ods-facet>

   <!-- Name of filter #2 -->
   <h3>Second field</h3>
   <!-- Technical identifier of related field -->
   <ods-facet name="mysecondfield"></ods-facet>
 </ods-facets>
../_images/step191.png

20 + Wechseln zum Datenschema-Bereich der Registerkarte Informationen des Datensatzes.

../_images/step201.png

21 + Suchen Sie die technischen Kennungen der Felder, auf denen die Filter basieren, die Sie dem Dashboard hinzufügen möchten. In unserem UNESCO-Welterbe-Beispieldatensatz wollten wir nach Kategorie und Land filtern. Entsprechend sind die technischen Kennungen der Felder, die wir als Filter verwenden möchten Kategorie und Länder.

../_images/step211.png

22 + Zurück im Code Ihres Dashboards füllen Sie sowohl die Titel als auch die Attribute ods-facet name aus.

<ods-facets context="worldheritagelistpublicus">
  <h3>Category</h3>
  <ods-facet name="category"></ods-facet>

  <h3>Country</h3>
  <ods-facet name="states"></ods-facet>
</ods-facets>

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

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

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="worldheritagelistpublicus">
      <h3>Category</h3>
      <ods-facet name="category"></ods-facet>

      <h3>Country</h3>
      <ods-facet name="states"></ods-facet>
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <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>

  </div>
</div>

</ods-dataset-context>
../_images/step221.png

23 + Speichern Sie Ihre Seite und klicken Sie auf Vorschau. Unsere beiden ausgewählten Filter werden auf unserem Dashboard angezeigt!

../_images/step231.png

Formatieren Sie Ihr Dashboard: Organisieren Sie Ihre Widgets in Zeilen und Spalten

Unser Dashboard sieht ganz nett aus, aber um es noch ansehnlicher zu gestalten, können wir ihm jetzt etwas Stil verleihen und es anders organisieren. Bisher haben wir einfach alle unsere Elemente (Titel und Widgets) aufgereiht. Das sollten wir jetzt ändern!

Wir werden unser Dashboard in 2 Teile unterteilen:

  • auf der linken Seite bringen wir unsere Navigationselemente (die Suchleiste und die Filter darunter) an

  • auf der rechten Seite bringen wir unsere Datenvisualisierungen (die Tabelle und darunter die Karte und das Diagramm nebeneinander) an

../_images/dashboard__css-responsive-layout-1.png

Wie können wir dieses Aussehen für unser Dashboard erreichen? Stellen Sie sich Ihre Seite als Container vor. Innerhalb dieses Containers können Sie beliebig viele Zeilen haben. Und jede dieser Zeilen ist in 12 gleich große Spalten unterteilt.

Im HTML-Code sieht das Ganze so aus:

<div class="container">
   <div class="row">
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
   </div>
</div>

Wenn Sie eine Seite erstellen und deren Elemente organisieren möchten, müssen Sie sie in Zeilen einordnen. Und für jedes Element müssen Sie bestimmen, wie viele Spalten Sie diesem Element zuordnen möchten.

24 + Jetzt können wir unser Dashboard in Zeilen und Spalten neu organisieren. In unserem Beispiel werden wir die Navigation und die Datenvisualisierung in der gleichen Zeile einordnen. Wir verwenden 3 Spalten für die Navigationselemente und die restlichen 9 Spalten für die Visualisierungselemente. Und da wir die Karten- und Diagrammvisualisierungen nebeneinander anbringen möchten, werden wir eine Zeile für diese beiden erstellen, wobei beide jeweils 6 Spalten nutzen.

../_images/dashboard__css-responsive-layout-2.png

Im HTML-Code sieht unser Dashboard dann so aus:

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

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

    <h1>

      <div class="row">

        <!-- NAVIGATION PART -->
        <div class="col-xs-3">

          <!-- Search bar here -->
          <!-- Filters here -->

        </div>

        <!-- VISUALIZATIONS PART -->
        <div class="col-xs-9">

          <!-- Table widget here -->

          <div class="row">

            <div class="col-xs-6"> <!-- Map widget on the left --> </div>

            <div class="col-xs-6"> <!-- Chart widget on the right --> </div>

          </div>

        </div>

      </div>

  </div>
</div>

</ods-dataset-context>
../_images/step241.png

25 + Speichern Sie Ihre Seite und klicken Sie auf:tutorial-keycap:Vorschau. Unser Dashboard sieht wirklich schick aus!

../_images/step25.png

26 + Vielleicht wäre es angemessen etwas mehr Platz zwischen der Tabelle und den beiden anderen Visualisierungen zu haben. Fügen wir ein br Tag unter dem Tabellen-Widget ein, direkt vor der Zeile, die das Karten- und das Diagramm-Widget enthält. Dieses Tag bedeutet, dass wir eine zusätzliche leere Zeile an der Stelle des Tags sehen möchten. Es handelt sich außerdem um eines der HTML-Tags, die nicht aus zwei Teilen bestehen.

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

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

    <h1>UNESCO World Heritage</h1>

    <div class="row">

      <div class="col-xs-3">

        <ods-text-search context="worldheritagelistpublicus">
        </ods-text-search>

        <ods-facets context="worldheritagelistpublicus">
          <h3>Category</h3>
          <ods-facet name="category"></ods-facet>

          <h3>Country</h3>
          <ods-facet name="states"></ods-facet>
        </ods-facets>

      </div>

      <div class="col-xs-9">

        <ods-table context="worldheritagelistpublicus"></ods-table>

        <br>

        <div class="row">

          <div class="col-xs-6">
            <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
          </div>

          <div class="col-xs-6">
            <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>
          </div>

        </div>

      </div>

    </div>

  </div>
</div>

</ods-dataset-context>
../_images/step26.png

27 + Speichern Sie erneut und klicken Sie auf den Button Seite öffnen, um das Endergebnis zu sehen!


HERZLICHEN GLÜCKWUNSCH!

Sie haben dieses Tutorial abgeschlossen und wissen jetzt, wie man ein komplettes Dashboard mit verknüpften Widgets erstellt und wie man es mit CSS-Klassen formatiert! Wenn Sie mehr über CSS-Klassen und Responsivität erfahren möchten, können Sie unsere Dokumentation zu diesen Themen lesen <https://help.opendatasoft.com/platform/en/customizing_look_and_feel/07_designing_responsive_portal/responsive.html#responsive-page-layouts>`_!