Docs: Update documentation for Qt Charts QML Gallery

Relocated documentation to the example folder, updated it to reflect the current application, and fixed broken snippets.
Fixed the highlighted examples in qdocconf, this should correct the
examples manifest file.

Change-Id: I0c6e1e31d148079ce1977277c702cee6d434021b
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
(cherry picked from commit 227c44e5afaa6427a01310874a70bcfe67edd103)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

14 files changed, 230 insertions, 214 deletions

diff --git a/examples/charts/qmlchartsgallery/doc/images/QMLChartsGallery.png b/examples/charts/qmlchartsgallery/doc/images/QMLChartsGallery.png
new file mode 100644
index 00000000..6e4c4c74
--- /dev/null
+++ b/examples/charts/qmlchartsgallery/doc/images/QMLChartsGallery.png
diff --git a/examples/charts/qmlchartsgallery/doc/src/examples-qmlaxes.qdoc b/examples/charts/qmlchartsgallery/doc/src/examples-qmlaxes.qdoc
new file mode 100644
index 00000000..e9749906
--- /dev/null
+++ b/examples/charts/qmlchartsgallery/doc/src/examples-qmlaxes.qdoc
@@ -0,0 +1,30 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtcharts-qmlaxes-example.html
+    \title Using Axes with QML
+    \brief Demonstrates how to use axes in your QML application.
+    \include qmlchartsgallery.qdocinc
+
+    We begin with a chart that has a line series and a scatter series with random
+    data. We then have a graph with two series that share a common axis.
+
+    \image examples_qmlaxes1.png
+
+    \snippet qmlchartsgallery/qml/TwoSeries.qml 1
+
+    This chart shows some accurate historical data. It is created by the following
+    snippet that makes use of a DateTimeAxis.
+
+    \image examples_qmlaxes2.png
+
+    \snippet qmlchartsgallery/qml/DateTimeAxis.qml 1
+
+    This following chart is created using a CategoryAxis to make the data
+    easier to understand.
+
+    \image examples_qmlaxes3.png
+
+    \snippet qmlchartsgallery/qml/CategoryAxis.qml 1
+*/
diff --git a/examples/charts/qmlchartsgallery/doc/src/examples-qmlcustomizations.qdoc b/examples/charts/qmlchartsgallery/doc/src/examples-qmlcustomizations.qdoc
new file mode 100644
index 00000000..e04ae2cb
--- /dev/null
+++ b/examples/charts/qmlchartsgallery/doc/src/examples-qmlcustomizations.qdoc
@@ -0,0 +1,35 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtcharts-qmlcustomizations-example.html
+    \title Customizing Chart Views with QML
+    \image examples_qmlcustomizations.png
+    \brief Shows you how to customize different visual properties of a ChartView
+    and a series.
+    \include qmlchartsgallery.qdocinc
+
+    Here we show you how to create a wheel of fortune by customizing a pie series.
+
+    First we create the ChartView and a couple of series.
+
+    \snippet qmlchartsgallery/qml/WheelOfFortune.qml 1
+
+    The application data is generated in Component.onCompleted of the main rectangle:
+
+    \snippet qmlchartsgallery/qml/WheelOfFortune.qml 2
+
+    The following customizations are done repeatedly with a timer. To highlight
+    one of the pie slices at time we modify its exploded property:
+
+    \snippet qmlchartsgallery/qml/WheelOfFortune.qml 3
+
+    Then an animation using a scatter series with one data point:
+
+    \snippet qmlchartsgallery/qml/WheelOfFortune.qml 4
+
+    When the wheel of fortune has stopped, we make the active slice blink by
+    modifying its colors.
+
+    \snippet qmlchartsgallery/qml/WheelOfFortune.qml 5
+*/
diff --git a/src/charts/doc/src/examples-qmlcustomlegend.qdoc b/examples/charts/qmlchartsgallery/doc/src/examples-qmlcustomlegend.qdoc
index e7198306..ce0e7a1e 100644
--- a/src/charts/doc/src/examples-qmlcustomlegend.qdoc
+++ b/examples/charts/qmlchartsgallery/doc/src/examples-qmlcustomlegend.qdoc
@@ -2,13 +2,12 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
-    \example qmlcustomlegend
-    \title Qml Custom Legend
-    \ingroup qtcharts_examples
+    \page qtcharts-qmlcustomlegend-example.html
+    \title Customizing Legends
+    \brief Shows you how to create your own custom legend.
+    \include qmlchartsgallery.qdocinc
 
