3.05 Charts (P1 | 2h)

Explanation of the contents of a topic page @ Topic reference page

Back to Week 3

Objective: Using QML charts

Beginner

What is a chart?

Intermediate

Chart types
How to provide data to charts?
How to add data dynamically?
How to animate charts?
How to interact with charts?

Expert

Omitted

Course material content

To display data, Qt has the Qt Charts module which provides easy to use chart types to visualize any type of data you might come in to contact with. To use Qt Charts, add the statement import QtCharts 2.2 to your .qml file.

All charts are managed by the ChartView type. ChartView handles the display of different Series types. These include PieSeries, LineSeries and BarSeries. These series contain datapoints (PieSlice, XYPoint, BarSet) that are displayed.

Dynamic Charts

In both BarSeries and PieSeries, data points can be declared inside the Series types. Alternatively, they can be dynamically added and removed with methods append() and remove(). PieSeries also has a find() method can be used to find and modify existing data points. Here is a demo of a cake that is very hard to eat:

ChartView {
    title: "Cake"
    anchors.fill: parent
    antialiasing: true

    PieSeries {
        id: pieSeries
        PieSlice {
            label: "Eaten"
            value: 0
        }
        PieSlice {
            label: "Not eaten"
            value: 1
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            pieSeries.find("Eaten").value += Math.random()
            mouse.accepted = false
        }

        onDoubleClicked: {
            var slice = pieSeries.find("Eaten")
            pieSeries.remove(slice)
            pieSeries.append("Eaten", 0)
        }
    }
}

Cake

Chart Models

K: QAbstractItemModel needs to be explained somewhere before probably!

Model mappers, such as VXYModelMapper enable using a data model as a data source for a chart. These model mappers keep the series and the data model in sync. You need to use a custom model derived from the QAbstractItemModel. See the Model subclassing reference for more information.

Chart Interaction

Most series types, such as the PieSeries, emit signals when they are interacted with. For example, PieSeries emits clicked(PieSlice slice), which is used here to explode the clicked slice:

    ChartView {
        title: "Japanese companies"
        anchors.fill: parent
        antialiasing: true

        PieSeries {
            id: pieSeries
            PieSlice { label: "Minolta"; value: 10.5 }
            PieSlice { label: "Aiwa"; value: 14.9 }
            PieSlice { label: "Sanyo"; value: 20.6 }
            PieSlice { label: "Denon"; value: 8.2 }
            PieSlice { label: "Konica"; value: 1.8 }
            
            onClicked: slice.exploded = !slice.exploded            
        }
    }

Exploded

Chart Animation and Themes

To animate the charts the ChartView.animationOptions property needs to be set to any of these enum values:

ChartView.GridAxisAnimations: Enable Grid axis animation (when applicable)
ChartView.SeriesAnimations: Enable Series animation (data point animation)
ChartView.AllAnimations: Enable both animation types

It is also possible to set the duration of the animations with the property ChartView.animationDuration in milliseconds.

The ChartView.theme can be used to set a number of built-in themes. Any visual customizations done to the chart before setting the theme will be overwritten.

Here is an example enabling all animations and setting a dark theme on a LineSeries:

ChartView {
    title: "Line"
    anchors.fill: parent
    antialiasing: true

    animationOptions: ChartView.AllAnimations
    animationDuration: 1000

    theme: ChartView.ChartThemeDark

    LineSeries {
        name: "LineSeries"

        XYPoint { x: 0; y: 0 }
        XYPoint { x: 1.1; y: 2.5 }
        XYPoint { x: 1.9; y: 3.3 }
        XYPoint { x: 2.1; y: 2.1 }
        XYPoint { x: 2.9; y: 4.9 }
        XYPoint { x: 3.4; y: 3.0 }
        XYPoint { x: 3.7; y: 2.1 }
        XYPoint { x: 4.1; y: 2.5 }            
    }
}