/**************************************************************************** ** ** 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 help us when deploying the application to Android. 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 qml/qmlscatter/main.qml qml/qmlscatter/data.qml qml/qmlscatter/newbutton.qml \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 */