-    \brief This example shows you how to create your own custom legend.
-
-    This application shows you how to create your own custom legend instead of using the
+    Here we show you how to create your own custom legend instead of using the
     built-in legend of ChartView API.
 
     The main view of the application shows a stacked area chart. This is how one of
@@ -16,24 +15,20 @@
 
     \image examples_qmlcustomlegend1.png
 
-    \include examples-run.qdocinc
-
-    \section1 Customizing Legends
-
-    \snippet qmlcustomlegend/qml/qmlcustomlegend/ChartViewStacked.qml 1
+    \snippet qmlchartsgallery/qml/customlegend/ChartViewStacked.qml 1
 
     Hovering with mouse on top of the legend will highlight the hovered series.
     (see CustomLegend.qml).
 
     \image examples_qmlcustomlegend2.png
-    \snippet qmlcustomlegend/qml/qmlcustomlegend/CustomLegend.qml 1
-    \snippet qmlcustomlegend/qml/qmlcustomlegend/CustomLegend.qml 2
+    \snippet qmlchartsgallery/qml/customlegend/CustomLegend.qml 1
+    \snippet qmlchartsgallery/qml/customlegend/CustomLegend.qml 2
     \dots
-    \snippet qmlcustomlegend/qml/qmlcustomlegend/CustomLegend.qml 3
+    \snippet qmlchartsgallery/qml/customlegend/CustomLegend.qml 3
 
     You can also select one of the stacked areas for a closer look as a line series by
     a mouse click (see ChartViewHighlighted.qml).
 
     \image examples_qmlcustomlegend3.png
-    \snippet qmlcustomlegend/qml/qmlcustomlegend/ChartViewHighlighted.qml 1
+    \snippet qmlchartsgallery/qml/customlegend/ChartViewHighlighted.qml 1
 */
