Wie man Visualisierungen auf Filter abstimmt (mit AngularJS)

★★★ Sachkundige - Dauer: 30 Minuten

In diesem Tutorial erfahren Sie, wie Sie verschiedene Visualisierungsoptionen erstellen können, um die dazugehörigen Filter anzupassen. Dies kann insbesondere bei Diagrammen nützlich sein, die unbrauchbar sind, wenn bestimmte Filter aktiviert sind. Dieses Tutorial ist komplett anpassbar und wiederverwendbar in jedem Dashboard oder Inhalt, der mit HTML/CSS auf Opendatasoft erstellt wurde.

../_images/module2_final.png

Dieses Tutorial vermittelt Ihnen Folgendes:

  • wie man die AngularJS-Richtlinie ng-if verwendet

  • wann und wie man das Objekt context.parameters innerhalb der Richtlinie ng-if verwendet

VORRAUSSETZUNGEN

  • Um dieses Tutorial zu testen und/oder die Verbergen/Anzeigen-Konfiguration von Widgets in eine bereits bestehende Seite zu integrieren, benötigen Sie Zugriff auf das Backoffice eines Opendatasoft-Portals und die Berechtigung “Alle Seiten bearbeiten”.

  • Dieses Tutorial fällt unter den Schwierigkeitsgrad “Sachkundige”. Deshalb gehen wir davon aus, dass Sie HTML und CSS bereits ausreichend kennen, um ihre Strukturen und Funktionsweise zu erkennen und zu verstehen. Andere eher technische Elemente werden jedoch genauer erläutert.

  • Wir empfehlen Ihnen, für dieses Tutorial den Datensatz “Shanghai World University Ranking <https://data.opendatasoft.com/explore/dataset/shanghai-world-university-ranking%40public/>”_ zu nutzen. Diesen Datensatz verwenden wir als Beispiel im gesamten Tutorial. Wenn Sie das Tutorial mit einem anderen Datensatz fortsetzen möchten, müssen Sie jeden Schritt entsprechend anpassen.

Alle Bilder anzeigen

Alle Bilder verbergen

Erstellen Sie die Basis

In diesem Tutorial erstellen wir eine Seite, die aus einer Visualisierung und dem dazugehörigen Datensatz-Filter besteht. Dafür verwenden wir den Datensatz Shanghai World University Ranking, den Sie in unserem Opendatasoft-Datennetzwerk finden.

1 + Beginnen wir unsere Seite mit dem Hinzufügen des Widget-Codes der gewünschten Visualisierung. Wir haben uns im vorliegenden Fall für die Darstellung eines Streudiagramms entschieden, das die 20 besten Länder im Ranking zeigt. Für jedes Land zeigt das Diagramm den Durchschnittswert an.

Hinweis

Je nachdem, ob Sie dieses Tutorial auf einer neuen Seite oder in einem bestehenden Dashboard ausprobieren, sehen Sie ggf. die Tags <div class="container"> und <div class="ods-box">: bei beiden handelt es sich um Standard-Tags, die den Standardrahmen einer Opendatasoft-Seite bilden. Wenn Sie diesen Rahmen beibehalten möchten, stellen Sie sicher, dass Sie den Code des Tutorials zwischen diese Standard-Tags einfügen.

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

    <ods-dataset-context context="shanghaiworlduniversityrankingpublic" shanghaiworlduniversityrankingpublic-dataset="shanghai-world-university-ranking@public" shanghaiworlduniversityrankingpublic-parameters="{'sort':'world_rank'}">
    <ods-chart align-month="true">
       <ods-chart-query context="shanghaiworlduniversityrankingpublic" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </ods-dataset-context>

   </div>
</div>
../_images/step114.png

2 + Bevor Sie fortfahren, definieren Sie den eindeutigen Kontext Ihrer Seite mit dem Widget odsDatasetContext. Auf diese Weise können unsere Widgets miteinander interagieren. Dies ist immer die richtige Vorgehensweise, um ein einwandfreies Dashboard zu erstellen.

Wichtig

Denken Sie daran, das Tag ods-dataset-context oberhalb des Codes des Diagramm-Widgets zu löschen. Ersetzen Sie außerdem den aktuellen Kontextnamen (hier: shanghaiworlduniversityrankingpublic) durch den neuen (hier: worlduniversityranking).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   </div>
</div>

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

3 + Fügen Sie einen Filter entsprechend des ausgewählten Datensatzes hinzu. Verwenden Sie dafür das Widget odsFacets. In diesem Fall haben wir den Länderfilter abgerufen, der bereits ein bestehendes Facet des veröffentlichten Datensatzes ist.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

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

