1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
/****************************************************************************
**
** Copyright (C) 2013 Digia Plc
** All rights reserved.
** For any questions to Digia, please use contact form at http://qt.digia.com
**
** This file is part of the QtDataVisualization module.
**
** Licensees holding valid Qt Enterprise licenses may use this file in
** accordance with the Qt Enterprise License Agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and Digia.
**
** If you have questions regarding the use of this file, please use
** contact form at http://qt.digia.com
**
****************************************************************************/
/*!
\example qmlbars
\title Qt Quick 2 Bars Example
\ingroup qtdatavisualization_examples
\brief Using Bars3D in a QML application.
The Qt Quick 2 bars example shows how to make a simple 3D bar graph using Bars3D and Qt
Quick 2.
\image qmlbars-example.png
TODO: **This example is no longer about remapping, as multiple series are used instead**
The interesting thing about this example is remapping the data, so we concentrate on that
and skip explaining the basic Bars3D functionality - for more detailed QML example documentation,
see \l{Qt Quick 2 Scatter Example}.
\section1 Data
The example data is monthly income and expenses of a fictional company over several years.
The data is defined in a list model in \c data.qml like this:
\snippet ../examples/qmlbars/qml/qmlbars/data.qml 0
\dots 4
Each data item has four roles: year, month, income, and expenses. Years and months are natural to
map to rows and columns of a bar chart, but we can only show either income or expenses as the value.
We choose to default to showing expenses when we initialize the mapping item:
\snippet ../examples/qmlbars/qml/qmlbars/data.qml 1
Final piece we need for handling data is the proxy to bring the model and mapping together:
\snippet ../examples/qmlbars/qml/qmlbars/data.qml 2
\section1 Custom axis labels
One interesting tidbit about axes is that we redefine the category labels for column axis in
\c axes.qml. This is done because the data contains abbreviated month names, which we don't want
to use for our column labels:
\snippet ../examples/qmlbars/qml/qmlbars/axes.qml 0
\section1 Using mapping
In the \c main.qml, we set up the graph and various UI elements. There are three interesting
mapping related code blocks we want to highlight here. The first one shows how to change the
visualized data from expenses to income, and vice versa, by simply changing the value role on the
BarDataMapping item:
\snippet ../examples/qmlbars/qml/qmlbars/main.qml 0
The axis change is done because income and expenses have a different label format. The same could have
been achieved using a single axis and just changing the label format.
The second interesting block is where we filter some of the rows away from the visualized data:
\snippet ../examples/qmlbars/qml/qmlbars/main.qml 1
The filtering is done by setting \c autoRowCategories to false on the BarDataMapping item and defining
the row categories explicitly. This way, only the items in specified rows are visualized.
The third interesting block shows how to get the row and column index of an item if you know the
row and column values by using BarDataMapping methods \c rowCategoryIndex() and \c columnCategoryIndex():
\snippet ../examples/qmlbars/qml/qmlbars/main.qml 2
*/
|
