Hoe een dashboard bouwen (deel 1)¶

★☆☆ Beginner - tijd: 30 minuten

In deze handleiding leert u hoe u een dashboard kunt aanmaken met behulp van 3 weergaven uit een dataset die gepubliceerd is op een Opendatasoft-portaal.

Met deze handleiding leert u:

wat een widget is
wat een iframe is
wat het verschil is tussen een widget en een iframe
hoe u een widget kunt gebruiken in een contentpagina die is aangemaakt met Opendatasoft

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.
We raden sterk aan om de handleiding te volgen met de World Heritage List dataset die op ons datanetwerk staat, Data. Deze dataset is de dataset die als voorbeeld wordt gebruikt doorheen de volledige handleiding. Indien u er echter voor kiest om de handleiding met een andere dataset te volgen, zorg er dan voor dat u er een kiste met een Tabel-weergave, alsook een Kaart-weergave en een Analyse-weergave. U moet ook uw eigen paginacode aanpassen zodat deze overeenstemt met de door u gekozen dataset.

Alle afbeeldingen tonen

Alle afbeeldingen verbergen

Uw contentpagina aanmaken

1 + Ga naar de back-office in de rubriek Pagina’s.

2 + Klik op de knop + New page button om een nieuwe contentpagina aan te maken.

3 + U komt standaard terecht op het tabblad Eigenschappen. Deze bevat verschillende inlichtingen over de pagina, waarvan u er sommige moet aanvullen omdat u anders de pagina niet zult kunnen opslaan. Voer een pagina URL-suffix en een titel in. Ook kunt u een beschrijving en tags toevoegen.

4 + Klik op de knop “Save” om uw nieuw aangemaakte contentpagina op te slaan.

5 + Ga naar het tabblad Content.

6 + Klik op de knop Edit in expert mode om toegang te hebben tot de HTML/CSS-code van de pagina. Er verschijnt een pop up. Klik op de knop Yes, switch to expert mode om te bevestigen.

In de HTML/CSS-codezone ziet u de volgende code:

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

Belangrijk

In de HTML-taal wordt elk element weergegeven door een label. Dit label staat tussen < en > en bestaat bijna altijd uit twee, met een openingslabel en een eindlabel. Bijv. <p></p> voor paragrafen, <h1></h1> voor eerste niveautitel, <div></div> voor een afdeling/rubriek, enz.

De labels <div class="container-fluid"> en <div class="ods-box" > helpen bij het juist formatteren van uw pagina zodat alle elementen van uw contentpagina in een vooraf gedefinieerd kader met randen staan. Alle nieuwe elementen die u in de toekomst toevoegt, moeten tussen deze 2 labels worden geplaatst.

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

   This is where you will put your code

 </div>
</div>

7 + Uw pagina opslaan.

8 + Klik op de knop Preview om het huidige resultaat van uw pagina te zien. Klik opnieuw op de knop Preview om het venster met de voorbeeldweergave te verbergen en terug te keren naar uw code.

Content in uw pagina plaatsen: weergaven van gegevens

Neem de widget code voor een weergave

Belangrijk

Een widget is een stukje code waarmee iemand een interactief element rechtstreeks op een internetpagina kan integreren. In Opendatasoft zijn er verschillende widgets die allemaal opgelijst en uitgelegd worden in de documentatie over widgets <https://help.opendatasoft.com/widgets/#/api/>`_. Sommige van de meest voorkomende Opendatasoft-widgets - diegene die we in deze handleiding zullen gebruiken - zijn de weergavewidgets. Elke dataweergave van een gepubliceerde dataset is inderdaad beschikbaar als een widget, waarvan de code onder de weergave staat, die klaar is om te worden gekopieerd!

9 + Ga naar Data waar uw dataset is gepubliceerd. Zorg ervoor dat u op de pagina van de dataset staat waar u de beschikbare dataweergaven kunt zien.

10 + Begin met de Tabelweergave. Klik op het tabblad Tabel.

