Documentation of QML ChartView, Axis and Legend

17 files changed, 71 insertions, 57 deletions

diff --git a/demos/qmlchart/qml/qmlchart/View5.qml b/demos/qmlchart/qml/qmlchart/View5.qml
index 6a160a57..80795ae2 100644
--- a/demos/qmlchart/qml/qmlchart/View5.qml
+++ b/demos/qmlchart/qml/qmlchart/View5.qml
@@ -51,6 +51,8 @@ Rectangle {
             XyPoint { x: 2.2; y: 2.9 }
             XyPoint { x: 2.4; y: 2.7 }
             XyPoint { x: 2.67; y: 2.65 }
+    //![2]
         }
     }
+    //![2]
 }
diff --git a/demos/qmlchart/qml/qmlchart/main.qml b/demos/qmlchart/qml/qmlchart/main.qml
index 09e2feca..e5307867 100644
--- a/demos/qmlchart/qml/qmlchart/main.qml
+++ b/demos/qmlchart/qml/qmlchart/main.qml
@@ -28,61 +28,63 @@ Rectangle {
 
     Loader {
         id: loader
-        anchors.top: parent.top
-        anchors.bottom: buttons.top
-        anchors.left: parent.left
-        anchors.right: parent.right
+        anchors.fill: parent
         source: "View" + viewNumber + ".qml";
     }
 
-    Row {
-        id: buttons
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 15
-        anchors.horizontalCenter: parent.horizontalCenter
-        spacing: 5
+    Rectangle {
+        id: infoText
+        anchors.centerIn: parent
+        width: parent.width
+        height: 40
+        color: "black"
+        Text {
+            color: "white"
+            anchors.centerIn: parent
+            text: "Use left and right arrow keys to navigate between chart types"
+        }
 
-        Rectangle {
-            height: 35
-            width: 60
-            border.color: "#c8955c"
-            border.width: 2
-            radius: 5
-            Text {
-                anchors.centerIn: parent
-                text: "<"
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    var i = viewNumber - 1;
-                    if (i <= 0)
-                        viewNumber = 9;
-                    else
-                        viewNumber = i;
-                }
-            }
+        Behavior on opacity {
+            NumberAnimation { duration: 400 }
         }
-        Rectangle {
-            height: 35
-            width: 60
-            border.color: "#c8955c"
-            border.width: 2
-            radius: 5
-            Text {
-                anchors.centerIn: parent
-                text: ">"
+    }
+
+    MouseArea {
+        focus: true
+        anchors.fill: parent
+        onClicked: {
+            if (infoText.opacity > 0) {
+                infoText.opacity = 0.0;
+            } else {
+                nextView();
             }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    var i = viewNumber + 1;
-                    if (i > 9)
-                        viewNumber = 1;
-                    else
-                        viewNumber = i;
+        }
+        Keys.onPressed: {
+            if (infoText.opacity > 0) {
+                infoText.opacity = 0.0;
+            } else {
+                if (event.key == Qt.Key_Left) {
+                    previousView();
+                } else {
+                    nextView();
                 }
             }
         }
     }
+
+    function nextView() {
+        var i = viewNumber + 1;
+        if (i > 9)
+            viewNumber = 1;
+        else
+            viewNumber = i;
+    }
+
+    function previousView() {
+        var i = viewNumber - 1;
+        if (i <= 0)
+            viewNumber = 9;
+        else
+            viewNumber = i;
+    }
 }
diff --git a/doc/images/demos_qmlchart1.png b/doc/images/demos_qmlchart1.png
index 2ab1e1c5..6a3c7812 100644
--- a/doc/images/demos_qmlchart1.png
+++ b/doc/images/demos_qmlchart1.png
diff --git a/doc/images/demos_qmlchart2.png b/doc/images/demos_qmlchart2.png
index a06d533f..36a7873b 100644
--- a/doc/images/demos_qmlchart2.png
+++ b/doc/images/demos_qmlchart2.png
diff --git a/doc/images/demos_qmlchart3.png b/doc/images/demos_qmlchart3.png
index 68828774..74e3299c 100644
--- a/doc/images/demos_qmlchart3.png
+++ b/doc/images/demos_qmlchart3.png
diff --git a/doc/images/demos_qmlchart4.png b/doc/images/demos_qmlchart4.png
index e6b59771..7edc02dc 100644
--- a/doc/images/demos_qmlchart4.png
+++ b/doc/images/demos_qmlchart4.png
diff --git a/doc/images/demos_qmlchart5.png b/doc/images/demos_qmlchart5.png
index 9b5a5f4d..129a4e90 100644
--- a/doc/images/demos_qmlchart5.png
+++ b/doc/images/demos_qmlchart5.png
diff --git a/doc/images/demos_qmlchart6.png b/doc/images/demos_qmlchart6.png
index 9125c785..d9428479 100644
--- a/doc/images/demos_qmlchart6.png
+++ b/doc/images/demos_qmlchart6.png
diff --git a/doc/images/demos_qmlchart7.png b/doc/images/demos_qmlchart7.png
index 94b99a80..bd83908a 100644
--- a/doc/images/demos_qmlchart7.png
+++ b/doc/images/demos_qmlchart7.png
diff --git a/doc/images/demos_qmlchart8.png b/doc/images/demos_qmlchart8.png
index b685e0f1..acf29aed 100644
--- a/doc/images/demos_qmlchart8.png
+++ b/doc/images/demos_qmlchart8.png
diff --git a/doc/images/demos_qmlchart9.png b/doc/images/demos_qmlchart9.png
index a745634a..d1671758 100644
--- a/doc/images/demos_qmlchart9.png
+++ b/doc/images/demos_qmlchart9.png
diff --git a/doc/src/qml.qdoc b/doc/src/qml.qdoc
index 5b5a7774..fcace0b4 100644
--- a/doc/src/qml.qdoc
+++ b/doc/src/qml.qdoc
@@ -4,7 +4,7 @@
     \keyword Charts QML API
 
     QtCommercial Charts QML API is an intuitive and simple way to show charts in your QML
-    applications. The following example QML shows you how to create a simple pie chart:
+    applications. The following QML shows you to create a simple pie chart:
     \snippet ../examples/qmlpiechart/qml/qmlpiechart/main.qml 1
     \snippet ../examples/qmlpiechart/qml/qmlpiechart/main.qml 2
     \snippet ../examples/qmlpiechart/qml/qmlpiechart/main.qml 3
diff --git a/plugins/declarative/declarativechart.cpp b/plugins/declarative/declarativechart.cpp
index 782280aa..d48ffee9 100644
--- a/plugins/declarative/declarativechart.cpp
+++ b/plugins/declarative/declarativechart.cpp
@@ -34,10 +34,11 @@ QTCOMMERCIALCHART_BEGIN_NAMESPACE
 
     ChartView element is the parent that is responsible for showing different chart series types.
 
-    \section1 Example Usage
+    The following QML shows how to create a simple line chart:
+    \snippet ../demos/qmlchart/qml/qmlchart/View2.qml 1
 
     \beginfloatleft
-    \image demos_qmlchart1.png
+    \image demos_qmlchart2.png
     \endfloat
     \clearfloat
 */
diff --git a/plugins/declarative/declarativelineseries.cpp b/plugins/declarative/declarativelineseries.cpp
index ff268dcf..5ab920aa 100644
--- a/plugins/declarative/declarativelineseries.cpp
+++ b/plugins/declarative/declarativelineseries.cpp
@@ -28,8 +28,6 @@ QTCOMMERCIALCHART_BEGIN_NAMESPACE
 /*!
     \qmlclass LineSeries QLineSeries
 
-    \section1 Example Usage
-
     \beginfloatleft
     \image demos_qmlchart2.png
     \endfloat
diff --git a/plugins/declarative/declarativescatterseries.cpp b/plugins/declarative/declarativescatterseries.cpp
index bda1263a..efdd5a1b 100644
--- a/plugins/declarative/declarativescatterseries.cpp
+++ b/plugins/declarative/declarativescatterseries.cpp
@@ -28,15 +28,14 @@ QTCOMMERCIALCHART_BEGIN_NAMESPACE
 /*!
     \qmlclass ScatterSeries QScatterSeries
 
-    \section1 Example Usage
+    The following QML shows how to create a chart with two simple scatter series:
+    \snippet ../demos/qmlchart/qml/qmlchart/View5.qml 1
+    \snippet ../demos/qmlchart/qml/qmlchart/View5.qml 2
 
     \beginfloatleft
     \image demos_qmlchart5.png
     \endfloat
     \clearfloat
-
-    The following QML shows how to create a simple scatter chart:
-    \snippet ../demos/qmlchart/qml/qmlchart/View5.qml 1
 */
 
 DeclarativeScatterSeries::DeclarativeScatterSeries(QObject *parent) :
diff --git a/src/axis/qaxis.cpp b/src/axis/qaxis.cpp
index 33dba861..76854aff 100644
--- a/src/axis/qaxis.cpp
+++ b/src/axis/qaxis.cpp
@@ -41,6 +41,18 @@ QTCOMMERCIALCHART_BEGIN_NAMESPACE
     There is only one x Axis, however there can be multiple y axes on a ChartView.
     Each chart series can be bound to exactly one Y axis and the shared common X axis.
     Axis can be setup to show axis line with tick marks, grid lines and shades.
+
+    To access Axes you can use ChartView API. For example:
+    \code
+        ChartView {
+            axisX.min: 0
+            axisX.max: 3
+            axisX.ticksCount: 4
+            axisY.min: 0
+            axisY.max: 4
+            // Add a few series...
+        }
+    \endcode
 */
 
 /*!
diff --git a/src/legend/qlegend.cpp b/src/legend/qlegend.cpp
index c8f309ca..90d2146c 100644
--- a/src/legend/qlegend.cpp
+++ b/src/legend/qlegend.cpp
@@ -65,7 +65,7 @@ QTCOMMERCIALCHART_BEGIN_NAMESPACE
     \brief Legend is part of QtCommercial Chart QML API.
 
     Legend is a graphical object, whics displays legend of the chart. Legend state is updated by ChartView, when
-    series have been changed. Legend is referenced via ChartView class. For example:
+    series have been changed. Legend is used via ChartView class. For example:
     \code
         ChartView {
             legend.visible: true