Dataviz - afficher des graphiques

Principe

Avec le panneau de dataviz, vous pouvez créer des diagrammes en quelques clics:

  • dispersion
  • circulaire
  • histogramme
  • graphique en boîte
  • bar
  • histogramme 2D
  • polaire
  • sunburst (soleil) Lizmap 3.4
  • HTML Lizmap 3.4
../../_images/publish-01-dataviz-interface.jpg

Pré-requis

La couche doit publiée en WFS (voir Capacités des services OGC) et la clé primaire doit aussi être publiée dans les Propriétés de la couche.

Tutoriel vidéo

This video is an quick start how to setup a filtered chart in a parent popup:

https://www.youtube.com/embed/aGJnScdkEtE

Configurer l’outil

Astuce

Vous pouvez commencer à utiliser l’extension DataPlotly pour créer votre graphique dans QGIS lui-même. Ainsi, vous pouvez avoir un aperçu de ce qui est possible plus ou moins à propos de dataviz avec vos couches. Mais gardez à l’esprit que Lizmap et DataPlotLy, même s’ils utilisent le même moteur de visualisation de données (plotly https://github.com/plotly/plotly.py ), les fonctionnalités sont différentes entre ces deux outils.

Vous pouvez facilement le configurer avec l’extension Lizmap dans QGIS dans le panneau Dataviz.

Au niveau de la couche

../../_images/interface-publisher-dataviz.jpg
  • To enable a layer with dataviz capabilities:

    1. Cliquer sur le bouton add_layer_svg.
    2. Select the type of chart to add. According to your choices, the form will adapt it self. Read below the kind of charts.
    3. Titre : Ici vous pouvez écrire le titre que vous voulez pour votre graphique.
    4. Description : La description du graphique. Vous pouvez inclure du HTML.
    5. Sélectionnez la couche dans la liste déroulante.
    6. Champ X : Le champ X de votre graphique. Il peut être vide pour quelques types.
    7. Aggregation : For a few types of charts like bar or pie, you can chose to aggregate the data in
      the graph. There are a few aggregate functions available - average(avg), sum, count, median, stddev, min, max, first, last.
    8. Traces : Selon le type de graphe, vous pouvez ajouter une ou plusieurs traces : le champ Y de votre graphe.
    9. Selon le type de graphique, il existe maintenant différentes options.
    10. Mise en page : La mise en page peut être personnalisée. Il doit s’agir d’un dictionnaire JSON. Vous pouvez lire la documentation de la documentation Plotly sur la configuration de la mise en page https://plotly.com/javascript/reference/#layout
    11. Afficher le graphique filtré dans les popups de la couche parente : si vous cochez cette case, les enfants de votre couche obtiendront le même graphique que le graphique parent mais filtré uniquement pour eux. C’est utile si vous voulez voir les statistiques d’une entité au lieu de toutes.
    12. Only show child popup : The main graph will not be shown in the main container and only the filtered graph of the relation of the layer will be displayed in the popup when you select the element.
    13. Afficher la légende, quelques fois, la légende n’est pas nécessaire.
    14. Afficher le graphique seulement quand la couche est visible.
    15. Certaines options peuvent être visibles ou pas selon le type de graphique, comme le choix d’une mise en page horizontale/verticale pour un graphique en barres.
  • Pour éditer une couche dans la table, sélectionner la et cliquer sur le bouton edit_layer_svg ou alors double-cliquer sur la ligne.

  • Pour supprimer une couche de la table, cliquez sur celle-ci puis sur le bouton remove_layer_svg.

  • Pour monter ou descendre une couche, vous devez la sélectionner et cliquer down_layer_svg ou up_layer_svg. L’ordre changera dans Lizmap également.

  • Les alias des champs seront affichés si définis . Voir Ajouter un alias sur un champ.

Au niveau du projet

../../_images/interface-dataviz.jpg

1. You have the possibility to change the value to dock, bottomdock or right-dock these options change where your dataviz panel will be located in your Lizmap’s project. You have 3 positions available, at the right of the screen, bottom and right.

2. You have the possibility to write in HTML the layout of the container of your charts. If you are proficient in the HTML language, there are a lot of possibilities and you can customize your container the way you want.

Ce code HTML bootstrap permet de produire la mise en page suivante:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">$0</div>
        <div class="span6">$1</div>
    </div>
    <div class="row-fluid">
        <div class="span12">$2</div>
    </div>
</div>
../../_images/publish-03-dataviz-html-example.jpg

Mise en page JSON

The layout option, allows you to configure many options by writing up a JSON object. See the full reference: https://plotly.com/javascript/reference/#layout

Les exemples suivants montrent comment utiliser des propriétés dépendant de la propriété de la mise en page:

  • Ajouter des unités sur l’axe Y (vertical) :
// Add " ha" suffix
{"yaxis": {"ticksuffix": " ha"}}
  • Supprimer les étiquettes sur l’axe X (horizontal):
// Hode X labels. Use yaxis for Y labels
{"xaxis": {"showticklabels": false}}
  • Remove the automatic k, M or G suffix (ex: 10 M) for big number in the axis and in the hover tooltip:
{"yaxis": {"tickformat": ",.2f"}}
  • Order of the bars for a bar chart. Use ascending or descending values:
// By ascending X value
{"xaxis": {"categoryorder": "category ascending"}}

// By descending bar height (total Y value)
{"xaxis": {"categoryorder": "total ascending"}}
  • Set margins. Use l for left, t for top, r for right and b for bottom:
// Shift the plot to the right (to display big Y axis labels)
{"margin": {"l": 70}}
  • Define font properties:
// Change X axis font size
{"xaxis": {"tickfont": {"size": 10}}}
  • You can combine any of the properties, for example:
{
    "xaxis": {
        "categoryorder": "total ascending"
        "tickfont": {
            "size": 10
        }
    },
    "yaxis": {
        "showticklabels": false
    }
}

Types of charts

The dataviz module will aggregate every traces for all unique X values.

HTML templates

A trace must be referenced by {y1} where 1 is the trace number.

<style type="text/css">
table.example-table {
    width: 100%;
    font-weight: bold;
    color:#4a4a4a;
    padding: 10px;
    border-spacing: 10px;
    border-collapse: separate;
}
table.example-table tr td {
    background-color: #fca487;
    border-radius: 5px;
    border: 10px solid #fff0;
    padding: 10px;
    margin: 10px;
    text-align: center;
}
</style>
<table class="example-table">
    <tbody>
        <tr>
            <td>{$y1}</td>
        </tr>
    </tbody>
</table>

Divers

  • For pie chart : the items in the legend are ordered by X as a default behaviour.
  • QGIS Field aliases are used in the tooltip when hovering the bar or pie slices.

Exemples

Vous pouvez visiter le projet des Chats sur https://demo.lizmap.com