11 + Scroll naar beneden in de tabel. U ziet 3 tabs: Share, Embed en Widget. Share toont de rechtstreekse URL van de weergave. Embed toont de iframe-code van de weergave. Widget toont de widgetcode van de weergaven. Elk ervan, of het nu een URL of een code is, is klaar om te worden gekopieerd en geplakt. Voor deze handleiding gebruiken we de widget codes van de weergaven Tabel, Kaart en Analyse van onze dataset.

Belangrijk

Een iframe is een eenvoudige en veilige manier om content van Opendatasoft te integreren in een losstaand kader, los van de rest van de pagina. Indien u content van Opendatasoft wil integreren buiten de Opendatasoft-omgeving, zijn iframes de beste manier om dit te doen, hoewel hiervoor waarschijnlijk enig interactie- en aanpassingswerk voor nodig zal zijn. Er zouden ook widgets geïntegreerd kunnen worden in een pagina buiten de Opendatasoft-omgeving, maar weet dat hiervoor heel wat werk nodig zal zijn.

Aangezien we een dashboard rechtstreeks in een Opendatasoft-pagina bouwen, is het gebruik van Opendatasoft-widgets de beste optie. In de Opendatasoft-omgeving zijn ze immers gemakkelijk aanpasbaar en bijzonder interactief met andere widgets.

12 + Klik nog steeds in het tabblad Tabel van onze dataset, waar de widget code is weergegeven, op de knop KOPIËREN om de widget code van de tabelweergave te kopiëren.

Een weergave widget toevoegen aan uw pagina

13 + Ga terug naar de back-office om de Opendatasoft-contentpagina verder te bewerken.

14 + Plak de widget code van uw tabelweergave op de juiste plaats tussen het label “ods-box” (zie stap 6).

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

15 + Sla uw pagina op en klik op Preview: er staat nu een tabelweergave in uw pagina!

Meer widgets aan uw pagina toevoegen: kaart en grafiek

16 + Nu gaan we een kaart aan uw pagina toevoegen! Neem zoals daarvoor de widget code van de kaartweergave van uw dataset (zie stappen 9 tot 12, maar toegepast op de tab Kaart).

17 + Plak de widget code van uw kaartweergave onder de widget code van de tabelweergave (zie Een widget aan uw pagina toevoegen).

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

18 + Nu gaan we nog één ding toevoegen: een grafiek! Neem de widget code van de Analyseweergave van uw dataset.

19 + Plak de widget code van uw analyseweergave onder de widget code van de kaartweergave.

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

20 + Sla uw pagina op en klik op Preview. We hebben nu 3 weergaven op onze pagina!

Vervolledig uw contentpagina met een titel

21 + In HTML worden titels (headers genoemd) over het algemeen gedefinieerd door h1 labels. De h verandert niet, het staat voor “header”. Het cijfer (hier 1) kan evenwel vervangen worden door elk cijfer van 1 tot 6. “h1” is de hoogste niveautitel en “h6” de laagste. Voeg boven de widget codes van alle weergaven die zijn toegevoegd aan de pagina en onmiddellijk onder het label “ods-box” een hoge niveautitel aan uw contentpagina toe.

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

22 + Sla uw pagina op en klik op Preview: ons dashboard heeft nu een titel!

23 + Klik op de knop Open page om het definitieve resultaat van uw pagina in het portaal te zien.

GEFELICITEERD!

U heeft deze handleiding volledig gevolgd en u weet nu hoe u een eenvoudig dashboard kunt aanmaken met 3 datasetweergaven!

Indien u nog verder wilt gaan met uw dashboard, kunt u het tweede deel van deze handleiding : “Hoe een dashboard bouwen (deel 2)” volgen. Hierin leert u hoe u uw widgets aan elkaar kunt koppelen, hoe u meer geavanceerde widgets kunt toevoegen en hoe u uw dashboard beter kunt organiseren en de stijl ervan verbeteren.