##// END OF EJS Templates
Documentation: QML demos, bar screens, legend detach screen
Tero Ahola -
r1380:ae04ff07a29b
parent child
Show More
1 NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
@@ -1,56 +1,55
1 1 /****************************************************************************
2 2 **
3 3 ** Copyright (C) 2012 Digia Plc
4 4 ** All rights reserved.
5 5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 6 **
7 7 ** This file is part of the Qt Commercial Charts Add-on.
8 8 **
9 9 ** $QT_BEGIN_LICENSE$
10 10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 11 ** accordance with the Qt Commercial License Agreement provided with the
12 12 ** Software or, alternatively, in accordance with the terms contained in
13 13 ** a written agreement between you and Digia.
14 14 **
15 15 ** If you have questions regarding the use of this file, please use
16 16 ** contact form at http://qt.digia.com
17 17 ** $QT_END_LICENSE$
18 18 **
19 19 ****************************************************************************/
20 20
21 21 import QtQuick 1.0
22 22 import QtCommercial.Chart 1.0
23 23
24 24 Rectangle {
25 25 anchors.fill: parent
26 26 property int __explodedIndex: -1
27 27 property variant otherSlice: 0
28 28
29 //![1]
29 30 ChartView {
30 31 id: chart
31 32 title: "Top-5 car brand shares in Finland"
32 33 anchors.fill: parent
33 theme: ChartView.ChartThemeLight
34 34 legend.alignment: Qt.AlignBottom
35 animationOptions: ChartView.SeriesAnimations
36 35
37 // If you have static data, you can simply use the PieSlice API
38 36 PieSeries {
39 37 id: pieSeries
40 38 onClicked: {
41 39 slice.exploded = !slice.exploded;
42 40 }
43 41 PieSlice { label: "Volkswagen"; value: 13.5 }
44 42 PieSlice { label: "Toyota"; value: 10.9 }
45 43 PieSlice { label: "Ford"; value: 8.6 }
46 44 PieSlice { label: "Skoda"; value: 8.2 }
47 45 PieSlice { label: "Volvo"; value: 6.8 }
48 46 }
49 47 }
48 //![1]
50 49
51 50 Component.onCompleted: {
52 51 // You can also add slices dynamically
53 52 otherSlice = pieSeries.append("Others", 52.0);
54 53 pieSeries.find("Volkswagen").exploded = true;
55 54 }
56 55 }
@@ -1,55 +1,55
1 1 /****************************************************************************
2 2 **
3 3 ** Copyright (C) 2012 Digia Plc
4 4 ** All rights reserved.
5 5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 6 **
7 7 ** This file is part of the Qt Commercial Charts Add-on.
8 8 **
9 9 ** $QT_BEGIN_LICENSE$
10 10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 11 ** accordance with the Qt Commercial License Agreement provided with the
12 12 ** Software or, alternatively, in accordance with the terms contained in
13 13 ** a written agreement between you and Digia.
14 14 **
15 15 ** If you have questions regarding the use of this file, please use
16 16 ** contact form at http://qt.digia.com
17 17 ** $QT_END_LICENSE$
18 18 **
19 19 ****************************************************************************/
20 20
21 21 import QtQuick 1.0
22 22 import QtCommercial.Chart 1.0
23 23
24 24 Rectangle {
25 25 anchors.fill: parent
26 26
27 //![1]
27 28 ChartView {
28 29 title: "Line&Spline"
29 30 anchors.fill: parent
30 theme: ChartView.ChartThemeBrownSand
31 animationOptions: ChartView.NoAnimation
32 31
33 32 LineSeries {
34 33 name: "Line"
35 34 XyPoint { x: 0; y: 0 }
36 35 XyPoint { x: 1.1; y: 2.1 }
37 36 XyPoint { x: 1.9; y: 3.3 }
38 37 XyPoint { x: 2.1; y: 2.1 }
39 38 XyPoint { x: 2.9; y: 4.9 }
40 39 XyPoint { x: 3.4; y: 3.0 }
41 40 XyPoint { x: 4.1; y: 3.3 }
42 41 }
43 42
44 43 SplineSeries {
45 44 name: "Spline"
46 45 XyPoint { x: 0; y: 0.3 }
47 46 XyPoint { x: 1.1; y: 3.2 }
48 47 XyPoint { x: 1.9; y: 2.4 }
49 48 XyPoint { x: 2.1; y: 2.1 }
50 49 XyPoint { x: 2.9; y: 2.6 }
51 50 XyPoint { x: 3.4; y: 2.3 }
52 51 XyPoint { x: 4.1; y: 3.1 }
53 52 }
54 53 }
54 //![1]
55 55 }
@@ -1,143 +1,141
1 1 /****************************************************************************
2 2 **
3 3 ** Copyright (C) 2012 Digia Plc
4 4 ** All rights reserved.
5 5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 6 **
7 7 ** This file is part of the Qt Commercial Charts Add-on.
8 8 **
9 9 ** $QT_BEGIN_LICENSE$
10 10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 11 ** accordance with the Qt Commercial License Agreement provided with the
12 12 ** Software or, alternatively, in accordance with the terms contained in
13 13 ** a written agreement between you and Digia.
14 14 **
15 15 ** If you have questions regarding the use of this file, please use
16 16 ** contact form at http://qt.digia.com
17 17 ** $QT_END_LICENSE$
18 18 **
19 19 ****************************************************************************/
20 20
21 21 import QtQuick 1.0
22 22 import QtCommercial.Chart 1.0
23 23
24 24 Rectangle {
25 25 anchors.fill: parent
26 26
27 //![1]
27 28 ChartView {
28 29 title: "NHL All-Star Team Players"
29 30 anchors.fill: parent
30 theme: ChartView.ChartThemeHighContrast
31 31 axisXLabels: ["0", "2000", "1", "2001", "2", "2002", "3", "2003", "4", "2004", "5", "2005",
32 32 "6", "2006", "7", "2007", "8", "2008", "9", "2009", "10", "2010", "11", "2011"]
33 33
34 34 AreaSeries {
35 35 name: "Russian"
36 36 upperSeries: LineSeries {
37 37 XyPoint { x: 0; y: 1 }
38 38 XyPoint { x: 1; y: 1 }
39 39 XyPoint { x: 2; y: 1 }
40 40 XyPoint { x: 3; y: 1 }
41 41 XyPoint { x: 4; y: 1 }
42 42 XyPoint { x: 5; y: 0 }
43 43 XyPoint { x: 6; y: 1 }
44 44 XyPoint { x: 7; y: 1 }
45 45 XyPoint { x: 8; y: 4 }
46 46 XyPoint { x: 9; y: 3 }
47 47 XyPoint { x: 10; y: 2 }
48 48 XyPoint { x: 11; y: 1 }
49 49 }
50 50 lowerSeries: LineSeries {
51 51 XyPoint { x: 0; y: 0 }
52 52 XyPoint { x: 1; y: 0 }
53 53 XyPoint { x: 2; y: 0 }
54 54 XyPoint { x: 3; y: 0 }
55 55 XyPoint { x: 4; y: 0 }
56 56 XyPoint { x: 5; y: 0 }
57 57 XyPoint { x: 6; y: 0 }
58 58 XyPoint { x: 7; y: 0 }
59 59 XyPoint { x: 8; y: 0 }
60 60 XyPoint { x: 9; y: 0 }
61 61 XyPoint { x: 10; y: 0 }
62 62 XyPoint { x: 11; y: 0 }
63 63 }
64 onClicked: {
65 color = "red";
66 borderColor = "black";
67 }
68 64 }
65 // ...
66 //![1]
69 67
70 68 AreaSeries {
71 69 id: swedish
72 70 name: "Swedish"
73 71 upperSeries: LineSeries {
74 72 XyPoint { x: 0; y: 1 }
75 73 XyPoint { x: 1; y: 1 }
76 74 XyPoint { x: 2; y: 3 }
77 75 XyPoint { x: 3; y: 3 }
78 76 XyPoint { x: 4; y: 2 }
79 77 XyPoint { x: 5; y: 0 }
80 78 XyPoint { x: 6; y: 2 }
81 79 XyPoint { x: 7; y: 1 }
82 80 XyPoint { x: 8; y: 2 }
83 81 XyPoint { x: 9; y: 1 }
84 82 XyPoint { x: 10; y: 3 }
85 83 XyPoint { x: 11; y: 3 }
86 84 }
87 85 lowerSeries: LineSeries {
88 86 XyPoint { x: 0; y: 0 }
89 87 XyPoint { x: 1; y: 0 }
90 88 XyPoint { x: 2; y: 0 }
91 89 XyPoint { x: 3; y: 0 }
92 90 XyPoint { x: 4; y: 0 }
93 91 XyPoint { x: 5; y: 0 }
94 92 XyPoint { x: 6; y: 0 }
95 93 XyPoint { x: 7; y: 0 }
96 94 XyPoint { x: 8; y: 0 }
97 95 XyPoint { x: 9; y: 0 }
98 96 XyPoint { x: 10; y: 0 }
99 97 XyPoint { x: 11; y: 0 }
100 98 }
101 99 onClicked: {
102 100 color = "yellow";
103 101 borderColor = "blue";
104 102 }
105 103 }
106 104
107 105 AreaSeries {
108 106 name: "Finnish"
109 107 upperSeries: LineSeries {
110 108 XyPoint { x: 0; y: 0 }
111 109 XyPoint { x: 1; y: 0 }
112 110 XyPoint { x: 2; y: 0 }
113 111 XyPoint { x: 3; y: 0 }
114 112 XyPoint { x: 4; y: 0 }
115 113 XyPoint { x: 5; y: 0 }
116 114 XyPoint { x: 6; y: 1 }
117 115 XyPoint { x: 7; y: 0 }
118 116 XyPoint { x: 8; y: 0 }
119 117 XyPoint { x: 9; y: 0 }
120 118 XyPoint { x: 10; y: 0 }
121 119 XyPoint { x: 11; y: 1 }
122 120 }
123 121 lowerSeries: LineSeries {
124 122 XyPoint { x: 0; y: 0 }
125 123 XyPoint { x: 1; y: 0 }
126 124 XyPoint { x: 2; y: 0 }
127 125 XyPoint { x: 3; y: 0 }
128 126 XyPoint { x: 4; y: 0 }
129 127 XyPoint { x: 5; y: 0 }
130 128 XyPoint { x: 6; y: 0 }
131 129 XyPoint { x: 7; y: 0 }
132 130 XyPoint { x: 8; y: 0 }
133 131 XyPoint { x: 9; y: 0 }
134 132 XyPoint { x: 10; y: 0 }
135 133 XyPoint { x: 11; y: 0 }
136 134 }
137 135 onClicked: {
138 136 color = "white";
139 137 borderColor = "blue";
140 138 }
141 139 }
142 140 }
143 141 }
@@ -1,56 +1,56
1 1 /****************************************************************************
2 2 **
3 3 ** Copyright (C) 2012 Digia Plc
4 4 ** All rights reserved.
5 5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 6 **
7 7 ** This file is part of the Qt Commercial Charts Add-on.
8 8 **
9 9 ** $QT_BEGIN_LICENSE$
10 10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 11 ** accordance with the Qt Commercial License Agreement provided with the
12 12 ** Software or, alternatively, in accordance with the terms contained in
13 13 ** a written agreement between you and Digia.
14 14 **
15 15 ** If you have questions regarding the use of this file, please use
16 16 ** contact form at http://qt.digia.com
17 17 ** $QT_END_LICENSE$
18 18 **
19 19 ****************************************************************************/
20 20
21 21 import QtQuick 1.0
22 22 import QtCommercial.Chart 1.0
23 23
24 24 Rectangle {
25 25 anchors.fill: parent
26 26
27 //![1]
27 28 ChartView {
28 29 title: "Scatters"
29 30 anchors.fill: parent
30 theme: ChartView.ChartThemeBlueCerulean
31 axisX.max: 4
32 axisY.max: 4
33 31
34 32 ScatterSeries {
35 33 id: scatter1
36 34 name: "Scatter1"
37 35 XyPoint { x: 1.5; y: 1.5 }
38 36 XyPoint { x: 1.5; y: 1.6 }
39 37 XyPoint { x: 1.57; y: 1.55 }
40 38 XyPoint { x: 1.8; y: 1.8 }
41 39 XyPoint { x: 1.9; y: 1.6 }
42 40 XyPoint { x: 2.1; y: 1.3 }
43 41 XyPoint { x: 2.5; y: 2.1 }
44 42 }
45 43
46 44 ScatterSeries {
47 45 name: "Scatter2"
46 // ...
47 //![1]
48 48 XyPoint { x: 2.0; y: 2.0 }
49 49 XyPoint { x: 2.0; y: 2.1 }
50 50 XyPoint { x: 2.07; y: 2.05 }
51 51 XyPoint { x: 2.2; y: 2.9 }
52 52 XyPoint { x: 2.4; y: 2.7 }
53 53 XyPoint { x: 2.67; y: 2.65 }
54 54 }
55 55 }
56 56 }
@@ -1,40 +1,41
1 1 /****************************************************************************
2 2 **
3 3 ** Copyright (C) 2012 Digia Plc
4 4 ** All rights reserved.
5 5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 6 **
7 7 ** This file is part of the Qt Commercial Charts Add-on.
8 8 **
9 9 ** $QT_BEGIN_LICENSE$
10 10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 11 ** accordance with the Qt Commercial License Agreement provided with the
12 12 ** Software or, alternatively, in accordance with the terms contained in
13 13 ** a written agreement between you and Digia.
14 14 **
15 15 ** If you have questions regarding the use of this file, please use
16 16 ** contact form at http://qt.digia.com
17 17 ** $QT_END_LICENSE$
18 18 **
19 19 ****************************************************************************/
20 20
21 21 import QtQuick 1.0
22 22 import QtCommercial.Chart 1.0
23 23
24 24 Rectangle {
25 25 anchors.fill: parent
26 26
27 //![1]
27 28 ChartView {
28 29 title: "Bar series"
29 30 anchors.fill: parent
30 theme: ChartView.ChartThemeLight
31 31 legend.alignment: Qt.AlignBottom
32 32 axisXLabels: ["0", "2007", "1", "2008", "2", "2009", "3", "2010", "4", "2011", "5", "2012"]
33 33
34 34 GroupedBarSeries {
35 35 BarSet { name: "Bob"; values: [2, 2, 3, 4, 5, 6] }
36 36 BarSet { name: "Susan"; values: [5, 1, 2, 4, 1, 7] }
37 37 BarSet { name: "James"; values: [3, 5, 8, 13, 5, 8] }
38 38 }
39 39 }
40 //![1]
40 41 }
@@ -1,86 +1,86
1 1 /****************************************************************************
2 2 **
3 3 ** Copyright (C) 2012 Digia Plc
4 4 ** All rights reserved.
5 5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 6 **
7 7 ** This file is part of the Qt Commercial Charts Add-on.
8 8 **
9 9 ** $QT_BEGIN_LICENSE$
10 10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 11 ** accordance with the Qt Commercial License Agreement provided with the
12 12 ** Software or, alternatively, in accordance with the terms contained in
13 13 ** a written agreement between you and Digia.
14 14 **
15 15 ** If you have questions regarding the use of this file, please use
16 16 ** contact form at http://qt.digia.com
17 17 ** $QT_END_LICENSE$
18 18 **
19 19 ****************************************************************************/
20 20
21 21 import QtQuick 1.0
22 22 import QtCommercial.Chart 1.0
23 23
24 24 Rectangle {
25 25 width: parent.width
26 26 height: parent.height
27 27 property int viewNumber: 1
28 28
29 29 Loader {
30 30 id: loader
31 31 anchors.top: parent.top
32 32 anchors.bottom: buttons.top
33 33 anchors.left: parent.left
34 34 anchors.right: parent.right
35 35 source: "View" + viewNumber + ".qml";
36 36 }
37 37
38 38 Row {
39 39 id: buttons
40 40 anchors.bottom: parent.bottom
41 41 anchors.bottomMargin: 5
42 42 anchors.horizontalCenter: parent.horizontalCenter
43 43 spacing: 10
44 44
45 45 Rectangle {
46 46 height: 35
47 width: 55
48 color: "grey"
47 width: 60
48 color: "#c8955c"
49 49 radius: 5
50 50 Text {
51 51 anchors.centerIn: parent
52 text: "previous"
52 text: "<"
53 53 }
54 54 MouseArea {
55 55 anchors.fill: parent
56 56 onClicked: {
57 57 var i = viewNumber - 1;
58 58 if (i <= 0)
59 59 viewNumber = 5;
60 60 else
61 61 viewNumber = i;
62 62 }
63 63 }
64 64 }
65 65 Rectangle {
66 66 height: 35
67 width: 55
68 color: "grey"
67 width: 60
68 color: "#c8955c"
69 69 radius: 5
70 70 Text {
71 71 anchors.centerIn: parent
72 text: "next"
72 text: ">"
73 73 }
74 74 MouseArea {
75 75 anchors.fill: parent
76 76 onClicked: {
77 77 var i = viewNumber + 1;
78 78 if (i > 5)
79 79 viewNumber = 1;
80 80 else
81 81 viewNumber = i;
82 82 }
83 83 }
84 84 }
85 85 }
86 86 }
1 NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
@@ -1,7 +1,27
1 1 /*!
2 2 \example demos/qmlchart
3 3 \title Qml charts demo
4 4 \subtitle
5 5
6 This is a basic demonstration how to use the different chart types by using qml.
6 This is a basic demonstration how to use the different chart types by using qml. Creating each chart type begins
7 with creation of a ChartView. For example to create a pie, we use the PieSeries API together with a few PieSlices:
8 \snippet ../demos/qmlchart/qml/qmlchart/View1.qml 1
9 \image demos_qmlchart1.png
10
11 To create a chart with line and spline series:
12 \snippet ../demos/qmlchart/qml/qmlchart/View2.qml 1
13 \image demos_qmlchart2.png
14
15 Then we create a chart that illustrates the success of Russian, Swedish and Finnish ice-hockey players in the
16 NHL All-Star player selections by using three area series:
17 \snippet ../demos/qmlchart/qml/qmlchart/View3.qml 1
18 \image demos_qmlchart3.png
19
20 Then couple of scatter series:
21 \snippet ../demos/qmlchart/qml/qmlchart/View4.qml 1
22 \image demos_qmlchart4.png
23
24 And finally a bar series:
25 \snippet ../demos/qmlchart/qml/qmlchart/View5.qml 1
26 \image demos_qmlchart5.png
7 27 */
@@ -1,29 +1,31
1 1 /*!
2 2 \example examples/legend
3 3 \title Legend Example
4 4 \subtitle
5 5
6 6 This example shows how to detach legend from chart and how to attach it back. By default the chart
7 7 draws the legend inside same view with the chart. In some cases user may want to draw legend to somewhere else. To make this possible the legend can be detached from the chart. Detaching means that chart doesn't draw the legend or try to change it's layout. Detached can then be drawn where user wants, for example in different graphics scene. In this example we do so.
8
8
9 \image examples_legend_detach.png
10
9 11 First we create our chart as usual.
10 12
11 13 \snippet ../examples/legend/mainwidget.cpp 1
12 14
13 15 Here we create custom graphics scene, where we want to draw the detached legend.
14 16
15 17 \snippet ../examples/legend/mainwidget.cpp 2
16 18
17 19 Add some series to the chart.
18 20
19 21 \snippet ../examples/legend/mainwidget.cpp 3
20 22
21 23 Here we detach the legend. After detaching, we set new geometry for it and add it to the custom scene. The custom scene adopts the legend and becomes new parent for it. Note that chart will still update the contents of the legend.
22 24
23 25 \snippet ../examples/legend/mainwidget.cpp 4
24 26
25 27 To attach legend back to chart we first remove it from the custom scene. Then we add legend to the scene, where chart is. Last we attach legend to chart. Attaching legend to chart automatically sets the QChart as parent for legend.
26 28
27 29 \snippet ../examples/legend/mainwidget.cpp 5
28 30
29 31 */
General Comments 0
You need to be logged in to leave comments. Login now