Hoe een dashboard bouwen (deel 2)

★★☆ Intermediate - tijd: 1 uur

In deze handleiding leert u hoe u van een eenvoudig dashboard met 3 weergaven kunt gaan naar een georganiseerd, geformatteerd dashboard met interactieve widgets die aan elkaar zijn gekoppeld!

../_images/dashboard2_final.png

Met deze handleiding leert u:

  • hoe met behulp van een context widgets aan elkaar koppelen

  • hoe andere Opendatasoft-widgets toevoegen

  • hoe CSS-klassen gebruiken om uw dashboard te formatteren en te organiseren

VOORVEREISTEN

  • Om een dashboard te kunnen aanmaken, moet u toegang hebben tot de back-office van een Opendatasoft-portaal en moet u de toelating “Alle pagina’s bewerken” hebben.

  • U wordt sterk aangeraden om het eerste deel van deze dashboardhandleiding , “Hoe een dashboard bouwen (deel1)” te volgen omdat dit tweede deel begint met het datgene waarmee we in het eerste deel zijn geëindigd. De voorvereisten van het eerste deel bevatten ook alle informatie over de gekozen voorbeelddataset.

Alle afbeeldingen tonen

Alle afbeeldingen verbergen

Uw widgets aan elkaar koppelen

Op het einde van het eerste deel van deze handleiding over hoe een dashboard kan worden gebouwd, hadden we een gewoon dashboard met een titel en 3 widgets (een tabelweergave, een kaartweergave en een grafiek uit eenzelfde dataset) boven elkaar. In het vorige deel zagen we dat het grote voordeel van widgets is dat ze met elkaar kunnen interageren. Wanneer we echter een vorm op een kaart tekenen, filtert deze de weergegeven items op de kaart maar jammer genoeg reageert enkel de kaart. Zowel de tabel als de grafiek negeren onze filter.

Dit is omdat onze widgets nog niet aan elkaar zijn gekoppeld. Het geheim hiervoor is om dezelfde context voor alle widgets te gebruiken. De context is het scharnierpunt tussen elk element van uw pagina. Daarom moeten alle widgets die met elkaar zouden moeten interageren, dezelfde context hebben. Bovendien is de context de link tussen uw widgets en de achterliggende dataset: hij definieert op welke dataset uw widgets zouden moeten werken, de data uit welke dataset die uw widgets zouden moeten gebruiken.

1 + We gaan eerste deze context zoeken! Bekijk de HTML-code van uw pagina. Voor elke widget die we hebben toegevoegd, bevat de code ervan 2 hoofdelementen: eerste een ods-dataset-context en daarna een ods-map of ods-table of ods-chart afhankelijk van de widget. In de code eronder hebben we commentaren toegevoegd om u te helpen om de verschillende elementen die we hebben, te zien.

<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

Zoals u kunt zien, hebben we een context voor elke widget. Ten eerste is dit niet echt nuttig in ons geval omdat al onze widgets dezelfde data uit dezelfde dataset gebruiken. Ten tweede verhindert deze ons onze widgets aan elkaar te koppelen. We moeten een unieke context hebben.

2 + Helemaal in het begin van uw code, boven het div-label met de container-fluid klasse, staat de unieke context van uw pagina. Gebruik net zoals voor de widgets het label “ods-dataset-context” (en vergeet het eindlabel niet). Bekijk de onderstaande code om te begrijpen hoe dit label werkt (opnieuw worden er commentaren gebruikt om uitleg aan de code toe te voegen).

<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 + Verwijder de context van elke widget. Vergeet niet dat labels altijd met twee zijn: uw moet voor elke widget zowel het openingslabel als het eindlabel verwijderen. Uw code zou er nu als volgt moeten uitzien, met een unieke context gevolgd door de 3 widgetlabels:

<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 + Sla uw pagina op en klik op de knop Open page . Wanneer u nu een vormt op de kaart tekent, zal de kaart worden gefilterd volgens die vorm, maar zullen zowel de tabel als de grafiek worden gefilterd volgens diezelfde filter. Onze widgets zijn aan elkaar gekoppeld!

../_images/step41.png

Meer Opendatasoft-widgets toevoegen

