diff options
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 Binary files differnew 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 -*/ |
