summaryrefslogtreecommitdiffstats
path: root/examples/datavisualization/qmlscatter/doc
diff options
context:
space:
mode:
authorMiikka Heikkinen <miikka.heikkinen@digia.com>2014-02-13 09:59:52 +0200
committerMiikka Heikkinen <miikka.heikkinen@digia.com>2014-02-13 10:09:17 +0200
commit88cd10aa7b3559b092cf5575b0a17d002dc100ae (patch)
tree9d6e7efdec49419558bb4ef4a9bc02ae3cb1cfc4 /examples/datavisualization/qmlscatter/doc
parentecabd51692b476567dc42a745f51996ec665b385 (diff)
Fix examples installation
Had to add one folder to the examples structure so installation works correctly. Change-Id: Ic92dfe9997413a6243abcf5eeba12744ba9e938c Reviewed-by: Tomi Korpipää <tomi.korpipaa@digia.com>
Diffstat (limited to 'examples/datavisualization/qmlscatter/doc')
-rw-r--r--examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.pngbin0 -> 98086 bytes
-rw-r--r--examples/datavisualization/qmlscatter/doc/images/qmlscatter-newproject.pngbin0 -> 37045 bytes
-rw-r--r--examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc190
3 files changed, 190 insertions, 0 deletions
diff --git a/examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png b/examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png
new file mode 100644
index 00000000..65ec4816
--- /dev/null
+++ b/examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png
Binary files differ
diff --git a/examples/datavisualization/qmlscatter/doc/images/qmlscatter-newproject.png b/examples/datavisualization/qmlscatter/doc/images/qmlscatter-newproject.png
new file mode 100644
index 00000000..7c81cae8
--- /dev/null
+++ b/examples/datavisualization/qmlscatter/doc/images/qmlscatter-newproject.png
Binary files differ
diff --git a/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc b/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc
new file mode 100644
index 00000000..fe86d740
--- /dev/null
+++ b/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc
@@ -0,0 +1,190 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the QtDataVisualization module.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+/*!
+ \example qmlscatter
+ \title Qt Quick 2 Scatter Example
+ \ingroup qtdatavisualization_examples
+ \brief Using Scatter3D in a QML application.
+
+ The Qt Quick 2 scatter example shows how to make a simple scatter graph visualization using
+ Scatter3D and Qt Quick 2.
+
+ For instructions about how to interact with the graph, see \l{Qt Data Visualization Interacting with Data}{this page}.
+
+ \image qmlscatter-example.png
+
+ \section1 Creating the application
+
+ The application main is created by creating a new Qt Quick Application project in QtCreator.
+ The dialog shown here is from QtCreator 3.0.0, and it may look a bit different in other
+ versions:
+
+ \image qmlscatter-newproject.png
+
+ We'll modify the generated \c main.cpp a bit, as we want to add our \c main.qml file as a
+ resource. We do it by replacing
+
+ \code viewer.setMainQmlFile(QStringLiteral("qml/qmlscatter/main.qml")); \endcode
+
+ with
+
+ \snippet ../examples/qmlscatter/main.cpp 0
+
+ This will make application deployment easier.
+
+ We'll enable anti-aliasing for our application in environments that support it:
+
+ \snippet ../examples/qmlscatter/main.cpp 2
+
+ We'll also change the application to be shown maximized by replacing
+
+ \code viewer.showExpanded(); \endcode
+
+ with
+
+ \snippet ../examples/qmlscatter/main.cpp 1
+
+ We won't look into that any closer, as we'll change nothing in the generated
+ \c qtquick2applicationviewer files.
+
+ Next we'll create new qml files for data (\c Data.qml) and a QtQuick.Controls button
+ we want to modify a bit (\c NewButton.qml), and add them to the resource file, in addition to
+ main.qml:
+
+ \code
+ <RCC>
+ <qresource prefix="/">
+ <file>qml/qmlscatter/Data.qml</file>
+ <file>qml/qmlscatter/main.qml</file>
+ <file>qml/qmlscatter/NewButton.qml</file>
+ </qresource>
+ </RCC>
+ \endcode
+
+ Now the base for our application is done, and we can start setting up the graph.
+
+ \section1 Setting up the graph
+
+ Let's start modifying the generated \c {main.qml}. We can remove all previous content from it,
+ as it has nothing we need.
+
+ First we'll import all the QML modules we need:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 0
+
+ The last \c import just imports all the qml files in the same directory as our \c {main.qml},
+ because that's where \c NewButton.qml and \c Data.qml are.
+
+ Then we create our main \c Item and call it \c mainView:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 1
+
+ \note The Qt Creator application wizard will set a \c Rectangle item as the main item, which
+ is opaque white by default. This doesn't work for us, because the graphs are rendered behind the other
+ QML elements. We change the main item type to \c Item, which is invisible. This way the graph is
+ not covered by the main item.
+
+ Then we'll add another \c Item inside it, and call it \c dataView. This will be the item to hold
+ the Scatter3D graph. We'll anchor it to the parent bottom:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 9
+
+ Next we're ready to add the Scatter3D graph itself. We'll add it inside the \c dataView and
+ name it \c {scatterGraph}. Let's make it fill the \c {dataView}:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 2
+
+ Now the graph is ready for use, but has no data. It also has the default axes and visual
+ properties.
+
+ Let's modify some visual properties first by adding the following inside \c {scatterGraph}:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 3
+
+ We added a customized theme and changed the shadow quality.
+ We're happy with the other visual properties, so we won't change them.
+
+ The custom theme is based on a predefined theme, but we change the font in it:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 13
+
+ Then it's time to start feeding the graph some data.
+
+ \section1 Adding data to the graph
+
+ Let's create a \c Data item inside the \c mainView and name it \c seriesData:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 4
+
+ The \c seriesData item contains the data models for all three series we use in this example.
+
+ This is the component that holds our data in \c {Data.qml}. It has an \c Item as the main
+ component.
+
+ In the main component we'll add the data itself in a \c ListModel and name it
+ \c {dataModel}:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/Data.qml 0
+ \dots
+
+ We'll add two more of these for the other two series, and name them \c dataModelTwo and
+ \c {dataModelThree}.
+
+ Then we need to expose the data models to be usable from \c {main.qml}. We do this by defining
+ them as aliases in the main data component:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/Data.qml 1
+
+ Now we can use the data from \c Data.qml with \c scatterGraph in \c {main.qml}. First we'll add
+ a Scatter3DSeries and call it \c {scatterSeries}:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 5
+
+ Then we'll set up selection label format for the series:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 10
+
+ And finally the data for series one in a ItemModelScatterDataProxy. We set the data itself as
+ \c itemModel for the proxy:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 11
+
+ We'll add the other two series in the same way, but modify some series-specific details a bit:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 12
+ \dots
+
+ Then we'll modify the properties of the default axes in \c scatterGraph a bit:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 6
+
+ After that we'll just add a few buttons to the \c mainView to control the graph. We'll only
+ show one as an example:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 7
+
+ Then we'll modify \c dataView to make room for the buttons at the top:
+
+ \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 8
+ \dots
+
+ And we're done!
+
+ \section1 Example contents
+*/