5 + Nu onze widgets aan elkaar zijn gekoppeld, waarom niet meer widgets toevoegen om ons dashboard zelfs nog beter te maken? We beginnen met het toevoegen van een zoekbalk. Hiermee kunnen we tezelfdertijd tekstzoekopdrachten uitvoeren op alle weergaven. Ga naar de documentatie over Opendatasoft-widgets voor meer informatie over de widget die we gaan gebruiken, genaamd odsTextSearch.

In de documentatie over de odsTextSearch widget vindt u allerhande informatie terug:

  • de beschrijving om te weten waarvoor de widget kan worden gebruikt

  • de widget code om deze te kopiëren en in de code van uw pagina te plakken

  • een tabel met de attributen van de widget. U moet de waarden ervan aanvullen, zo niet werkt uw widget niet

  • voorbeeld van zowel de eindcode als het eindresultaat

../_images/step51.png

6 + Kopieer de 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 + Plak de widget code in de code van uw pagina waar u wilt dat deze wordt weergegeven. We gaan deze onder de titel en boven de eerste weergavewidget plaatsen.the widget code in the code of your page, where you want it to be displayed. Let’s put it under the title, above the first visualization widget.

Opgelet

Sla uw pagina nog niet op! Aangezien de attributen van de widget nog niet zijn ingevuld, zal het platform uw widget als ongeldig beschouwen en zal hierdoor een fout worden gegenereerd.

<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 + De zoekbalk kan als dusdanig niet werken. Allereerst moeten we bepalen welke attributen we nodig hebben en de waarden ervan invullen. Voor deze widget is enkel het attribuut “context” verplicht. Om de zaken voor deze handleiding eenvoudig te houden, gaan we alle andere attributen verwijderen.

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

9 + Bij het begin van deze handleiding (zie stap 2), hebben we een unieke context aangemaakt die voor de volledige pagina gebruikt kan worden. De naam van onze context is “worldheritagelistpublicus”. Het is diezelfde context die we moeten gebruiken om het attribuut “context” van onze odsTextSearch-widget in te vullen.

<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 + Sla uw pagina op en klik op Preview. We hebben nu een zoekbalk in ons dashboard!

../_images/step101.png

11 + We gaan nu nog een ander, bijzonder nuttig element aan ons dashboard toevoegen: filters! Hiermee kunnen we filters op onze weergaven toepassen, net zoals wanneer we door een dataset navigeren. Ga naar de documentatie over OpenDataSet-widgets voor meer informatie over de widget die we gaan gebruiken, genaamd odsFacets.

Belangrijk

Met de odsFacets-widget kunnen we de filters ophalen die al ingesteld zijn voor de dataset. Dit betekent dat wanneer u deze widget voor een dashboard gebruikt, maar waarvan de aanverwante dataset geen gedefinieerde filter heeft, uw widget niets kan weergeven.

../_images/step111.png

12 + Kopieer de odsFacets widget code.

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

13 + Plak de widget code in de code van uw pagina waar u wilt dat deze wordt weergegeven. We gaan deze onder onze zoekbalk plaatsen.

<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 + Net zoals bij de odsTextSearch-widget, moeten we de attributen van de odsFacets-widget aanvullen. Laatstgenoemde heeft er slechts één: het attribuut “context”! We vullen hier de naam van onze paginacontext in, net zoals voor de 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 + Sla uw pagina op en klik op Preview. De filters van onze dataset staan nu weergegeven in ons dashboard!

../_images/step151.png

16 + Stel nu dat we niet alle filters van onze dataset willen weergeven. Stel dat we in ons UNESCO Werelderfgoed-voorbeeld, enkel willen kunnen filteren per categorie en per land. Kopieer het volgende stukje code (ook terug te vinden in de documentatie over de odsFacets-widget):

<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 + Plak deze ter vervanging van de vorige, eenvoudige odsFacets-widget code die we eerder hebben gebruikt.

<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 + Vul het attribuut “context” correct in met de naam van uw paginacontext.

<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 + We gaan nu de rest van de geavanceerde odsFacets widget code bekijken. De 2 “h3” labels geven aan dat we titels hebben toegevoegd: deze worden gebruikt om de naam van de filters te schrijven die we willen weergeven, zijnde “Categorie” en “Land”. “ods-facet name” is een attribuut dat de technische identifier van het veld aangeeft waarop de filter is gebaseerd.

