Revamp QML Charts examplev5.10.0-beta2v5.10.0-beta1

Updated the example so that the same theme is used for all charts. The
images for documentation are also updated.
Added comments to code.

Change-Id: Iaad648f42f5bb7edfa101f1202b56472aa511ca3
Task-number: QTBUG-60662
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>

4 files changed, 15 insertions, 22 deletions

diff --git a/examples/charts/qmlchart/qml/qmlchart/View1.qml b/examples/charts/qmlchart/qml/qmlchart/View1.qml
index 5f59989e..6b1de819 100644
--- a/examples/charts/qmlchart/qml/qmlchart/View1.qml
+++ b/examples/charts/qmlchart/qml/qmlchart/View1.qml
@@ -55,7 +55,7 @@ Item {
     }
 
     Component.onCompleted: {
-        // You can also manipulate slices dynamically
+        // You can also manipulate slices dynamically, like append a slice or set a slice exploded
         othersSlice = pieSeries.append("Others", 52.0);
         pieSeries.find("Volkswagen").exploded = true;
     }
diff --git a/examples/charts/qmlchart/qml/qmlchart/View12.qml b/examples/charts/qmlchart/qml/qmlchart/View12.qml
index e6279efc..6403c3f8 100644
--- a/examples/charts/qmlchart/qml/qmlchart/View12.qml
+++ b/examples/charts/qmlchart/qml/qmlchart/View12.qml
@@ -45,9 +45,9 @@ Item {
             id: pieOuter
             size: 0.96
             holeSize: 0.7
-            PieSlice { id: slice; label: "Alpha"; value: 19511; color: "#8AB846"; borderColor: "#163430" }
-            PieSlice { label: "Epsilon"; value: 11105; color: "#C0EEFF"; borderColor: "#3B391C" }
-            PieSlice { label: "Psi"; value: 9352; color: "#DF8939"; borderColor: "#13060C" }
+            PieSlice { id: slice; label: "Alpha"; value: 19511; color: "#99CA53" }
+            PieSlice { label: "Epsilon"; value: 11105; color: "#209FDF" }
+            PieSlice { label: "Psi"; value: 9352; color: "#F6A625" }
         }
 
         PieSeries {
@@ -55,17 +55,17 @@ Item {
             id: pieInner
             holeSize: 0.25
 
-            PieSlice { label: "Materials"; value: 10334; color: "#8AB846"; borderColor: "#163430" }
-            PieSlice { label: "Employee"; value: 3066; color: "#AAE356"; borderColor: "#163430" }
-            PieSlice { label: "Logistics"; value: 6111; color: "#99CC4E"; borderColor: "#163430" }
+            PieSlice { label: "Materials"; value: 10334; color: "#B9DB8A" }
+            PieSlice { label: "Employee"; value: 3066; color: "#DCEDC4" }
+            PieSlice { label: "Logistics"; value: 6111; color: "#F3F9EB" }
 
-            PieSlice { label: "Materials"; value: 7371; color: "#C0EEFF"; borderColor: "#3B391C" }
-            PieSlice { label: "Employee"; value: 2443; color: "#C9FAFF"; borderColor: "#3B391C" }
-            PieSlice { label: "Logistics"; value: 1291; color: "#B0FAFF"; borderColor: "#3B391C" }
+            PieSlice { label: "Materials"; value: 7371; color: "#63BCE9" }
+            PieSlice { label: "Employee"; value: 2443; color: "#A6D9F2" }
+            PieSlice { label: "Logistics"; value: 1291; color: "#E9F5FC" }
 
-            PieSlice { label: "Materials"; value: 4022; color: "#DF8939"; borderColor: "#13060C" }
-            PieSlice { label: "Employee"; value: 3998; color: "#FC9D42"; borderColor: "#13060C" }
-            PieSlice { label: "Logistics"; value: 1332; color: "#F2963F"; borderColor: "#13060C" }
+            PieSlice { label: "Materials"; value: 4022; color: "#F9C36C" }
+            PieSlice { label: "Employee"; value: 3998; color: "#FCE1B6" }
+            PieSlice { label: "Logistics"; value: 1332; color: "#FEF5E7" }
         }
     }
 
diff --git a/examples/charts/qmlchart/qml/qmlchart/View4.qml b/examples/charts/qmlchart/qml/qmlchart/View4.qml
index dc27a72a..5da50309 100644
--- a/examples/charts/qmlchart/qml/qmlchart/View4.qml
+++ b/examples/charts/qmlchart/qml/qmlchart/View4.qml
@@ -39,6 +39,7 @@ Item {
         anchors.fill: parent
         antialiasing: true
 
+        // Define x-axis to be used with the series instead of default one
         ValueAxis {
             id: valueAxis
             min: 2000
@@ -49,9 +50,6 @@ Item {
 
         AreaSeries {
             name: "Russian"
-            color: "#FFD52B1E"
-            borderColor: "#FF0039A5"
-            borderWidth: 3
             axisX: valueAxis
             upperSeries: LineSeries {
                 XYPoint { x: 2000; y: 1 }
@@ -72,9 +70,6 @@ Item {
 
         AreaSeries {
             name: "Swedish"
-            color: "#AF005292"
-            borderColor: "#AFFDCA00"
-            borderWidth: 3
             axisX: valueAxis
             upperSeries: LineSeries {
                 XYPoint { x: 2000; y: 1 }
@@ -94,9 +89,6 @@ Item {
 
         AreaSeries {
             name: "Finnish"
-            color: "#00357F"
-            borderColor: "#FEFEFE"
-            borderWidth: 3
             axisX: valueAxis
             upperSeries: LineSeries {
                 XYPoint { x: 2000; y: 0 }
diff --git a/examples/charts/qmlchart/qml/qmlchart/main.qml b/examples/charts/qmlchart/qml/qmlchart/main.qml
index 8cb1d09c..e2e683d9 100644
--- a/examples/charts/qmlchart/qml/qmlchart/main.qml
+++ b/examples/charts/qmlchart/qml/qmlchart/main.qml
@@ -36,6 +36,7 @@ Item {
     height: 400
 
     MainForm {
+        // Hide the default info text once view changes away from the first view
         onCurrentIndexChanged: {
             if (info.opacity > 0.0) {
                 if (sourceLoaded)