##// END OF EJS Templates
Documentation of QML ChartView, Axis and Legend
Tero Ahola -
r1475:b687c49332c3
parent child
Show More
@@ -51,6 +51,8 Rectangle {
51 XyPoint { x: 2.2; y: 2.9 }
51 XyPoint { x: 2.2; y: 2.9 }
52 XyPoint { x: 2.4; y: 2.7 }
52 XyPoint { x: 2.4; y: 2.7 }
53 XyPoint { x: 2.67; y: 2.65 }
53 XyPoint { x: 2.67; y: 2.65 }
54 //![2]
54 }
55 }
55 }
56 }
57 //![2]
56 }
58 }
@@ -28,61 +28,63 Rectangle {
28
28
29 Loader {
29 Loader {
30 id: loader
30 id: loader
31 anchors.top: parent.top
31 anchors.fill: parent
32 anchors.bottom: buttons.top
33 anchors.left: parent.left
34 anchors.right: parent.right
35 source: "View" + viewNumber + ".qml";
32 source: "View" + viewNumber + ".qml";
36 }
33 }
37
34
38 Row {
35 Rectangle {
39 id: buttons
36 id: infoText
40 anchors.bottom: parent.bottom
37 anchors.centerIn: parent
41 anchors.bottomMargin: 15
38 width: parent.width
42 anchors.horizontalCenter: parent.horizontalCenter
39 height: 40
43 spacing: 5
40 color: "black"
41 Text {
42 color: "white"
43 anchors.centerIn: parent
44 text: "Use left and right arrow keys to navigate between chart types"
45 }
44
46
45 Rectangle {
47 Behavior on opacity {
46 height: 35
48 NumberAnimation { duration: 400 }
47 width: 60
48 border.color: "#c8955c"
49 border.width: 2
50 radius: 5
51 Text {
52 anchors.centerIn: parent
53 text: "<"
54 }
55 MouseArea {
56 anchors.fill: parent
57 onClicked: {
58 var i = viewNumber - 1;
59 if (i <= 0)
60 viewNumber = 9;
61 else
62 viewNumber = i;
63 }
64 }
65 }
49 }
66 Rectangle {
50 }
67 height: 35
51
68 width: 60
52 MouseArea {
69 border.color: "#c8955c"
53 focus: true
70 border.width: 2
54 anchors.fill: parent
71 radius: 5
55 onClicked: {
72 Text {
56 if (infoText.opacity > 0) {
73 anchors.centerIn: parent
57 infoText.opacity = 0.0;
74 text: ">"
58 } else {
59 nextView();
75 }
60 }
76 MouseArea {
61 }
77 anchors.fill: parent
62 Keys.onPressed: {
78 onClicked: {
63 if (infoText.opacity > 0) {
79 var i = viewNumber + 1;
64 infoText.opacity = 0.0;
80 if (i > 9)
65 } else {
81 viewNumber = 1;
66 if (event.key == Qt.Key_Left) {
82 else
67 previousView();
83 viewNumber = i;
68 } else {
69 nextView();
84 }
70 }
85 }
71 }
86 }
72 }
87 }
73 }
74
75 function nextView() {
76 var i = viewNumber + 1;
77 if (i > 9)
78 viewNumber = 1;
79 else
80 viewNumber = i;
81 }
82
83 function previousView() {
84 var i = viewNumber - 1;
85 if (i <= 0)
86 viewNumber = 9;
87 else
88 viewNumber = i;
89 }
88 }
90 }
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
@@ -4,7 +4,7
4 \keyword Charts QML API
4 \keyword Charts QML API
5
5
6 QtCommercial Charts QML API is an intuitive and simple way to show charts in your QML
6 QtCommercial Charts QML API is an intuitive and simple way to show charts in your QML
7 applications. The following example QML shows you how to create a simple pie chart:
7 applications. The following QML shows you to create a simple pie chart:
8 \snippet ../examples/qmlpiechart/qml/qmlpiechart/main.qml 1
8 \snippet ../examples/qmlpiechart/qml/qmlpiechart/main.qml 1
9 \snippet ../examples/qmlpiechart/qml/qmlpiechart/main.qml 2
9 \snippet ../examples/qmlpiechart/qml/qmlpiechart/main.qml 2
10 \snippet ../examples/qmlpiechart/qml/qmlpiechart/main.qml 3
10 \snippet ../examples/qmlpiechart/qml/qmlpiechart/main.qml 3
@@ -34,10 +34,11 QTCOMMERCIALCHART_BEGIN_NAMESPACE
34
34
35 ChartView element is the parent that is responsible for showing different chart series types.
35 ChartView element is the parent that is responsible for showing different chart series types.
36
36
37 \section1 Example Usage
37 The following QML shows how to create a simple line chart:
38 \snippet ../demos/qmlchart/qml/qmlchart/View2.qml 1
38
39
39 \beginfloatleft
40 \beginfloatleft
40 \image demos_qmlchart1.png
41 \image demos_qmlchart2.png
41 \endfloat
42 \endfloat
42 \clearfloat
43 \clearfloat
43 */
44 */
@@ -28,8 +28,6 QTCOMMERCIALCHART_BEGIN_NAMESPACE
28 /*!
28 /*!
29 \qmlclass LineSeries QLineSeries
29 \qmlclass LineSeries QLineSeries
30
30
31 \section1 Example Usage
32
33 \beginfloatleft
31 \beginfloatleft
34 \image demos_qmlchart2.png
32 \image demos_qmlchart2.png
35 \endfloat
33 \endfloat
@@ -28,15 +28,14 QTCOMMERCIALCHART_BEGIN_NAMESPACE
28 /*!
28 /*!
29 \qmlclass ScatterSeries QScatterSeries
29 \qmlclass ScatterSeries QScatterSeries
30
30
31 \section1 Example Usage
31 The following QML shows how to create a chart with two simple scatter series:
32 \snippet ../demos/qmlchart/qml/qmlchart/View5.qml 1
33 \snippet ../demos/qmlchart/qml/qmlchart/View5.qml 2
32
34
33 \beginfloatleft
35 \beginfloatleft
34 \image demos_qmlchart5.png
36 \image demos_qmlchart5.png
35 \endfloat
37 \endfloat
36 \clearfloat
38 \clearfloat
37
38 The following QML shows how to create a simple scatter chart:
39 \snippet ../demos/qmlchart/qml/qmlchart/View5.qml 1
40 */
39 */
41
40
42 DeclarativeScatterSeries::DeclarativeScatterSeries(QObject *parent) :
41 DeclarativeScatterSeries::DeclarativeScatterSeries(QObject *parent) :
@@ -41,6 +41,18 QTCOMMERCIALCHART_BEGIN_NAMESPACE
41 There is only one x Axis, however there can be multiple y axes on a ChartView.
41 There is only one x Axis, however there can be multiple y axes on a ChartView.
42 Each chart series can be bound to exactly one Y axis and the shared common X axis.
42 Each chart series can be bound to exactly one Y axis and the shared common X axis.
43 Axis can be setup to show axis line with tick marks, grid lines and shades.
43 Axis can be setup to show axis line with tick marks, grid lines and shades.
44
45 To access Axes you can use ChartView API. For example:
46 \code
47 ChartView {
48 axisX.min: 0
49 axisX.max: 3
50 axisX.ticksCount: 4
51 axisY.min: 0
52 axisY.max: 4
53 // Add a few series...
54 }
55 \endcode
44 */
56 */
45
57
46 /*!
58 /*!
@@ -65,7 +65,7 QTCOMMERCIALCHART_BEGIN_NAMESPACE
65 \brief Legend is part of QtCommercial Chart QML API.
65 \brief Legend is part of QtCommercial Chart QML API.
66
66
67 Legend is a graphical object, whics displays legend of the chart. Legend state is updated by ChartView, when
67 Legend is a graphical object, whics displays legend of the chart. Legend state is updated by ChartView, when
68 series have been changed. Legend is referenced via ChartView class. For example:
68 series have been changed. Legend is used via ChartView class. For example:
69 \code
69 \code
70 ChartView {
70 ChartView {
71 legend.visible: true
71 legend.visible: true
General Comments 0
You need to be logged in to leave comments. Login now