diff options
Diffstat (limited to 'examples/qmlbars/qml')
-rw-r--r-- | examples/qmlbars/qml/qmlbars/axes.qml | 50 | ||||
-rw-r--r-- | examples/qmlbars/qml/qmlbars/data.qml | 133 | ||||
-rw-r--r-- | examples/qmlbars/qml/qmlbars/main.qml | 157 |
3 files changed, 340 insertions, 0 deletions
diff --git a/examples/qmlbars/qml/qmlbars/axes.qml b/examples/qmlbars/qml/qmlbars/axes.qml new file mode 100644 index 00000000..b0ba3eb2 --- /dev/null +++ b/examples/qmlbars/qml/qmlbars/axes.qml @@ -0,0 +1,50 @@ +/**************************************************************************** +** +** Copyright (C) 2013 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 +** +****************************************************************************/ + +import QtQuick 2.1 +import com.digia.QtDataVisualization 1.0 + +Item { + property alias column: columnAxis + property alias expenses: expensesAxis + property alias income: incomeAxis + + // For row labels we can use row labels from data proxy, so default axis + // suffices for rows. + + // Custom labels for columns, since the data contains abbreviated month names. + CategoryAxis3D { + id: columnAxis + categoryLabels: ["January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December"] + } + ValueAxis3D { + id: incomeAxis + min: 0 + max: 35 + labelFormat: "%.2f M\u20AC" + title: "Monthly income" + } + ValueAxis3D { + id: expensesAxis + min: 0 + max: 35 + labelFormat: "-%.2f M\u20AC" + title: "Monthly expenses" + } +} diff --git a/examples/qmlbars/qml/qmlbars/data.qml b/examples/qmlbars/qml/qmlbars/data.qml new file mode 100644 index 00000000..fff568cc --- /dev/null +++ b/examples/qmlbars/qml/qmlbars/data.qml @@ -0,0 +1,133 @@ +/**************************************************************************** +** +** Copyright (C) 2013 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 +** +****************************************************************************/ + +import QtQuick 2.1 +import com.digia.QtDataVisualization 1.0 + +Item { + property alias mapping: valueMapping + property alias model: dataModel + property alias proxy: modelProxy + + BarDataMapping { + id: valueMapping + rowRole: "year" + columnRole: "month" + valueRole: "expenses" + } + + ItemModelBarDataProxy { + id: modelProxy + activeMapping: valueMapping + itemModel: dataModel + } + + ListModel { + id: dataModel + ListElement{ year: "2006"; month: "Jan"; expenses: "4"; income: "5" } + ListElement{ year: "2006"; month: "Feb"; expenses: "5"; income: "6" } + ListElement{ year: "2006"; month: "Mar"; expenses: "7"; income: "4" } + ListElement{ year: "2006"; month: "Apr"; expenses: "3"; income: "2" } + ListElement{ year: "2006"; month: "May"; expenses: "4"; income: "1" } + ListElement{ year: "2006"; month: "Jun"; expenses: "2"; income: "2" } + ListElement{ year: "2006"; month: "Jul"; expenses: "1"; income: "3" } + ListElement{ year: "2006"; month: "Aug"; expenses: "5"; income: "1" } + ListElement{ year: "2006"; month: "Sep"; expenses: "2"; income: "3" } + ListElement{ year: "2006"; month: "Oct"; expenses: "5"; income: "2" } + ListElement{ year: "2006"; month: "Nov"; expenses: "8"; income: "5" } + ListElement{ year: "2006"; month: "Dec"; expenses: "3"; income: "3" } + + ListElement{ year: "2007"; month: "Jan"; expenses: "3"; income: "1" } + ListElement{ year: "2007"; month: "Feb"; expenses: "4"; income: "2" } + ListElement{ year: "2007"; month: "Mar"; expenses: "12"; income: "4" } + ListElement{ year: "2007"; month: "Apr"; expenses: "13"; income: "6" } + ListElement{ year: "2007"; month: "May"; expenses: "14"; income: "11" } + ListElement{ year: "2007"; month: "Jun"; expenses: "7"; income: "7" } + ListElement{ year: "2007"; month: "Jul"; expenses: "6"; income: "4" } + ListElement{ year: "2007"; month: "Aug"; expenses: "4"; income: "15" } + ListElement{ year: "2007"; month: "Sep"; expenses: "2"; income: "18" } + ListElement{ year: "2007"; month: "Oct"; expenses: "29"; income: "25" } + ListElement{ year: "2007"; month: "Nov"; expenses: "23"; income: "29" } + ListElement{ year: "2007"; month: "Dec"; expenses: "5"; income: "9" } + + ListElement{ year: "2008"; month: "Jan"; expenses: "3"; income: "8" } + ListElement{ year: "2008"; month: "Feb"; expenses: "8"; income: "14" } + ListElement{ year: "2008"; month: "Mar"; expenses: "10"; income: "20" } + ListElement{ year: "2008"; month: "Apr"; expenses: "12"; income: "24" } + ListElement{ year: "2008"; month: "May"; expenses: "10"; income: "19" } + ListElement{ year: "2008"; month: "Jun"; expenses: "5"; income: "8" } + ListElement{ year: "2008"; month: "Jul"; expenses: "1"; income: "4" } + ListElement{ year: "2008"; month: "Aug"; expenses: "7"; income: "12" } + ListElement{ year: "2008"; month: "Sep"; expenses: "4"; income: "16" } + ListElement{ year: "2008"; month: "Oct"; expenses: "22"; income: "33" } + ListElement{ year: "2008"; month: "Nov"; expenses: "16"; income: "25" } + ListElement{ year: "2008"; month: "Dec"; expenses: "2"; income: "7" } + + ListElement{ year: "2009"; month: "Jan"; expenses: "4"; income: "5" } + ListElement{ year: "2009"; month: "Feb"; expenses: "4"; income: "7" } + ListElement{ year: "2009"; month: "Mar"; expenses: "11"; income: "14" } + ListElement{ year: "2009"; month: "Apr"; expenses: "16"; income: "22" } + ListElement{ year: "2009"; month: "May"; expenses: "3"; income: "5" } + ListElement{ year: "2009"; month: "Jun"; expenses: "4"; income: "8" } + ListElement{ year: "2009"; month: "Jul"; expenses: "7"; income: "9" } + ListElement{ year: "2009"; month: "Aug"; expenses: "9"; income: "13" } + ListElement{ year: "2009"; month: "Sep"; expenses: "1"; income: "6" } + ListElement{ year: "2009"; month: "Oct"; expenses: "14"; income: "25" } + ListElement{ year: "2009"; month: "Nov"; expenses: "19"; income: "29" } + ListElement{ year: "2009"; month: "Dec"; expenses: "5"; income: "7" } + + ListElement{ year: "2010"; month: "Jan"; expenses: "14"; income: "22" } + ListElement{ year: "2010"; month: "Feb"; expenses: "5"; income: "7" } + ListElement{ year: "2010"; month: "Mar"; expenses: "1"; income: "9" } + ListElement{ year: "2010"; month: "Apr"; expenses: "1"; income: "12" } + ListElement{ year: "2010"; month: "May"; expenses: "5"; income: "9" } + ListElement{ year: "2010"; month: "Jun"; expenses: "5"; income: "8" } + ListElement{ year: "2010"; month: "Jul"; expenses: "3"; income: "7" } + ListElement{ year: "2010"; month: "Aug"; expenses: "1"; income: "5" } + ListElement{ year: "2010"; month: "Sep"; expenses: "2"; income: "4" } + ListElement{ year: "2010"; month: "Oct"; expenses: "10"; income: "13" } + ListElement{ year: "2010"; month: "Nov"; expenses: "12"; income: "17" } + ListElement{ year: "2010"; month: "Dec"; expenses: "6"; income: "9" } + + ListElement{ year: "2011"; month: "Jan"; expenses: "2"; income: "6" } + ListElement{ year: "2011"; month: "Feb"; expenses: "4"; income: "8" } + ListElement{ year: "2011"; month: "Mar"; expenses: "7"; income: "12" } + ListElement{ year: "2011"; month: "Apr"; expenses: "9"; income: "15" } + ListElement{ year: "2011"; month: "May"; expenses: "7"; income: "19" } + ListElement{ year: "2011"; month: "Jun"; expenses: "9"; income: "18" } + ListElement{ year: "2011"; month: "Jul"; expenses: "13"; income: "17" } + ListElement{ year: "2011"; month: "Aug"; expenses: "5"; income: "9" } + ListElement{ year: "2011"; month: "Sep"; expenses: "3"; income: "8" } + ListElement{ year: "2011"; month: "Oct"; expenses: "13"; income: "15" } + ListElement{ year: "2011"; month: "Nov"; expenses: "8"; income: "17" } + ListElement{ year: "2011"; month: "Dec"; expenses: "7"; income: "10" } + + ListElement{ year: "2012"; month: "Jan"; expenses: "12"; income: "16" } + ListElement{ year: "2012"; month: "Feb"; expenses: "24"; income: "28" } + ListElement{ year: "2012"; month: "Mar"; expenses: "27"; income: "22" } + ListElement{ year: "2012"; month: "Apr"; expenses: "29"; income: "25" } + ListElement{ year: "2012"; month: "May"; expenses: "27"; income: "29" } + ListElement{ year: "2012"; month: "Jun"; expenses: "19"; income: "18" } + ListElement{ year: "2012"; month: "Jul"; expenses: "13"; income: "17" } + ListElement{ year: "2012"; month: "Aug"; expenses: "15"; income: "19" } + ListElement{ year: "2012"; month: "Sep"; expenses: "3"; income: "8" } + ListElement{ year: "2012"; month: "Oct"; expenses: "3"; income: "6" } + ListElement{ year: "2012"; month: "Nov"; expenses: "4"; income: "8" } + ListElement{ year: "2012"; month: "Dec"; expenses: "5"; income: "9" } + } +} diff --git a/examples/qmlbars/qml/qmlbars/main.qml b/examples/qmlbars/qml/qmlbars/main.qml new file mode 100644 index 00000000..aec3188c --- /dev/null +++ b/examples/qmlbars/qml/qmlbars/main.qml @@ -0,0 +1,157 @@ +/**************************************************************************** +** +** Copyright (C) 2013 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 +** +****************************************************************************/ + +import QtQuick 2.1 +import QtQuick.Controls 1.0 +import com.digia.QtDataVisualization 1.0 +import "." + +Item { + id: mainview + width: 1280 + height: 1024 + visible: true + + Data { + id: graphData + } + + Axes { + id: graphAxes + } + + Item { + id: dataView + width: parent.width - tableView.width + height: parent.height + anchors.right: parent.right; + + Bars3D { + id: testGraph + width: dataView.width + height: dataView.height + shadowQuality: Bars3D.ShadowQualityMedium + selectionMode: Bars3D.SelectionModeItem + font.pointSize: 35 + theme: Bars3D.ThemeRetro + labelStyle: Bars3D.LabelStyleFromTheme + dataProxy: graphData.proxy + barThickness: 0.5 + barSpacing: Qt.size(0.5, 0.5) + barSpacingRelative: false + cameraPreset: Bars3D.CameraPresetRight + columnAxis: graphAxes.column + valueAxis: graphAxes.expenses + itemLabelFormat: "@valueTitle for @colLabel, @rowLabel: @valueLabel" + + onSelectedBarPosChanged: { + // Set tableView current row to selected bar + var rowRole = graphData.proxy.rowLabels[position.x]; + var colRole = graphData.proxy.columnLabels[position.y]; + var currentRow = tableView.currentRow + if (currentRow === -1 || rowRole !== graphData.model.get(currentRow).year + || colRole !== graphData.model.get(currentRow).month) { + var totalRows = tableView.rowCount; + for (var i = 0; i < totalRows; i++) { + var currentRowRole = graphData.model.get(i).year + var currentColRole = graphData.model.get(i).month + if (currentRowRole === rowRole && currentColRole === colRole) { + tableView.currentRow = i + break + } + } + } + } + } + } + + Button { + id: mappingToggle + anchors.bottom: parent.bottom + width: tableView.width + height: 60 + text: "Show Income" + onClicked: { + if (graphData.mapping.valueRole === "expenses") { + graphData.mapping.valueRole = "income" + text = "Show Expenses" + testGraph.valueAxis = graphAxes.income + } else { + graphData.mapping.valueRole = "expenses" + text = "Show Income" + testGraph.valueAxis = graphAxes.expenses + } + } + } + + Button { + id: shadowToggle + anchors.bottom: mappingToggle.top + width: tableView.width + height: 60 + text: "Hide Shadows" + onClicked: { + if (testGraph.shadowQuality == Bars3D.ShadowQualityNone) { + testGraph.shadowQuality = Bars3D.ShadowQualityMedium; + text = "Hide Shadows" + } else { + testGraph.shadowQuality = Bars3D.ShadowQualityNone; + text = "Show Shadows" + } + } + } + + Button { + id: dataToggle + anchors.bottom: shadowToggle.top + width: tableView.width + height: 60 + text: "Show 2010 - 2012" + onClicked: { + if (testGraph.rowAxis.max !== 6) { + text = "Show 2010 - 2012" + graphData.mapping.autoRowCategories = true + } else { + text = "Show all years" + // Explicitly defining row categories, since we do not want to show data for + // all years in the model, just for the selected ones. + graphData.mapping.autoRowCategories = false + graphData.mapping.rowCategories = ["2010", "2011", "2012"] + } + } + } + + TableView { + id: tableView + x: 0 + y: 0 + width: 298 + height: parent.height - mappingToggle.height - shadowToggle.height - dataToggle.height + TableViewColumn{ role: "year" ; title: "Year" ; width: 80 } + TableViewColumn{ role: "month" ; title: "Month" ; width: 80 } + TableViewColumn{ role: "expenses" ; title: "Expenses" ; width: 60 } + TableViewColumn{ role: "income" ; title: "Income" ; width: 60 } + model: graphData.model + + onCurrentRowChanged: { + var rowIndex = graphData.proxy.activeMapping.rowCategoryIndex(graphData.model.get(currentRow).year) + var colIndex = graphData.proxy.activeMapping.columnCategoryIndex(graphData.model.get(currentRow).month) + testGraph.selectedBarPos = Qt.point(rowIndex, colIndex) + } + } +} |