Qt Quick 2 Multiple Graphs Example

 /****************************************************************************
 **
 ** Copyright (C) 2016 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Data Visualization module of the Qt Toolkit.
 **
 ** $QT_BEGIN_LICENSE:GPL$
 ** Commercial License Usage
 ** Licensees holding valid commercial Qt licenses may use this file in
 ** accordance with the commercial license agreement provided with the
 ** Software or, alternatively, in accordance with the terms contained in
 ** a written agreement between you and The Qt Company. For licensing terms
 ** and conditions see https://www.qt.io/terms-conditions. For further
 ** information use the contact form at https://www.qt.io/contact-us.
 **
 ** GNU General Public License Usage
 ** Alternatively, this file may be used under the terms of the GNU
 ** General Public License version 3 or (at your option) any later version
 ** approved by the KDE Free Qt Foundation. The licenses are as published by
 ** the Free Software Foundation and appearing in the file LICENSE.GPL3
 ** included in the packaging of this file. Please review the following
 ** information to ensure the GNU General Public License requirements will
 ** be met: https://www.gnu.org/licenses/gpl-3.0.html.
 **
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/

 import QtQuick 2.1
 import QtQuick.Layouts 1.0
 import QtDataVisualization 1.0
 import "."

 Rectangle {
     id: mainView
     width: 800
     height: 600

     Data {
         id: data
     }

     GridLayout {
         id: gridLayout
         columns: 2
         Layout.fillHeight: true
         Layout.fillWidth: true
         anchors.top: mainView.top
         anchors.bottom: mainView.bottom
         anchors.left: mainView.left
         anchors.right: mainView.right

         Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
             border.color: surfaceGraph.theme.gridLineColor
             border.width: 2

             Surface3D {
                 id: surfaceGraph
                 anchors.fill: parent
                 anchors.margins: parent.border.width
                 theme: Theme3D {
                     type: Theme3D.ThemePrimaryColors
                     font.pointSize: 60
                 }
                 scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh

                 Surface3DSeries {
                     itemLabelFormat: "Pop density at (@xLabel N, @zLabel E): @yLabel"
                     ItemModelSurfaceDataProxy {
                         itemModel: data.sharedData
                         // The surface data points are not neatly lined up in rows and columns,
                         // so we define explicit row and column roles.
                         rowRole: "row"
                         columnRole: "col"
                         xPosRole: "latitude"
                         zPosRole: "longitude"
                         yPosRole: "pop_density"
                     }
                 }
             }
         }

         // We'll use one grid cell for buttons
         Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true

             GridLayout {
                 anchors.right: parent.right
                 anchors.left: parent.left
                 anchors.top: parent.top
                 anchors.bottom: parent.bottom
                 columns: 2

                 NewButton {
                     Layout.minimumWidth: parent.width / 2
                     Layout.fillHeight: true
                     Layout.fillWidth: true
                     text: "Clear Selections"
                     onClicked: clearSelections() // call a helper function to keep button itself simpler
                 }

                 NewButton {
                     Layout.minimumWidth: parent.width / 2
                     Layout.fillHeight: true
                     Layout.fillWidth: true
                     text: "Quit"
                     onClicked: Qt.quit(0);
                 }

                 NewButton {
                     Layout.fillHeight: true
                     Layout.fillWidth: true
                     text: "Reset Cameras"
                     onClicked: resetCameras() // call a helper function to keep button itself simpler
                 }

                 NewButton {
                     Layout.fillHeight: true
                     Layout.fillWidth: true
                     text: "Toggle Mesh Styles"
                     onClicked: toggleMeshStyle() // call a helper function to keep button itself simpler
                 }
             }
         }

         Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
             border.color: scatterGraph.theme.gridLineColor
             border.width: 2

             Scatter3D {
                 id: scatterGraph
                 anchors.fill: parent
                 anchors.margins: parent.border.width
                 theme: Theme3D {
                     type: Theme3D.ThemeDigia
                     font.pointSize: 60
                 }
                 scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh

                 Scatter3DSeries {
                     itemLabelFormat: "Pop density at (@xLabel N, @zLabel E): @yLabel"
                     ItemModelScatterDataProxy {
                         itemModel: data.sharedData
                         // Mapping model roles to scatter series item coordinates.
                         xPosRole: "latitude"
                         zPosRole: "longitude"
                         yPosRole: "pop_density"
                     }
                 }
             }
         }

         Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
             border.color: barGraph.theme.gridLineColor
             border.width: 2

             Bars3D {
                 id: barGraph
                 anchors.fill: parent
                 anchors.margins: parent.border.width
                 theme: Theme3D {
                     type: Theme3D.ThemeQt
                     font.pointSize: 60
                 }
                 selectionMode: AbstractGraph3D.SelectionItemAndRow | AbstractGraph3D.SelectionSlice
                 scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh

                 Bar3DSeries {
                     itemLabelFormat: "@seriesName: @valueLabel"
                     name: "Population density"

                     ItemModelBarDataProxy {
                         itemModel: data.sharedData
                         // Mapping model roles to bar series rows, columns, and values.
                         rowRole: "row"
                         columnRole: "col"
                         valueRole: "pop_density"
                     }
                 }
             }
         }
     }

     function clearSelections() {
         barGraph.clearSelection()
         scatterGraph.clearSelection()
         surfaceGraph.clearSelection()
     }

     function resetCameras() {
         surfaceGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricLeftHigh
         scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricLeftHigh
         barGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricLeftHigh
         surfaceGraph.scene.activeCamera.zoomLevel = 100.0
         scatterGraph.scene.activeCamera.zoomLevel = 100.0
         barGraph.scene.activeCamera.zoomLevel = 100.0
     }

     function toggleMeshStyle() {
         if (barGraph.seriesList[0].meshSmooth === true) {
             barGraph.seriesList[0].meshSmooth = false
             if (surfaceGraph.seriesList[0].flatShadingSupported)
                 surfaceGraph.seriesList[0].flatShadingEnabled = true
             scatterGraph.seriesList[0].meshSmooth = false
         } else {
             barGraph.seriesList[0].meshSmooth = true
             surfaceGraph.seriesList[0].flatShadingEnabled = false
             scatterGraph.seriesList[0].meshSmooth = true
         }
     }
 }