Opmerking

Om de technische identifier van een veld terug te vinden, moet u zich bewust zijn van het datasetschema. Dit staat in het informatietabblad van de dataset. Het datasetschema toont alle informatie over elk veld: naam (label), beschrijving, identifier, type en een waardevoorbeeld. Het is vaak gemakkelijk om het type en de identifier van elk veld te kennen wanneer geavanceerde widgetparameters worden gebruikt.

In de onderstaande code werd commentaar toegevoegd om u te helpen om de verschillende elementen te zien die we hebben.

<!-- 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 + Ga naar de rubriek Datasetschema van het informatietabblad van uw dataset;

../_images/step201.png

21 + Zoek de technische identifiers van de velden waarop de filters zijn gebaseerd die u wilt toevoegen aan het dashboard. In onze voorbeelddataset UNESCO Werelderfgoed, willen we filteren per categorie en per land. De technische identifiers van de velden die we willen gebruiken als filters zijn respectievelijk “categorie” en “landen”.

../_images/step211.png

22 + Vul in de code van uw dashboard zowel de titels als de attributen “ods-facet name” in.

<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 + Sla uw pagina op en klik op Preview. Onze 2 gekozen fitlers staan weergegeven op ons dashboard!

../_images/step231.png

Uw dashboard formatteren: organiseer uw widgets in rijen en kolommen

Ons dashboard ziet er netjes uit, maar het zou nog mooier zijn mochten we het nu een beetje stijl geven en het op een andere manier organiseren. Tot nu toe hebben we al onze elementen (zowel titels als widgets) op elkaar gestapeld. We gaan dit nu veranderen!

We organiseren ons dashboard in 2 delen:

  • links plaatsen we onze navigatie-elementen (de zoekbalk en daaronder de filters)

  • rechts plaatsen we onze dataweergaven (de tabel en daaronder de kaart en de grafiek netjes naast elkaar)

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

Hoe kunnen we er nu voor zorgen dat ons dashboard er zo uitziet? Beeld uw pagina in als een container. In deze container kunt u zoveel rijen hebben als u wil. Elk van deze rijen is onderverdeeld in 12 kolommen van dezelfde grootte.

In HTML-code ziet dit er als volgt uit:

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

Wanneer u een pagina aanmaakt en de elementen waaruit uw pagina is samengesteld, wil organiseren, moet u deze in rijen plaatsen. Voor elk element moet u beslissen hoeveel kolommen u aan dat element wil toewijzen.

24 + We gaan nu ons dashboard herorganiseren in rijen en kolommen. Voor ons voorbeeld plaatsen we zowel het navigatiedeel als het deel dataweergave in dezelfde rij. We gebruiken 3 kolommen voor de navigatie-elementen en de resterende 9 kolommen voor onze weergave-elementen. Aangezien we de kaart- en grafiekweergaven naast elkaar willen plaatsen, maken we een rij aan voor deze 2, elk met 6 kolommen.

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

In HTML-code zal ons dashboard er als volgt uitzien:

<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 + Sla uw pagina op en klik op Preview. We hebben een cool dashboard aangemaakt, niet?

../_images/step25.png

26 + Misschien zou iets meer ruimte tussen de tabel en de andere 2 weergaven nog beter zijn. We gaan een label “br” toevoegen onder de tabelwidget, net voor de rij waarin zowel de kaartwidget als de grafiekwidget staan. Dit label betekent dat we een extra lege lijn gaan toevoegen op de plaats van het label. Het is ook een van de HTML-labels die niet met twee worden gebruikt!

<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 + Sla opnieuw op en klik op de knop “Open pagina” om het eindresultaat te zien!


GEFELICITEERD!

U heeft deze handleiding nu gevogld en weet nu hoe uw een volledig dashboard kunt aanmaken met gekoppelde widgets en hoe u dit kunt formatteren met CSS-klassen! Wilt u nog verder gaan met deze CSS-klassen en meer te weten komen over reactiviteit, aarzel dan niet om onze documentatie over deze onderwerpen te raadplegen <https://help.opendatasoft.com/platform/en/customizing_look_and_feel/07_designing_responsive_portal/responsive.html#responsive-page-layouts>`_!