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.

Pick-to: 6.5 6.6 6.5.2
Change-Id: I0c6e1e31d148079ce1977277c702cee6d434021b
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>

8 files changed, 252 insertions, 0 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/examples/charts/qmlchartsgallery/doc/src/examples-qmlcustomlegend.qdoc b/examples/charts/qmlchartsgallery/doc/src/examples-qmlcustomlegend.qdoc
new file mode 100644
index 00000000..ce0e7a1e
--- /dev/null
+++ b/examples/charts/qmlchartsgallery/doc/src/examples-qmlcustomlegend.qdoc
@@ -0,0 +1,34 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtcharts-qmlcustomlegend-example.html
+    \title Customizing Legends
+    \brief Shows you how to create your own custom legend.
+    \include qmlchartsgallery.qdocinc
+
+    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
+    the stacked areas is created. See ChartViewStacked.qml and AnimatedAreaSeries.qml.
+
+    \image examples_qmlcustomlegend1.png
+
+    \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 qmlchartsgallery/qml/customlegend/CustomLegend.qml 1
+    \snippet qmlchartsgallery/qml/customlegend/CustomLegend.qml 2
+    \dots
+    \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 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.