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

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

Documentation for Qml customizations demo
Tero Ahola -
r1392:5379c05bf653
parent child
Show More
Side by Side Unified
Context file:
r1392:5379c05bf653 Loading diff...:
Show file before | Show file after | Hide comments
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
Show file before | Show file after | Hide comments
@@ -0,0 +1,26
1 /*!
2 \example demos/qmlcustomizations
3 \title Qml Customizations
4 \subtitle
5
6 \image demos_qmlcustomizations.png
7
8 This application shows you how to customize different visual properties of a ChartView and series. It shows
9 a wheel of fortune by customizing a pie series.
10
11 First we create ChartView and a couple of series.
12 \snippet ../demos/qmlcustomizations/qml/qmlcustomizations/main.qml 1
13
14 The application data is generated in Component.onCompleted of the main rectangle:
15 \snippet ../demos/qmlcustomizations/qml/qmlcustomizations/main.qml 2
16
17 The following customizations are done repeatedly with a timer. To highlight one of the pie slices at time
18 we modify it's exploded property:
19 \snippet ../demos/qmlcustomizations/qml/qmlcustomizations/main.qml 3
20
21 Then an animation using a scatter series with one data point:
22 \snippet ../demos/qmlcustomizations/qml/qmlcustomizations/main.qml 4
23
24 When the wheel of fortune has stopped, we make the active slice blink by modifying it's colors.
25 \snippet ../demos/qmlcustomizations/qml/qmlcustomizations/main.qml 5
26 */
Show file before | Show file after | Hide comments
@@ -1,92 +1,101
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.0
22 import QtCommercial.Chart 1.0
23
23
24 Rectangle {
24 Rectangle {
25 width: parent.width
25 width: parent.width
26 height: parent.height
26 height: parent.height
27 property int __activeIndex: 1
27 property int __activeIndex: 1
28 property real __intervalCoefficient: 0
28 property real __intervalCoefficient: 0
29
29
30
30
31 //![1]
31 ChartView {
32 ChartView {
32 id: chartView
33 id: chartView
33 anchors.fill: parent
34 anchors.fill: parent
34 title: "Wheel of fortune"
35 title: "Wheel of fortune"
35 legend.visible: false
36 legend.visible: false
36
37
37 PieSeries {
38 PieSeries {
38 id: wheelOfFortune
39 id: wheelOfFortune
39 }
40 }
40
41
41 SplineSeries {
42 SplineSeries {
42 id: splineSeries
43 id: splineSeries
43 }
44 }
44
45
45 ScatterSeries {
46 ScatterSeries {
46 id: scatterSeries
47 id: scatterSeries
47 }
48 }
48 }
49 }
50 //![1]
49
51
50
52 //![2]
51 Component.onCompleted: {
53 Component.onCompleted: {
52 __intervalCoefficient = Math.random() + 0.1;
54 __intervalCoefficient = Math.random() + 0.1;
53
55
54 for (var i = 0; i < 20; i++)
56 for (var i = 0; i < 20; i++)
55 wheelOfFortune.append("", 1);
57 wheelOfFortune.append("", 1);
56
58
57 var interval = 1;
59 var interval = 1;
58 for (var j = 0; interval < 800; j++) {
60 for (var j = 0; interval < 800; j++) {
59 interval = __intervalCoefficient * j * j;
61 interval = __intervalCoefficient * j * j;
60 splineSeries.append(j, interval);
62 splineSeries.append(j, interval);
61 }
63 }
62 chartView.axisX.max = j;
64 chartView.axisX.max = j;
63 chartView.axisY.max = 1000;
65 chartView.axisY.max = 1000;
64 }
66 }
67 //![2]
65
68
66 Timer {
69 Timer {
67 triggeredOnStart: true
70 triggeredOnStart: true
68 running: true
71 running: true
69 repeat: true
72 repeat: true
70 interval: 100
73 interval: 100
71 onTriggered: {
74 onTriggered: {
72 var index = __activeIndex % wheelOfFortune.count;
75 var index = __activeIndex % wheelOfFortune.count;
73 if (interval < 700) {
76 if (interval < 700) {
74 scatterSeries.clear();
77 //![3]
75 wheelOfFortune.at(index).exploded = false;
78 wheelOfFortune.at(index).exploded = false;
76 __activeIndex++;
79 __activeIndex++;
77 index = __activeIndex % wheelOfFortune.count;
80 index = __activeIndex % wheelOfFortune.count;
78 wheelOfFortune.at(index).exploded = true;
81 wheelOfFortune.at(index).exploded = true;
82 //![3]
79 interval = splineSeries.at(__activeIndex).y;
83 interval = splineSeries.at(__activeIndex).y;
84 //![4]
85 scatterSeries.clear();
80 scatterSeries.append(__activeIndex, interval);
86 scatterSeries.append(__activeIndex, interval);
81 scatterSeries.color = Qt.tint(scatterSeries.color, "#05FF0000");
87 scatterSeries.color = Qt.tint(scatterSeries.color, "#05FF0000");
82 scatterSeries.markerSize += 0.5;
88 scatterSeries.markerSize += 0.5;
89 //![4]
83 } else {
90 } else {
91 //![5]
84 // Switch the colors of the slice and the border
92 // Switch the colors of the slice and the border
85 wheelOfFortune.at(index).borderWidth = 2;
93 wheelOfFortune.at(index).borderWidth = 2;
86 var borderColor = wheelOfFortune.at(index).borderColor;
94 var borderColor = wheelOfFortune.at(index).borderColor;
87 wheelOfFortune.at(index).borderColor = wheelOfFortune.at(index).color;
95 wheelOfFortune.at(index).borderColor = wheelOfFortune.at(index).color;
88 wheelOfFortune.at(index).color = borderColor;
96 wheelOfFortune.at(index).color = borderColor;
97 //![5]
89 }
98 }
90 }
99 }
91 }
100 }
92 }
101 }
Show file before | Show file after | Hide comments
@@ -1,28 +1,29
1 /*!
1 /*!
2 \page demos.html
2 \page demos.html
3 \title Demos
3 \title Demos
4 \keyword Demos
4 \keyword Demos
5
5
6 \raw HTML
6 \raw HTML
7 <table cellpadding="2" cellspacing="1" border="0" width="100%" class="indextable">
7 <table cellpadding="2" cellspacing="1" border="0" width="100%" class="indextable">
8 <tr>
8 <tr>
9 <th class="titleheader" width="33%">
9 <th class="titleheader" width="33%">
10 List of demos
10 List of demos
11 </th>
11 </th>
12 </tr>
12 </tr>
13 <tr>
13 <tr>
14 <td valign="top">
14 <td valign="top">
15 <ul>
15 <ul>
16 <li><a href="demos-chartthemes.html">Chart themes</a></li>
16 <li><a href="demos-chartthemes.html">Chart themes</a></li>
17 <li><a href="demos-piechartcustomization.html">Pie chart customization</a></li>
17 <li><a href="demos-piechartcustomization.html">Pie chart customization</a></li>
18 <li><a href="demos-dynamicspline.html">Dynamic spline chart</a></li>
18 <li><a href="demos-dynamicspline.html">Dynamic spline chart</a></li>
19 <li><a href="demos-qmlchart.html">Qml Basic Charts</a></li>
19 <li><a href="demos-qmlchart.html">Qml Basic Charts</a></li>
20 <li><a href="demos-qmlcustomizations.html">Qml Customizations</a></li>
20 <li><a href="demos-qmlweather.html">Qml Weather</a></li>
21 <li><a href="demos-qmlweather.html">Qml Weather</a></li>
21 <li><a href="demos-qmlf1legends.html">Qml F1 Legends</a></li>
22 <li><a href="demos-qmlf1legends.html">Qml F1 Legends</a></li>
22 <li><a href="demos-qmlcustommodel.html">Qml Custom Model</a></li>
23 <li><a href="demos-qmlcustommodel.html">Qml Custom Model</a></li>
23 </ul>
24 </ul>
24 </td>
25 </td>
25 </tr>
26 </tr>
26 </table>
27 </table>
27 \endraw
28 \endraw
28 */
29 */
General Comments 0
You need to be logged in to leave comments. Login now