Dataviz — Display some charts

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

• HTML

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.

Configurer l’outil

Astuce

You can start using the plugin DataPlotly to create your graph in QGIS itself. So you can have a preview about what is possible more or less about dataviz with your layers. But keep in mind that Lizmap and DataPlotLy, even if’s using the same dataviz engine (plotly), features are different between these two tools.

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

Au niveau de la couche

• Pour activer une couche avec des capacités de dataviz :

  1. Cliquer sur le bouton .

  2. Sélectionnez le type de graphique à ajouter. En fonction de vos choix, le formulaire s’adaptera de lui-même. Lisez ci-dessous les types de graphiques.

  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. AggrégationFor a few types of charts like bar or pie, you can chose to aggregate the data in

     le graphique. Quelques fonctions d’agrégation sont disponibles : 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. Layout : The layout can be customized. It must be a JSON dictionary. You can read the documentation of Plotly about the layout configuration

  11. Display filtered plot in popups of parent layer : if you check this checkbox, the children of your layer will get the same graph as the parent plot but filtered only for them. It’s useful if you want to see the statistics of one entity instead of all.

  12. Montrer seulement dans la popup des enfants : Le graphique principal ne sera pas affiché dans le conteneur principal et seul le graphique filtré de la relation de la couche sera affiché dans la popup lorsque vous sélectionnez l’élément.

  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 ou alors double-cliquer sur la ligne.

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

• Pour monter ou descendre une couche, vous devez la sélectionner et cliquer ou . 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

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>

Mise en page JSON

The layout option, allows you to configure many options by writing up a JSON object. See the full reference on the Plotly documentation.

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

• Définir les propriétés de la police :

// Change X axis font size
{"xaxis": {"tickfont": {"size": 10}}}

• Vous pouvez combiner toutes les propriétés, par exemple :

{
    "xaxis": {
        "categoryorder": "total ascending"
        "tickfont": {
            "size": 10
        }
    },
    "yaxis": {
        "showticklabels": false
    }
}

Autres personnalisations avec des scripts JavaScript

Nous pouvons également modifier les graphiques avec quelques scripts JavaScript.

• You can decide to not have any number after the comma for the first chart (id: dataviz_plot_0), for example:

lizMap.events.on({
    'datavizplotloaded': (evt) => {
        if( evt.id === 'dataviz_plot_0'){
            Plotly.restyle( evt.id, {
                texttemplate: "%{value:.0f}"
            });
        }
    }
});

Types de graphiques

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

Modèles HTML

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

This example below will produce a single colored box, similar to the COVID demo.

<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

You can visit the Cats project.