main.qml Example File

  /****************************************************************************
  **
  ** 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.Controls 1.0
  import QtQuick.Layouts 1.0
  import QtDataVisualization 1.0
  import "."

  Rectangle {
      id: mainView
      width: 800
      height: 600

      property int buttonLayoutHeight: 180;

      Data {
          id: graphData
      }

      Theme3D {
          id: firstTheme
          type: Theme3D.ThemeQt
      }

      Theme3D {
          id: secondTheme
          type: Theme3D.ThemeEbony
      }

      Item {
          id: dataView
          anchors.fill: parent

          Bars3D {
              id: barGraph
              anchors.fill: parent
              selectionMode: AbstractGraph3D.SelectionItemAndRow
              scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh
              theme: firstTheme
              valueAxis.labelFormat: "%d\u00B0C"

              Bar3DSeries {
                  id: station1
                  name: "Station 1"
                  itemLabelFormat: "Temperature at @seriesName for @colLabel, @rowLabel: @valueLabel"

                  ItemModelBarDataProxy {
                      itemModel: graphData.model
                      rowRole: "year"
                      columnRole: "month"
                      valueRole: "s1"
                  }
              }
              Bar3DSeries {
                  id: station2
                  name: "Station 2"
                  itemLabelFormat: "Temperature at @seriesName for @colLabel, @rowLabel: @valueLabel"

                  ItemModelBarDataProxy {
                      itemModel: graphData.model
                      rowRole: "year"
                      columnRole: "month"
                      valueRole: "s2"
                  }
              }
              Bar3DSeries {
                  id: station3
                  name: "Station 3"
                  itemLabelFormat: "Temperature at @seriesName for @colLabel, @rowLabel: @valueLabel"

                  ItemModelBarDataProxy {
                      itemModel: graphData.model
                      rowRole: "year"
                      columnRole: "month"
                      valueRole: "s2"
                  }
              }
          }
      }

      Rectangle {
          property int legendLocation: 3
          // Make the height and width fractional of main view height and width.
          // Reverse the relation if screen is in portrait - this makes legend look the same
          // if the orientation is rotated.
          property int fractionalHeight: mainView.width > mainView.height ? mainView.height / 5 : mainView.width / 5
          property int fractionalWidth: mainView.width > mainView.height ? mainView.width / 5 : mainView.height / 5

          id: legendPanel
          width: fractionalWidth > 150 ? fractionalWidth : 150
          // Adjust legendpanel height to avoid gaps between layouted items.
          height: fractionalHeight > 99 ? fractionalHeight - fractionalHeight % 3 : 99
          border.color: barGraph.theme.labelTextColor
          border.width: 3
          color: "#00000000" // Transparent

          ColumnLayout {
              anchors.fill: parent
              anchors.margins: parent.border.width
              spacing: 0
              clip: true
              LegendItem {
                  Layout.fillWidth: true
                  Layout.fillHeight: true
                  series: station1
                  theme: barGraph.theme
              }
              LegendItem {
                  Layout.fillWidth: true
                  Layout.fillHeight: true
                  series: station2
                  theme: barGraph.theme
              }
              LegendItem {
                  Layout.fillWidth: true
                  Layout.fillHeight: true
                  series: station3
                  theme: barGraph.theme
              }
          }

          states: [
              State  {
                  name: "topleft"
                  when: legendPanel.legendLocation === 1
                  AnchorChanges {
                      target: legendPanel
                      anchors.top: buttonLayout.bottom
                      anchors.bottom: undefined
                      anchors.left: dataView.left
                      anchors.right: undefined
                  }
              },
              State  {
                  name: "topright"
                  when: legendPanel.legendLocation === 2
                  AnchorChanges {
                      target: legendPanel
                      anchors.top: buttonLayout.bottom
                      anchors.bottom: undefined
                      anchors.left: undefined
                      anchors.right: dataView.right
                  }
              },
              State  {
                  name: "bottomleft"
                  when: legendPanel.legendLocation === 3
                  AnchorChanges {
                      target: legendPanel
                      anchors.top: undefined
                      anchors.bottom: dataView.bottom
                      anchors.left: dataView.left
                      anchors.right: undefined
                  }
              },
              State  {
                  name: "bottomright"
                  when: legendPanel.legendLocation === 4
                  AnchorChanges {
                      target: legendPanel
                      anchors.top: undefined
                      anchors.bottom: dataView.bottom
                      anchors.left: undefined
                      anchors.right: dataView.right
                  }
              }
          ]
      }

      RowLayout {
          id: buttonLayout
          Layout.minimumHeight: themeToggle.height
          width: parent.width
          anchors.left: parent.left
          spacing: 0

          NewButton {
              id: themeToggle
              Layout.fillHeight: true
              Layout.fillWidth: true
              text: "Change Theme"
              onClicked: {
                  if (barGraph.theme === firstTheme) {
                      barGraph.theme = secondTheme
                  } else {
                      barGraph.theme = firstTheme
                  }
              }
          }
          NewButton {
              id: repositionLegend
              Layout.fillHeight: true
              Layout.fillWidth: true
              text: "Reposition Legend"
              onClicked: {
                  if (legendPanel.legendLocation === 4) {
                      legendPanel.legendLocation = 1
                  } else {
                      legendPanel.legendLocation++
                  }
              }
          }
          NewButton {
              id: exitButton
              Layout.fillHeight: true
              Layout.fillWidth: true
              text: "Quit"
              onClicked: Qt.quit(0);
          }
      }

  }