4 + Klicken Sie auf Vorschau. In technischer Hinsicht funktioniert alles einwandfrei: Das Diagramm wird entsprechend der gewählten Filteroption aktualisiert. Das gefilterte Diagramm ist jedoch völlig nutzlos, da es nur einen einzigen Punkt anzeigt.

../_images/step43.png

Wir benötigen eine alternative Visualisierung, die nur bei Verwendung des Filters angezeigt wird. Diese alternative Visualisierung ersetzt das standardmäßige, ungefilterte Diagramm, das nach dem Einsatz des Filters nutzlos ist. Los geht´s!

Hinzufügen einer alternativen Visualisierung mit AngularJS

5 + Bevor wir uns mit den Richtlinien und Ausdrücken von AngularJS befassen, fügen wir den Widget-Code unserer alternativen Visualisierung unmittelbar unter dem ersten hinzu. Hier haben wir uns für die Darstellung eines Säulendiagramms entschieden, das die 10 besten Universitäten im Ranking zeigt. Für jede Universität zeigt das Diagramm den Durchschnittswert an. Beachten Sie, dass dieses Diagramm nur dargestellt wird, wenn der Filter verwendet wird, d.h. das neue alternative Diagramm zeigt immer die 10 besten Universitäten des ausgewählten Landes an.

Wichtig

Denken Sie daran, den Code zu entfernen und den Kontextnamen durch denjenigen zu ersetzen, den wir zuvor angegeben haben (siehe Schritt 2).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

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

6 + Jetzt geht es weiter mit AngularJS! Wir müssen für beide Visualisierungen eine AngularJS-Richtlinie hinzufügen: das Standard-Diagramm (das NICHT angezeigt werden sollte, wenn der Filter verwendet wird) und das alternative Diagramm (das NUR DANN angezeigt werden sollte, wenn der Filter verwendet wird). Da jede AngularJS-Richtlinie in ein HTML-Tag eingefügt werden muss und angesichts unseres Codes, sollten wir zum Zwecke der Übersichtlichkeit div-Tags verwenden. Umgeben Sie jedes Diagramm mit div-Tags.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <div>
    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </div>

   <div>
   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

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

7 + Wir haben jetzt einen perfekten Ort, um unsere AngularJS-Richtlinien zu schreiben! Beginnen wir mit dem alternativen Diagramm, das nur angezeigt werden soll, wenn der Filter verwendet wird. Dazu müssen wir die AngularJS-Richtlinie ng-if verwenden. Die Richtlinie ng-if ist ein bedingter Ausdruck, der bestimmt, ob ein HTML-Element angezeigt werden soll oder nicht.

Werfen wir einen Blick auf die Syntax des Ausdrucks.

ng-if="mycontext.parameters['refine.field_ID']"

ng-if ist eine AngularJS-Richtlinie. Darauf folgt immer ein Gleichheitszeichen =. Es weist auf einen folgenden Ausdruck hin. Dieser Ausdruck wird von der Richtlinie ausgewertet und muss immer in doppelten Anführungszeichen geschrieben werden ".

mycontext.parameters kann als ein Objekt betrachtet werden, das eine Liste von kontextbezogenen Parametern enthält, die als Filter dienen. Die Liste der Parameter muss in Klammern gesetzt werden [ ] und jeder einzelne Parameter muss in einfache Anführungszeichen gesetzt werden '. Da für dieses Tutorial die Verwendung des Filters Country bestimmt, welche Diagrammvisualisierung angezeigt werden soll, muss das Objekt mycontext.parameters den Filterparameter im Ausdruck ng-if verwenden. mycontext muss durch den Namen des Seitenkontextes ersetzt werden.

  • refine zeigt an, dass wir einen Filterparameter verwenden.

  • .field_ID ermöglicht uns, genau zu bestimmen, welchen spezifischen Filter wir verwenden werden. field_ID muss durch die technische Kennung des Feldes ersetzt werden, das als Filter verwendet wird.

Grundsätzlich könnte die ng-if-Syntax folgendermaßen gelesen werden: Wenn mycontext mit field_ID gefiltert wird, [die zugehörigen HTML-Elemente anzeigen]”.

8 + Fügen Sie die Richtlinie ng-if in das div-Tag ein, das das alternative Diagramm umgibt. Denken Sie daran, mycontext durch den Namen des Seitenkontexts (siehe Schritt 2) und field_ID durch die technische Kennung des Datensatzfeldes zu ersetzen, das wir als Filter verwenden (siehe Schritt 3). In diesem Tutorial wird mycontext durch worlduniversityranking ersetzt und field_ID durch country.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <div>
      <ods-chart align-month="true">
         <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
         </ods-chart-query>
      </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
     <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

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