diff --git a/examples/charts/qmlchartsgallery/doc/src/examples-qmlf1legends.qdoc b/examples/charts/qmlchartsgallery/doc/src/examples-qmlf1legends.qdoc
new file mode 100644
index 00000000..0be1b967
--- /dev/null
+++ b/examples/charts/qmlchartsgallery/doc/src/examples-qmlf1legends.qdoc
@@ -0,0 +1,27 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtcharts-qmlf1legends-example.html
+    \title Using List Models as Data Sources in QML
+    \brief Implements an F1 Legends Chart to demonstrate List Models as Data Sources.
+    \include qmlchartsgallery.qdocinc
+
+    \image examples_qmlf1legends.png
+
+    Let's define an empty ChartView first:
+
+    \snippet  qmlchartsgallery/qml/f1legends/F1Legends.qml 1
+
+    Our ListModel uses hard-coded test data. In a real application the data
+    source would be a timing system.
+
+    \snippet qmlchartsgallery/qml/f1legends/SpeedsList.qml 1
+    \dots
+    \snippet qmlchartsgallery/qml/f1legends/F1Legends.qml 2
+
+    The data is parsed with a timer. The line series representing each driver
+    are created on the fly.
+
+    \snippet qmlchartsgallery/qml/f1legends/F1Legends.qml 3
+*/
diff --git a/examples/charts/qmlchartsgallery/doc/src/examples-qmlpolarchart.qdoc b/examples/charts/qmlchartsgallery/doc/src/examples-qmlpolarchart.qdoc
new file mode 100644
index 00000000..257aaeb1
--- /dev/null
+++ b/examples/charts/qmlchartsgallery/doc/src/examples-qmlpolarchart.qdoc
@@ -0,0 +1,29 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtcharts-qmlpolarchart-example.html
+    \title Using Polar Charts with QML
+    \brief Shows how to make a few different polar chart in your QML application.
+    \include qmlchartsgallery.qdocinc
+
+    We begin with a chart that has a spline series and a scatter series with random
+    data. Both series use the same axes.
+
+    \image examples_qmlpolarchart1.png
+
+    \snippet qmlchartsgallery/qml/TwoSeriesPolar.qml 1
+
+    The next chart shows some accurate historical data for which we need
+    to use a DateTimeAxis and a AreaSeries.
+
+    \image examples_qmlpolarchart2.png
+
+    \snippet qmlchartsgallery/qml/DateTimeAxisPolar.qml 1
+
+    The next chart uses a CategoryAxis to make the data easier to understand.
+
+    \image examples_qmlpolarchart3.png
+
+    \snippet qmlchartsgallery/qml/CategoryAxisPolar.qml 1
+*/
diff --git a/examples/charts/qmlchartsgallery/doc/src/qmlchartsgallery.qdoc b/examples/charts/qmlchartsgallery/doc/src/qmlchartsgallery.qdoc
new file mode 100644
index 00000000..646e52ce
--- /dev/null
+++ b/examples/charts/qmlchartsgallery/doc/src/qmlchartsgallery.qdoc
@@ -0,0 +1,95 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \example qmlchartsgallery
+    \title Charts with QML Gallery
+    \ingroup qtcharts_examples
+
+    \brief Demonstrates how to use the different chart types by using qml.
+
+    \image QMLChartsGallery.png
+
+    \include examples-run.qdocinc
+
+    This is a Qt Quick application, the files for each chart type are located in
+    the qml directory of the example folder and are loaded arranged into a
+    ListView by main.qml, located in this examples directory.
+
+    This documentation won't focus on the top level layout or loading, but
+    rather on the use of the Qt Charts QML API.
+
+    \section1 Including dependencies
+
+    All .qml files start with:
+    \qml
+        import QtQuick
+        import QtCharts
+    \endqml
+
+    \section1 Creating charts with QML
+
+    Creating each chart type begins with the creation of a ChartView.
+
+    To create a pie chart, we use the PieSeries API together with a few PieSlices:
+
+    \image examples_qmlchart1.png
+    \snippet qmlchartsgallery/qml/PieChart.qml 1
+
+    You can create a chart with a line series:
+
+    \image examples_qmlchart2.png
+    \snippet qmlchartsgallery/qml/LineSeries.qml 1
+
+    And a spline series:
+
+    \image examples_qmlchart3.png
+    \snippet qmlchartsgallery/qml/SplineSeries.qml 1
+
+    You can create a chart that illustrates the NHL All-Star player selections
+    by using three area series:
+
+    \image examples_qmlchart4.png
+    \snippet qmlchartsgallery/qml/AreaSeries.qml 1
+    \dots
+
+    Then a couple of scatter series:
+
+    \image examples_qmlchart5.png
+    \snippet qmlchartsgallery/qml/ScatterSeries.qml 1
+    \dots
+
+    And a few different bar series:
+
+    \image examples_qmlchart6.png
+    \snippet qmlchartsgallery/qml/BarSeries.qml 1
+
+    \image examples_qmlchart7.png
+    \snippet qmlchartsgallery/qml/BarSeriesStacked.qml 1
+
+    \image examples_qmlchart8.png
+    \snippet qmlchartsgallery/qml/BarSeriesPercent.qml 1
+
+    \image examples_qmlchart9.png
+    \snippet qmlchartsgallery/qml/BarSeriesHorizontal.qml 1
+
+    \image examples_qmlchart10.png
+    \snippet qmlchartsgallery/qml/BarSeriesStackedHorizontal.qml 1
+
+    \image examples_qmlchart11.png
+    \snippet qmlchartsgallery/qml/BarSeriesPercentHorizontal.qml 1
+
+    This demonstrates how to create a donut chart with two pie series:
+
+    \image examples_qmlchart12.png
+    \snippet qmlchartsgallery/qml/Donut.qml 1
+
+    Additionally, anti-aliasing is set with the qml property in Qt Quick 2.
+
+    \section1 More charts
+
+    See the following links for walk-through of the remaining charts in this
+    example app.
+
+    \annotatedlist charts_qml_gallery_example
+*/
diff --git a/examples/charts/qmlchartsgallery/doc/src/qmlchartsgallery.qdocinc b/examples/charts/qmlchartsgallery/doc/src/qmlchartsgallery.qdocinc
new file mode 100644
index 00000000..5230ad97
--- /dev/null
+++ b/examples/charts/qmlchartsgallery/doc/src/qmlchartsgallery.qdocinc
@@ -0,0 +1,2 @@
+    \ingroup charts_qml_gallery_example
+    \note This is part of the \l{Charts with QML Gallery} example.
diff --git a/src/charts/doc/qtcharts.qdocconf b/src/charts/doc/qtcharts.qdocconf
index cf3ec2c2..6d1402a5 100644
--- a/src/charts/doc/qtcharts.qdocconf
+++ b/src/charts/doc/qtcharts.qdocconf
@@ -48,4 +48,5 @@ navigation.landingpage = Qt Charts
 navigation.cppclassespage = Qt Charts C++ Classes
 navigation.qmltypespage = Qt Charts QML Types
 
