Individuality is the definition of freedom. And freedom is the fundamental requirement of man’s mind. QGIS possibly cannot give you all the freedom you require in life. But at least a lot of freedom in how you manage your work. QGIS 3.4.0 LTR was released last week and it comes loaded with features supporting big freedom in the configuration of your projects.  Let’s focus on the QML Widget. QML is the smart casual look of widgets. With the help of some simple code, you will be able to visualize your data in the attribute form like never before. You can display beautiful charts, complex JSON data, and fancy colored unicorns. 

How it’s done

Let’s start with an example. In the Attribute Form configuration in the Layer Properties you have first to activate the drag and drop designer. Not only can you drag the field- and relation-items from the available widget list to the form layout list, but also a QML Widget. When you drop this item, it creates an “instance” of a QML Widget. This means, you can drag and drop as many QML Widgets as you like to have on your form and configure each of them individually.

QML (Qt Modelling Language) is a user interface specification and programming language. It allows developers and designers alike to create highly performant, fluidly animated and visually appealing applications. QML offers a highly readable, declarative, JSON-like syntax with support for imperative JavaScript expressions combined with dynamic property bindings. Source: Qt documentation

It’s a bit like an HTML page on the attribute form but very well integrated with Qt.
On dropping the item, the configuration dialog pops up. After closing you can come back to it by double-clicking the item in the form layout list, like you do it with containers and tabs. If your don’t know QML that much yet, the default snippets from the drop-down can create an example of a rectangle, a pie chart or a bar chart. This could help you to create your own widget. On the right you can see a preview of your widget in real time. There are powerful layout possibilities to design it according to your ideas. For more information about it see the QML layout part of the Qt documentation.

But a chart makes no sense if there is no data. Of course, you can enter the data directly into your QML code, but most likely you need the data of the features to be visualized. This brings us to expressions. You can use them like you are used to in Default Values, Constraints and Display Messages. You’ll find the well-known expression builder widget in this configuration as well.

Using expressions

So let’s assume we want to visualize who holds what share of a forest. These forests are owned by the country (national), the canton (cantonal) or private. To keep it simple we have three attributes for that: national_share,cantonal_share and private_share.
After creating the default pie chart you will find this snippet in the QML code text area:

PieSeries {
    id: pieSeries
    PieSlice { label: "First slice"; value: 25 }
    PieSlice { label: "Second slice"; value: 45 }
    PieSlice { label: "Third slice"; value: 30 }
}

Let’s set the field expressions into the PieSlice-values. Just select them in the expression widget and add them with the + into the chart.

As you can see the expressions in the code are wrapped inside expression.evaluate("<expression>"). This means there are no limits in using expressions.
You are open to use more complex expressions like e.g. for the title property of the pie chart:

title: expression.evaluate("CASE WHEN @layer_name LIKE \"forest\" THEN \"Forest\" ELSE @layer_name END")

Or in case the task with forest shares would be solved with relations to other layers by filling up a model with the children and the children’s share. This is possible by using expressions with the help of the expression functionrelation_aggregate.
More information about expressions can be found in the QGIS Documentation.
Back to our example. The result will look like this on the attribute form. It visualizes the share values in the pie chart.

The visualization is not (yet) updated in real time when the values change. But this would be a nice thing to have in the future… If you would like to support this, please contact us.

And that’s it

I hope you liked reading and you will enjoy using it to make beautiful widgets and forms. If you have questions or inputs, feel free to add a comment.
… and in case you still asking where the promised unicorns are. Well you have to wait for the part 2 of this article 😉
 


14 Comments

hpsib · 2018-11-06 at 09:46

Hi, thanks for writing this post. However, when I try to do this in QGIS 3.4 (and QGIS nightly build), the pie is empty/doesn’t show. I have tried both keeping the values as 25, 45 and 30 and to add expressions. Where do I go wrong?
Here’s my code:
import QtQuick 2.0
import QtCharts 2.0
ChartView {
width: 400
height: 400
theme: ChartView.ChartThemeBrownSand
legend.visible: true
legend.alignment: Qt.AlignBottom
title: Pie
antialiasing: true
PieSeries {
id: pieSeries
PieSlice { label: “First”; value: expression.evaluate(“\”del1\””) }
PieSlice { label: “Second”; value: expression.evaluate(“\”del2\””) }
PieSlice { label: “Third”; value: expression.evaluate(“\”del3\””) }
}
}

    David Signer · 2018-11-06 at 10:02

    Thanks for commenting.
    Strange. It should be correct. Is something displayed in the preview when you choose an example “Rectangle” or “Pie Chart” with the drop down?

      hpsib · 2018-11-06 at 10:31

      Nope, nothing is previewed when choosing Rectangle, Pie chart or Bar chart.

        David Signer · 2018-11-06 at 11:19

        Okay. Do you work on Windows?
        If so, I can try to reproduce the problem.

          hpsib · 2018-11-06 at 11:39

          Yes, I work in Windows 7 Professional (soon changing to Windows 10 Pro).

    Nicolas McFadden · 2018-11-07 at 10:25

    Hello,
    Have you made sure that the QML libraries were installed? I had the same problem you had until I checked in my OSGeo4W setup and saw that the QML libraries were not installed. Now that they are it works!

      hpsib · 2018-11-08 at 09:45

      Thanks a lot! That did the trick. In the OSGeo4W Advanced setup I had to include qt5-qml: Qt5 QML in the Libs-category. Now it works.

    David Signer · 2018-11-08 at 09:42

    I haven’t reproduced it on my Windows installation yet, but I think this input is the right one. There is a library qt5-qml you can find in the OSGeo4W installer, that is not per default checked.
    Thanks Nicolas.

      David Signer · 2018-11-08 at 09:59

      I tested it now and I can confirm it. It works after the installation of the non-default library qt5-qml.

        Daniele · 2018-11-08 at 14:36

        Please
        Is it possible add the library qt5-qml in standalone installer version in windows ?
        or do I have to qgis with OSGEO4W?

    David Signer · 2018-11-13 at 09:08

    BTW: With the next release, the qt5-qml library will be installed per default.

      Daniele · 2018-11-13 at 09:12

      Thank you

Etienne · 2019-01-26 at 17:12

Nice thanks for this addition.

Is there a way to get the PNG when doing an atlas?
We are doing a lot of PDF in our organization. How can we share these charts?

Leave a Reply to David SignerCancel reply