##// END OF EJS Templates
HG_REPOSITORIES » LPP » INSTRUMENTATION » USERS » JEANDET » qtcharts
RSS

Clone from http://code.qt.io/qt/qtcharts.git

Fixed QML Custom Legend layout
Tero Ahola -
r2310:765dbd69651c
parent child
Show More
Side by Side Unified
Context file:
r2310:765dbd69651c Loading diff...:
Show file before | Show file after | Hide comments
@@ -1,75 +1,76
1 /****************************************************************************
1 /****************************************************************************
2 **
2 **
3 ** Copyright (C) 2012 Digia Plc
3 ** Copyright (C) 2012 Digia Plc
4 ** All rights reserved.
4 ** All rights reserved.
5 ** For any questions to Digia, please use contact form at http://qt.digia.com
5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 **
6 **
7 ** This file is part of the Qt Commercial Charts Add-on.
7 ** This file is part of the Qt Commercial Charts Add-on.
8 **
8 **
9 ** $QT_BEGIN_LICENSE$
9 ** $QT_BEGIN_LICENSE$
10 ** Licensees holding valid Qt Commercial licenses may use this file in
10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 ** accordance with the Qt Commercial License Agreement provided with the
11 ** accordance with the Qt Commercial License Agreement provided with the
12 ** Software or, alternatively, in accordance with the terms contained in
12 ** Software or, alternatively, in accordance with the terms contained in
13 ** a written agreement between you and Digia.
13 ** a written agreement between you and Digia.
14 **
14 **
15 ** If you have questions regarding the use of this file, please use
15 ** If you have questions regarding the use of this file, please use
16 ** contact form at http://qt.digia.com
16 ** contact form at http://qt.digia.com
17 ** $QT_END_LICENSE$
17 ** $QT_END_LICENSE$
18 **
18 **
19 ****************************************************************************/
19 ****************************************************************************/
20
20
21 import QtQuick 1.0
21 import QtQuick 1.0
22 import QtCommercial.Chart 1.2
22 import QtCommercial.Chart 1.2
23
23
24 //![1]
24 //![1]
25 ChartView {
25 ChartView {
26 id: chartViewHighlighted
26 id: chartViewHighlighted
27 title: ""
27 title: ""
28 property variant selectedSeries
28 property variant selectedSeries
29 signal clicked
29 signal clicked
30 legend.visible: false
30 legend.visible: false
31 margins.top: 10
31 margins.top: 10
32 margins.bottom: 0
32 margins.bottom: 0
33
33
34 LineSeries {
34 LineSeries {
35 id: lineSeries
35 id: lineSeries
36
36
37 axisX: ValueAxis {
37 axisX: ValueAxis {
38 min: 2005
38 min: 2006
39 max: 2011
39 max: 2012
40 labelFormat: "%.0f"
40 labelFormat: "%.0f"
41 tickCount: 7
41 tickCount: 7
42 }
42 }
43 axisY: ValueAxis {
43 axisY: ValueAxis {
44 id: axisY
44 id: axisY
45 titleText: "EUR"
45 min: 0
46 min: 0
46 max: 40000
47 max: 40000
47 niceNumbersEnabled: true
48 niceNumbersEnabled: true
48 labelFormat: "%.0f"
49 labelFormat: "%.0f"
49 tickCount: 5
50 tickCount: 5
50 }
51 }
51 }
52 }
52 //![1]
53 //![1]
53
54
54 MouseArea {
55 MouseArea {
55 anchors.fill: parent
56 anchors.fill: parent
56 onClicked: {
57 onClicked: {
57 chartViewHighlighted.clicked();
58 chartViewHighlighted.clicked();
58 }
59 }
59 }
60 }
60
61
61 onSelectedSeriesChanged: {
62 onSelectedSeriesChanged: {
62 lineSeries.clear();
63 lineSeries.clear();
63 lineSeries.color = selectedSeries.color;
64 lineSeries.color = selectedSeries.color;
64 var maxVal = 0.0;
65 var maxVal = 0.0;
65 for (var i = 0; i < selectedSeries.upperSeries.count; i++ ) {
66 for (var i = 0; i < selectedSeries.upperSeries.count; i++ ) {
66 var y = selectedSeries.upperSeries.at(i).y - selectedSeries.lowerSeries.at(i).y;
67 var y = selectedSeries.upperSeries.at(i).y - selectedSeries.lowerSeries.at(i).y;
67 lineSeries.append(selectedSeries.upperSeries.at(i).x, y);
68 lineSeries.append(selectedSeries.upperSeries.at(i).x, y);
68 if (maxVal < y)
69 if (maxVal < y)
69 maxVal = y;
70 maxVal = y;
70 }
71 }
71 chartViewHighlighted.title = selectedSeries.name;
72 chartViewHighlighted.title = selectedSeries.name;
72 axisY.max = maxVal;
73 axisY.max = maxVal;
73 }
74 }
74 }
75 }
75
76
Show file before | Show file after | Hide comments
@@ -1,134 +1,116
1 /****************************************************************************
1 /****************************************************************************
2 **
2 **
3 ** Copyright (C) 2012 Digia Plc
3 ** Copyright (C) 2012 Digia Plc
4 ** All rights reserved.
4 ** All rights reserved.
5 ** For any questions to Digia, please use contact form at http://qt.digia.com
5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 **
6 **
7 ** This file is part of the Qt Commercial Charts Add-on.
7 ** This file is part of the Qt Commercial Charts Add-on.
8 **
8 **
9 ** $QT_BEGIN_LICENSE$
9 ** $QT_BEGIN_LICENSE$
10 ** Licensees holding valid Qt Commercial licenses may use this file in
10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 ** accordance with the Qt Commercial License Agreement provided with the
11 ** accordance with the Qt Commercial License Agreement provided with the
12 ** Software or, alternatively, in accordance with the terms contained in
12 ** Software or, alternatively, in accordance with the terms contained in
13 ** a written agreement between you and Digia.
13 ** a written agreement between you and Digia.
14 **
14 **
15 ** If you have questions regarding the use of this file, please use
15 ** If you have questions regarding the use of this file, please use
16 ** contact form at http://qt.digia.com
16 ** contact form at http://qt.digia.com
17 ** $QT_END_LICENSE$
17 ** $QT_END_LICENSE$
18 **
18 **
19 ****************************************************************************/
19 ****************************************************************************/
20
20
21 import QtQuick 1.0
21 import QtQuick 1.0
22 import QtCommercial.Chart 1.2
22 import QtCommercial.Chart 1.2
23
23
24 ChartView {
24 ChartView {
25 id: chartView
25 id: chartView
26 title: "Government Finance Taxes in Finland"
26 title: "Government Taxes"
27 legend.visible: false
27 legend.visible: false
28 signal entered(string seriesName)
28 signal entered(string seriesName)
29 signal exited(string seriesName)
29 signal exited(string seriesName)
30 margins.top: 10
30 margins.top: 10
31 margins.bottom: 0
31 margins.bottom: 0
32
32
33 ValueAxis {
33 ValueAxis {
34 id: axisX
34 id: axisX
35 min: 2005
35 min: 2006
36 max: 2011
36 max: 2012
37 tickCount: 7
37 tickCount: 7
38 labelFormat: "%.0f"
38 labelFormat: "%.0f"
39 }
39 }
40
40
41 ValueAxis {
41 ValueAxis {
42 id: axisY
42 id: axisY
43 titleText: "EUR"
43 min: 0
44 min: 0
44 max: 90000
45 max: 90000
45 tickCount: 10
46 tickCount: 10
46 labelFormat: "%.0f"
47 labelFormat: "%.0f"
47 }
48 }
48
49
49 AnimatedAreaSeries {
50 AnimatedAreaSeries {
50 id: stateSeries
51 id: stateSeries
51 name: "state"
52 name: "state"
52 axisX: axisX
53 axisX: axisX
53 axisY: axisY
54 axisY: axisY
54 borderWidth: 0
55 borderWidth: 0
55 upperSeries: LineSeries {
56 upperSeries: LineSeries {
56 id: stateUpper
57 id: stateUpper
57 XYPoint { x: 2005; y: 35771 }
58 XYPoint { x: 2006; y: 33119 }
58 XYPoint { x: 2006; y: 36822 }
59 XYPoint { x: 2007; y: 37941 }
59 XYPoint { x: 2007; y: 39220 }
60 XYPoint { x: 2008; y: 40122 }
60 XYPoint { x: 2008; y: 39624 }
61 XYPoint { x: 2009; y: 38991 }
61 XYPoint { x: 2009; y: 34061 }
62 XYPoint { x: 2010; y: 34055 }
62 XYPoint { x: 2010; y: 34680 }
63 XYPoint { x: 2011; y: 34555 }
63 XYPoint { x: 2011; y: 39180 }
64 XYPoint { x: 2012; y: 38991 }
64 }
65 }
65 lowerSeries: LineSeries {
66 lowerSeries: LineSeries {
66 XYPoint { x: 2005; y: 0 }
67 XYPoint { x: 2006; y: 0 }
67 XYPoint { x: 2006; y: 0 }
68 XYPoint { x: 2007; y: 0 }
68 XYPoint { x: 2007; y: 0 }
69 XYPoint { x: 2008; y: 0 }
69 XYPoint { x: 2008; y: 0 }
70 XYPoint { x: 2009; y: 0 }
70 XYPoint { x: 2009; y: 0 }
71 XYPoint { x: 2010; y: 0 }
71 XYPoint { x: 2010; y: 0 }
72 XYPoint { x: 2011; y: 0 }
72 XYPoint { x: 2011; y: 0 }
73 XYPoint { x: 2012; y: 0 }
73 }
74 }
74 }
75 }
75
76
76 //![1]
77 //![1]
77 AnimatedAreaSeries {
78 AnimatedAreaSeries {
78 id: municipalSeries
79 id: municipalSeries
79 name: "municipal"
80 name: "municipal"
80 axisX: axisX
81 axisX: axisX
81 axisY: axisY
82 axisY: axisY
82 borderWidth: 0
83 borderWidth: 0
83 upperSeries: LineSeries {
84 upperSeries: LineSeries {
84 id: municipalUpper
85 id: municipalUpper
85 XYPoint { x: 2005; y: 35771 + 14330 }
86 XYPoint { x: 2006; y: 33119 + 13443 }
86 XYPoint { x: 2006; y: 36822 + 15299 }
87 XYPoint { x: 2007; y: 37941 + 15311 }
87 XYPoint { x: 2007; y: 39220 + 16482 }
88 XYPoint { x: 2008; y: 40122 + 16552 }
88 XYPoint { x: 2008; y: 39624 + 17502 }
89 XYPoint { x: 2009; y: 38991 + 17904 }
89 XYPoint { x: 2009; y: 34061 + 17595 }
90 XYPoint { x: 2010; y: 34055 + 17599 }
90 XYPoint { x: 2010; y: 34680 + 18535 }
91 XYPoint { x: 2011; y: 34555 + 19002 }
91 XYPoint { x: 2011; y: 39180 + 19166 }
92 XYPoint { x: 2012; y: 38991 + 19177 }
92 }
93 }
93 lowerSeries: stateUpper
94 lowerSeries: stateUpper
94 }
95 }
95 //![1]
96 //![1]
96
97
97 AnimatedAreaSeries {
98 AnimatedAreaSeries {
98 id: socialSeries
99 id: socialSeries
99 name: "social sec. funds"
100 name: "social sec."
100 axisX: axisX
101 axisX: axisX
101 axisY: axisY
102 axisY: axisY
102 borderWidth: 0
103 borderWidth: 0
103 upperSeries: LineSeries {
104 upperSeries: LineSeries {
104 id: socialUpper
105 id: socialUpper
105 XYPoint { x: 2005; y: 35771 + 14330 + 18865 }
106 XYPoint { x: 2006; y: 33119 + 13443 + 18855 }
106 XYPoint { x: 2006; y: 36822 + 15299 + 20258 }
107 XYPoint { x: 2007; y: 37941 + 15311 + 20238 }
107 XYPoint { x: 2007; y: 39220 + 16482 + 21367 }
108 XYPoint { x: 2008; y: 40122 + 16552 + 21347 }
108 XYPoint { x: 2008; y: 39624 + 17502 + 22316 }
109 XYPoint { x: 2009; y: 38991 + 17904 + 22376 }
109 XYPoint { x: 2009; y: 34061 + 17595 + 22026 }
110 XYPoint { x: 2010; y: 34055 + 17599 + 22076 }
110 XYPoint { x: 2010; y: 34680 + 18535 + 22601 }
111 XYPoint { x: 2011; y: 34555 + 19002 + 22631 }
111 XYPoint { x: 2011; y: 39180 + 19166 + 23696 }
112 XYPoint { x: 2012; y: 38991 + 19177 + 23686 }
112 }
113 }
113 lowerSeries: municipalUpper
114 lowerSeries: municipalUpper
114 }
115 }
115
116 AnimatedAreaSeries {
117 id: euSeries
118 name: "EU"
119 axisX: axisX
120 axisY: axisY
121 borderWidth: 0
122 upperSeries: LineSeries {
123 id: euUpper
124 XYPoint { x: 2005; y: 35771 + 14330 + 18865 + 154 }
125 XYPoint { x: 2006; y: 36822 + 15299 + 20258 + 176 }
126 XYPoint { x: 2007; y: 39220 + 16482 + 21367 + 200 }
127 XYPoint { x: 2008; y: 39624 + 17502 + 22316 + 206 }
128 XYPoint { x: 2009; y: 34061 + 17595 + 22026 + 153 }
129 XYPoint { x: 2010; y: 34680 + 18535 + 22601 + 152 }
130 XYPoint { x: 2011; y: 39180 + 19166 + 23696 + 190 }
131 }
132 lowerSeries: socialUpper
133 }
134 }
116 }
Show file before | Show file after | Hide comments
@@ -1,117 +1,135
1 /****************************************************************************
1 /****************************************************************************
2 **
2 **
3 ** Copyright (C) 2012 Digia Plc
3 ** Copyright (C) 2012 Digia Plc
4 ** All rights reserved.
4 ** All rights reserved.
5 ** For any questions to Digia, please use contact form at http://qt.digia.com
5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 **
6 **
7 ** This file is part of the Qt Commercial Charts Add-on.
7 ** This file is part of the Qt Commercial Charts Add-on.
8 **
8 **
9 ** $QT_BEGIN_LICENSE$
9 ** $QT_BEGIN_LICENSE$
10 ** Licensees holding valid Qt Commercial licenses may use this file in
10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 ** accordance with the Qt Commercial License Agreement provided with the
11 ** accordance with the Qt Commercial License Agreement provided with the
12 ** Software or, alternatively, in accordance with the terms contained in
12 ** Software or, alternatively, in accordance with the terms contained in
13 ** a written agreement between you and Digia.
13 ** a written agreement between you and Digia.
14 **
14 **
15 ** If you have questions regarding the use of this file, please use
15 ** If you have questions regarding the use of this file, please use
16 ** contact form at http://qt.digia.com
16 ** contact form at http://qt.digia.com
17 ** $QT_END_LICENSE$
17 ** $QT_END_LICENSE$
18 **
18 **
19 ****************************************************************************/
19 ****************************************************************************/
20
20
21 import QtQuick 1.0
21 import QtQuick 1.0
22 import QtCommercial.Chart 1.1
22 import QtCommercial.Chart 1.1
23
23
24 Rectangle {
24 Rectangle {
25 id: legend
25 id: legend
26 radius: 8
26 color: "lightgray"
27 color: "lightblue"
28 property int seriesCount: 0
27 property int seriesCount: 0
29 property variant seriesNames: []
28 property variant seriesNames: []
30 property variant seriesColors: []
29 property variant seriesColors: []
31 signal entered(string seriesName)
30 signal entered(string seriesName)
32 signal exited(string seriesName)
31 signal exited(string seriesName)
33 signal selected(string seriesName)
32 signal selected(string seriesName)
34
33
35 function addSeries(seriesName, color) {
34 function addSeries(seriesName, color) {
36 var names = seriesNames;
35 var names = seriesNames;
37 names[seriesCount] = seriesName;
36 names[seriesCount] = seriesName;
38 seriesNames = names;
37 seriesNames = names;
39
38
40 var colors = seriesColors;
39 var colors = seriesColors;
41 colors[seriesCount] = color;
40 colors[seriesCount] = color;
42 seriesColors = colors;
41 seriesColors = colors;
43
42
44 seriesCount++;
43 seriesCount++;
45 }
44 }
46
45
46 Gradient {
47 id: buttonGradient
48 GradientStop { position: 0.0; color: "#F0F0F0" }
49 GradientStop { position: 1.0; color: "#A0A0A0" }
50 }
51
52 Gradient {
53 id: buttonGradientHovered
54 GradientStop { position: 0.0; color: "#FFFFFF" }
55 GradientStop { position: 1.0; color: "#B0B0B0" }
56 }
57
47 //![2]
58 //![2]
48 Component {
59 Component {
49 id: legendDelegate
60 id: legendDelegate
50 Rectangle {
61 Rectangle {
51 id: rect
62 id: rect
52 // ...
63 // ...
53 //![2]
64 //![2]
54 property string name: seriesNames[index]
65 property string name: seriesNames[index]
55 property color markerColor: seriesColors[index]
66 property color markerColor: seriesColors[index]
56 color: "transparent"
67 gradient: buttonGradient
57 border.color: seriesColors[index]
68 border.color: "#A0A0A0"
58 border.width: 2
69 border.width: 1
59 radius: 4
70 radius: 4
60 height: 20
71 height: 20
61 width: row.width + row.anchors.leftMargin * 2
72 width: 100
62
73
63 Row {
74 Row {
64 id: row
75 id: row
65 spacing: 5
76 spacing: 5
66 anchors.verticalCenter: parent.verticalCenter
77 anchors.verticalCenter: parent.verticalCenter
67 anchors.left: parent.left
78 anchors.left: parent.left
68 anchors.leftMargin: 5
79 anchors.leftMargin: 5
69 Rectangle {
80 Rectangle {
70 id: marker
81 id: marker
71 anchors.verticalCenter: parent.verticalCenter
82 anchors.verticalCenter: parent.verticalCenter
72 color: markerColor
83 color: markerColor
84 opacity: 0.3
73 radius: 4
85 radius: 4
74 width: 12
86 width: 12
75 height: 12
87 height: 10
76 }
88 }
77 Text {
89 Text {
78 id: label
90 id: label
79 anchors.verticalCenter: parent.verticalCenter
91 anchors.verticalCenter: parent.verticalCenter
92 anchors.verticalCenterOffset: -1
80 text: name
93 text: name
81 }
94 }
82 }
95 }
83
96
84 //![3]
97 //![3]
85 MouseArea {
98 MouseArea {
99 id: mouseArea
86 anchors.fill: parent
100 anchors.fill: parent
87 hoverEnabled: true
101 hoverEnabled: true
88 onEntered: {
102 onEntered: {
89 rect.color = "white";
103 rect.gradient = buttonGradientHovered;
90 legend.entered(label.text);
104 legend.entered(label.text);
91 }
105 }
92 onExited: {
106 onExited: {
93 rect.color = "transparent";
107 rect.gradient = buttonGradient;
94 legend.exited(label.text);
108 legend.exited(label.text);
109 marker.opacity = 0.3;
110 marker.height = 10;
95 }
111 }
96 onClicked: {
112 onClicked: {
97 legend.selected(label.text);
113 legend.selected(label.text);
114 marker.opacity = 1.0;
115 marker.height = 12;
98 }
116 }
99 }
117 }
100 //![3]
118 //![3]
101 }
119 }
102 }
120 }
103
121
104 //![1]
122 //![1]
105 Row {
123 Row {
106 id: legendRow
124 id: legendRow
107 anchors.centerIn: parent
125 anchors.centerIn: parent
108 spacing: 4
126 spacing: 6
109
127
110 Repeater {
128 Repeater {
111 id: legendRepeater
129 id: legendRepeater
112 model: seriesCount
130 model: seriesCount
113 delegate: legendDelegate
131 delegate: legendDelegate
114 }
132 }
115 }
133 }
116 //![1]
134 //![1]
117 }
135 }
Show file before | Show file after | Hide comments
@@ -1,66 +1,66
1 /****************************************************************************
1 /****************************************************************************
2 **
2 **
3 ** Copyright (C) 2012 Digia Plc
3 ** Copyright (C) 2012 Digia Plc
4 ** All rights reserved.
4 ** All rights reserved.
5 ** For any questions to Digia, please use contact form at http://qt.digia.com
5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 **
6 **
7 ** This file is part of the Qt Commercial Charts Add-on.
7 ** This file is part of the Qt Commercial Charts Add-on.
8 **
8 **
9 ** $QT_BEGIN_LICENSE$
9 ** $QT_BEGIN_LICENSE$
10 ** Licensees holding valid Qt Commercial licenses may use this file in
10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 ** accordance with the Qt Commercial License Agreement provided with the
11 ** accordance with the Qt Commercial License Agreement provided with the
12 ** Software or, alternatively, in accordance with the terms contained in
12 ** Software or, alternatively, in accordance with the terms contained in
13 ** a written agreement between you and Digia.
13 ** a written agreement between you and Digia.
14 **
14 **
15 ** If you have questions regarding the use of this file, please use
15 ** If you have questions regarding the use of this file, please use
16 ** contact form at http://qt.digia.com
16 ** contact form at http://qt.digia.com
17 ** $QT_END_LICENSE$
17 ** $QT_END_LICENSE$
18 **
18 **
19 ****************************************************************************/
19 ****************************************************************************/
20
20
21 import QtQuick 1.0
21 import QtQuick 1.0
22 import QtCommercial.Chart 1.1
22 import QtCommercial.Chart 1.1
23
23
24 Rectangle {
24 Rectangle {
25 id: main
25 id: main
26 width: parent.width
26 width: parent.width
27 height: parent.height
27 height: parent.height
28
28
29 Column {
29 Column {
30 id: column
30 id: column
31 anchors.fill: parent
31 anchors.fill: parent
32 anchors.bottomMargin: 10
32 anchors.bottomMargin: 10
33 spacing: 0
33 spacing: 0
34
34
35 ChartViewSelector {
35 ChartViewSelector {
36 id: chartViewSelector
36 id: chartViewSelector
37 width: parent.width
37 width: parent.width
38 height: parent.height - customLegend.height - anchors.bottomMargin
38 height: parent.height - customLegend.height - anchors.bottomMargin
39 onSeriesAdded: customLegend.addSeries(seriesName, seriesColor);
39 onSeriesAdded: customLegend.addSeries(seriesName, seriesColor);
40 }
40 }
41
41
42 CustomLegend {
42 CustomLegend {
43 id: customLegend
43 id: customLegend
44 width: 360
44 width: parent.width
45 height: 30
45 height: 35
46 anchors.horizontalCenter: parent.horizontalCenter
46 anchors.horizontalCenter: parent.horizontalCenter
47 onEntered: chartViewSelector.highlightSeries(seriesName);
47 onEntered: chartViewSelector.highlightSeries(seriesName);
48 onExited: chartViewSelector.highlightSeries("");
48 onExited: chartViewSelector.highlightSeries("");
49 onSelected: chartViewSelector.selectSeries(seriesName);
49 onSelected: chartViewSelector.selectSeries(seriesName);
50 }
50 }
51 }
51 }
52
52
53 states: State {
53 states: State {
54 name: "highlighted"
54 name: "highlighted"
55 PropertyChanges {
55 PropertyChanges {
56 target: chartViewHighlighted
56 target: chartViewHighlighted
57 width: column.width
57 width: column.width
58 height: (column.height - column.anchors.margins * 2 - customLegend.height)
58 height: (column.height - column.anchors.margins * 2 - customLegend.height)
59 }
59 }
60 PropertyChanges {
60 PropertyChanges {
61 target: chartViewStacked
61 target: chartViewStacked
62 width: 1
62 width: 1
63 height: 1
63 height: 1
64 }
64 }
65 }
65 }
66 }
66 }
General Comments 0
You need to be logged in to leave comments. Login now