-manifestmeta.highlighted.names = "QtCharts/Chart Themes Example"
+manifestmeta.highlighted.names = "QtCharts/Charts with QML Gallery" \
+                                 "QtCharts/Charts with Widgets Gallery"
diff --git a/src/charts/doc/src/examples-qmlaxes.qdoc b/src/charts/doc/src/examples-qmlaxes.qdoc
deleted file mode 100644
index e2fdd3ea..00000000
--- a/src/charts/doc/src/examples-qmlaxes.qdoc
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright (C) 2016 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
-
-/*!
-    \example qmlaxes
-    \title Qml Axes
-    \ingroup qtcharts_examples
-
-    \brief This is a demonstration of how to use axes in your QML application.
-
-    \include examples-run.qdocinc
-
-    \section1 Using Axes in Qt Quick Applications
-
-    We begin with a chart that has a line series and a scatter series with random
-    data. Both series use the same axes.
-
-    \image examples_qmlaxes1.png
-
-    \snippet qmlaxes/qml/qmlaxes/View1.qml 1
-
-    The next example shows a chart with some accurate historical data that makes us to use a DateTimeAxis.
-
-    \image examples_qmlaxes2.png
-    \snippet qmlaxes/qml/qmlaxes/View2.qml 1
-
-    And the final example with a chart that uses a CategoryAxis to make the data easier to understand.
-
-    \image examples_qmlaxes3.png
-    \snippet qmlaxes/qml/qmlaxes/View3.qml 1
-*/
diff --git a/src/charts/doc/src/examples-qmlchart.qdoc b/src/charts/doc/src/examples-qmlchart.qdoc
deleted file mode 100644
index c99e9af6..00000000
--- a/src/charts/doc/src/examples-qmlchart.qdoc
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright (C) 2016 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
-
-/*!
-    \example qmlchart
-    \title Qml Charts Example
-    \ingroup qtcharts_examples
-
-    \brief This basic demonstration shows how to use the different chart types by using qml.
-
-    \include examples-run.qdocinc
-
-    \section1 Creating Charts Using QML
-
-    Creating each chart type begins with the creation of a ChartView.
-
-    To create a pie, we use the PieSeries API together with a few PieSlices:
-
-    \image examples_qmlchart1.png
-    \snippet qmlchart/qml/qmlchart/View1.qml 1
-
-    To create a chart with a line series:
-
-    \image examples_qmlchart2.png
-    \snippet qmlchart/qml/qmlchart/View2.qml 1
-
-    And spline series:
-
-    \image examples_qmlchart3.png
-    \snippet qmlchart/qml/qmlchart/View3.qml 1
-
-    Then we create a chart that illustrates the NHL All-Star player selections by using
-    three area series:
-
-    \image examples_qmlchart4.png
-    \snippet qmlchart/qml/qmlchart/View4.qml 1
-    \dots
-
-    Then a couple of scatter series:
-
-    \image examples_qmlchart5.png
-    \snippet qmlchart/qml/qmlchart/View5.qml 1
-    \dots
-
-    And a few different bar series:
-
-    \image examples_qmlchart6.png
-    \snippet qmlchart/qml/qmlchart/View6.qml 1
-
-    \image examples_qmlchart7.png
-    \snippet qmlchart/qml/qmlchart/View7.qml 1
-
-    \image examples_qmlchart8.png
-    \snippet qmlchart/qml/qmlchart/View8.qml 1
-
-    \image examples_qmlchart9.png
-    \snippet qmlchart/qml/qmlchart/View9.qml 1
-
-    \image examples_qmlchart10.png
-    \snippet qmlchart/qml/qmlchart/View10.qml 1
-
-    \image examples_qmlchart11.png
-    \snippet qmlchart/qml/qmlchart/View11.qml 1
-
-    And finally an example demonstrating how to create a donut chart with two pie series:
-
-    \image examples_qmlchart12.png
-    \snippet qmlchart/qml/qmlchart/View12.qml 1
-
-    Additionally, antialiasing is set with the qml property in Qt Quick 2.
-*/
diff --git a/src/charts/doc/src/examples-qmlcustomizations.qdoc b/src/charts/doc/src/examples-qmlcustomizations.qdoc
deleted file mode 100644
index e41e635f..00000000
--- a/src/charts/doc/src/examples-qmlcustomizations.qdoc
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright (C) 2016 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
-
-/*!
-    \example qmlcustomizations
-    \title Qml Customizations
-    \ingroup qtcharts_examples
-
-    \image examples_qmlcustomizations.png
-
-    \brief This application shows you how to customize different visual properties of a ChartView
-    and series.
-
-    This example shows a wheel of fortune by customizing a pie series.
-
-    \include examples-run.qdocinc
-
-    \section1 Customizing Chart Views
-
-    First we create the ChartView and a couple of series.
-    \snippet qmlcustomizations/qml/qmlcustomizations/main.qml 1
-
-    The application data is generated in Component.onCompleted of the main rectangle:
-    \snippet qmlcustomizations/qml/qmlcustomizations/main.qml 2
-
-    The following customizations are done repeatedly with a timer. To highlight one of the pie
-    slices at time we modify its exploded property:
-    \snippet qmlcustomizations/qml/qmlcustomizations/main.qml 3
-
-    Then an animation using a scatter series with one data point:
-    \snippet qmlcustomizations/qml/qmlcustomizations/main.qml 4
-
-    When the wheel of fortune has stopped, we make the active slice blink by modifying its colors.
-    \snippet qmlcustomizations/qml/qmlcustomizations/main.qml 5
-*/
diff --git a/src/charts/doc/src/examples-qmlf1legends.qdoc b/src/charts/doc/src/examples-qmlf1legends.qdoc
deleted file mode 100644
index 84fe92e1..00000000
--- a/src/charts/doc/src/examples-qmlf1legends.qdoc
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright (C) 2016 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
-
-/*!
-    \example qmlf1legends
-    \title Qml F1 Legends
-    \ingroup qtcharts_examples
-
-    \image examples_qmlf1legends.png
-
-    \brief This application demonstrates how to use ListModel as a datasource for a Chart.
-
-    \include examples-run.qdocinc
-
-    \section1 Using List Models as Data Sources
-
-    Let's define an empty ChartView first:
-    \snippet qmlf1legends/qml/qmlf1legends/main.qml 1
-
-    Our ListModel uses hard-coded test data. In a real application the data source would be a
-    timing system.
-    \snippet qmlf1legends/qml/qmlf1legends/SpeedsList.qml 1
-    \dots
-    \snippet qmlf1legends/qml/qmlf1legends/main.qml 2
-
-    The data is parsed with a timer. The line series representing each driver are created on the
-    fly.
-    \snippet qmlf1legends/qml/qmlf1legends/main.qml 3
-*/
diff --git a/src/charts/doc/src/examples-qmlpolarchart.qdoc b/src/charts/doc/src/examples-qmlpolarchart.qdoc
deleted file mode 100644
index c24714ff..00000000
--- a/src/charts/doc/src/examples-qmlpolarchart.qdoc
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright (C) 2016 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
-
-/*!
-    \example qmlpolarchart
-    \title Qml Polar Chart
-    \ingroup qtcharts_examples
-
-    \brief This is a demonstration on how to use a polar chart in your QML application.
-
-    \include examples-run.qdocinc
-
-    \section1 Using Polar Charts in Qt Quick Applications
-
-    We begin with a chart that has a spline series and a scatter series with random
-    data. Both series use the same axes.
-
-    \image examples_qmlpolarchart1.png
-    \snippet qmlpolarchart/qml/qmlpolarchart/View1.qml 1
-
-    The next example shows a chart with some accurate historical data for which we need
-    to use a DateTimeAxis and a AreaSeries.
-
-    \image examples_qmlpolarchart2.png
-    \snippet qmlpolarchart/qml/qmlpolarchart/View2.qml 1
-
-    And the final example with a chart that uses a CategoryAxis to make the data easier
-    to understand.
-
-    \image examples_qmlpolarchart3.png
-    \snippet qmlpolarchart/qml/qmlpolarchart/View3.qml 1
-*/