C

Qt Quick Ultralite charts Example

Demonstrates how to use charts in Qt Quick Ultralite.

Overview

The example shows how to use the Qt Charts for MCUs QML module. It contains two pages:

  • A simple grouped bar chart with mostly default settings and an animation on one bar, see BarChart.qml.
  • A complex transition between the two styled bar charts, see StyledBarChart.qml.

Choose between the two pages using the buttons at the bottom. On the Styled Bar page, select Month and Year to transition between charts.

Target platforms

Project structure

CMake project file

Set the FreeRTOS configTOTAL_HEAP_SIZE value to a sufficient value as the the chart images are drawn to heap memory.

...
if (OS STREQUAL "FreeRTOS")
    add_compile_definitions(configTOTAL_HEAP_SIZE=3145728)
endif()
...

The Qul::QuickUltraliteCharts module is added to the target_link_libraries() CMake function call.

...
target_link_libraries(charts Qul::QuickUltraliteCharts Qul::QuickUltraliteControlsStyleDefault)
...
Bar chart

The BarChart.qml file describes the chart that's seen when the example starts.

It contains a single ChartView with a BarSeries, its axis definitions, and several BarSets.

import QtQuick 2.15
import QtCharts 2.15

ChartView {
    title: "Test plot"
    ...
    BarSeries {
        barWidth: 0.8

        axisX: BarCategoryAxis {
            labelsFont.pixelSize: 10

            BarCategoryValue { value: "2007" }
            BarCategoryValue { value: "2008" }
            BarCategoryValue { value: "2009" }
            BarCategoryValue { value: "2010" }
        }
        axisY: ValueAxis {
            labelsFont.pixelSize: 10
            labelFormat: "%.1f"
        }

        BarSet {
            BarSetValue {
                id: barVal1
                value: 1
                Behavior on value { NumberAnimation { duration: 1000 } }
            }
            BarSetValue { value: 2 }
            BarSetValue { value: 6 }
            BarSetValue { value: 3 }
        }
        BarSet {
        ...
Styled bar chart

This StyledBarChart.qml describes a bar chart, along with a transition between two different views, showing yearly and monthly data.

The transition is controlled by the toYear and toMonth animations, which have the following stages:

  • animating all bars going to zero while fading out the labels
  • switching the axis bounds and labels while they are invisible
  • animating the bars going to their final values while fading in the labels.

Files:

See also Qt Charts for MCUs QML Types.

Available under certain Qt licenses.
Find out more.