9 + Klicken Sie auf Vorschau: standardmäßig ist unser alternatives Diagramm ausgeblendet. Wird jedoch der Filter verwendet, so erscheint es!

../_images/step93.png

10 + Es ist an der Zeit, das Standard-Diagramm ausblenden zu lassen, wenn der Filter verwendet wird (und das alternative Diagramm angezeigt wird)! Im Grunde genommen wollen wir, dass dieser Ausdruck das genaue Gegenteil von dem tut, was der vorherige getan hat. Die gute Nachricht ist: hierfür muss kein komplett neuer Ausdruck geschrieben werden. Es reicht aus, unseren vorherigen Ausdruck wiederzuverwenden und ein einziges Zeichen am Anfang hinzuzufügen: ein Ausrufezeichen !.

ng-if="! mycontext.parameters['refine.field_ID']"

Ein Ausrufezeichen ! zu Beginn eines Ausdrucks kehrt dessen Verhalten um. Grundsätzlich könnte dieser Ausdruck so gelesen werden: “Wenn mycontext mit field_ID gefiltert wird, [die zugehörigen HTML-Elemente NICHT anzeigen]”.

11 + Fügen Sie die Richtlinie ng-if in das div-Tag ein, welches das erste Standard-Diagramm umgibt. Denken Sie daran, mycontext und field_ID wie im vorherigen Ausdruck zu ersetzen (siehe Schritt 8).

Hinweis

Sie können auch die vorherige ng-if-Richtlinie samt ihrem Ausdruck kopieren und am Anfang ein ! anfügen.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

    <div ng-if="! worlduniversityranking.parameters['refine.country']">
      <ods-chart align-month="true">
         <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
         </ods-chart-query>
      </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
     <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
     </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

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

12 + Klicken Sie auf Vorschau: alles funktioniert perfekt!

../_images/step122.png

Der letzte Schliff

13 + Jetzt kann das Ganze noch verschönert werden! Organisieren wir unsere HTML-Elemente mit Bootstrap. Für dieses Tutorial werden wir eine einzelne Zeile verwenden, die in 2 Teile aufgeteilt wird: die Visualisierung befindet sich auf der linken Seite, während der Filter auf der rechten Seite angezeigt wird. In Anbetracht der Größe einer Visualisierung im Vergleich zu der einer Filterliste werden wir 9 Spalten für die Visualisierung und 3 Spalten für die Filter verwenden.

Wichtig

Wenn Sie sich mit Bootstrap und der Möglichkeit der Organisation einer Webseite vertraut machen möchten, dann besuchen Sie unser Tutorial “Ein Dashboard aufbauen (2. Teil)” (Abschnitt: “Formatieren Sie Ihr Dashboard: Organisieren Sie Ihre Widgets in Zeilen und Spalten”).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

   <div class="row">

     <div class="col-md-9">
       <div ng-if="! worlduniversityranking.parameters['refine.country']">
         <ods-chart align-month="true">
           <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
          </ods-chart-query>
        </ods-chart>
      </div>

      <div ng-if="worlduniversityranking.parameters['refine.country']">
         <ods-chart align-month="true">
          <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
            <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
            </ods-chart-serie>
          </ods-chart-query>
         </ods-chart>
        </div>
      </div>

     <div class="col-md-3">
   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>
      </div>

   </div>

   </div>
</div>

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

14 + Schließlich können wir noch Titel und Texthinweise hinzufügen, um sicherzustellen, dass jeder versteht, wie die Seite und ihr Inhalt funktionieren.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

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

   <div class="row">

     <div class="col-md-9">
    <div ng-if="! worlduniversityranking.parameters['refine.country']">
    <h2>
        Top 20 countries <i class="fa fa-globe" aria-hidden="true"></i>
    </h2>
    <h5>
        by average score
    </h5>
    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
   <h2>
       Top 10 university <i class="fa fa-university" aria-hidden="true"></i>
   </h2>
   <h5>
       by average score
   </h5>
   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>
   </div>
      </div>

     <div class="col-md-3">
     <h3>
         Countries
     </h3>
     <h5>
         Pick a country to see its universities and scores
     </h5>
   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>
      </div>

   </div>

   </div>
</div>

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

HERZLICHEN GLÜCKWUNSCH!

Sie haben dieses Tutorial abgeschlossen und wissen jetzt, wie man verschiedene Visualisierungsoptionen erstellt, damit sie den Filtern der Seite entsprechen. Wir hoffen, dass Sie jetzt mit dem Umgang mit ng-if und context.parameters vertraut sind und sie das nächste Mal selbstständig nutzen werden!