diff options
Diffstat (limited to 'examples/qmlbarchart/qml/qmlbarchart/main.qml')
| -rw-r--r-- | examples/qmlbarchart/qml/qmlbarchart/main.qml | 246 |
1 files changed, 165 insertions, 81 deletions
diff --git a/examples/qmlbarchart/qml/qmlbarchart/main.qml b/examples/qmlbarchart/qml/qmlbarchart/main.qml index 990c78e6..f10f98b9 100644 --- a/examples/qmlbarchart/qml/qmlbarchart/main.qml +++ b/examples/qmlbarchart/qml/qmlbarchart/main.qml @@ -6,116 +6,200 @@ ** ** This file is part of the QtDataVis3D module. ** -** $QT_BEGIN_LICENSE$ -** Licensees holding valid Qt Commercial licenses may use this file in -** accordance with the Qt Commercial License Agreement provided with the +** 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 -** $QT_END_LICENSE$ ** ****************************************************************************/ -import QtQuick 2.0 +import QtQuick 2.1 import QtQuick.Window 2.1 +import QtQuick.Controls 1.0 import com.digia.QtDataVis3D 1.0 Item { id: mainview - //title: "My MainWindow" - width: 640 - height: 480 + width: 800 + height: 600 visible: true - Bars3D { - id: testchart - width: mainview.width - height: mainview.height + Item { + id: dataView + width: parent.width - tableView.width + height: parent.height + anchors.right: parent.right; - DataItem { - id: testitem - label: "Test" - value: 10 + BarDataMapping { + id: valueMapping + rowRole: "year" + columnRole: "month" + valueRole: "expenses" + rowCategories: ["2000", "2001", "2002", "2003", "2004"] + columnCategories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] } - DataItem { - id: testitem2 - label: "Test2" - value: -10 - } - DataItem { - id: testitem3 - label: "Test3" - value: 5 + + ListModel { + id: dataModel + ListElement{ year: "2000"; month: "Jan"; expenses: "3"; income: "8" } + ListElement{ year: "2000"; month: "Feb"; expenses: "8"; income: "14" } + ListElement{ year: "2000"; month: "Mar"; expenses: "10"; income: "20" } + ListElement{ year: "2000"; month: "Apr"; expenses: "12"; income: "24" } + ListElement{ year: "2000"; month: "May"; expenses: "10"; income: "19" } + ListElement{ year: "2000"; month: "Jun"; expenses: "5"; income: "8" } + ListElement{ year: "2000"; month: "Jul"; expenses: "1"; income: "4" } + ListElement{ year: "2000"; month: "Aug"; expenses: "7"; income: "12" } + ListElement{ year: "2000"; month: "Sep"; expenses: "4"; income: "16" } + ListElement{ year: "2000"; month: "Oct"; expenses: "22"; income: "33" } + ListElement{ year: "2000"; month: "Nov"; expenses: "16"; income: "25" } + ListElement{ year: "2000"; month: "Dec"; expenses: "2"; income: "7" } + + ListElement{ year: "2001"; month: "Jan"; expenses: "4"; income: "5" } + ListElement{ year: "2001"; month: "Feb"; expenses: "4"; income: "7" } + ListElement{ year: "2001"; month: "Mar"; expenses: "11"; income: "14" } + ListElement{ year: "2001"; month: "Apr"; expenses: "16"; income: "22" } + ListElement{ year: "2001"; month: "May"; expenses: "3"; income: "5" } + ListElement{ year: "2001"; month: "Jun"; expenses: "4"; income: "8" } + ListElement{ year: "2001"; month: "Jul"; expenses: "7"; income: "9" } + ListElement{ year: "2001"; month: "Aug"; expenses: "9"; income: "13" } + ListElement{ year: "2001"; month: "Sep"; expenses: "1"; income: "6" } + ListElement{ year: "2001"; month: "Oct"; expenses: "14"; income: "25" } + ListElement{ year: "2001"; month: "Nov"; expenses: "19"; income: "29" } + ListElement{ year: "2001"; month: "Dec"; expenses: "5"; income: "7" } + + ListElement{ year: "2002"; month: "Jan"; expenses: "14"; income: "22" } + ListElement{ year: "2002"; month: "Feb"; expenses: "5"; income: "7" } + ListElement{ year: "2002"; month: "Mar"; expenses: "1"; income: "9" } + ListElement{ year: "2002"; month: "Apr"; expenses: "1"; income: "12" } + ListElement{ year: "2002"; month: "May"; expenses: "5"; income: "9" } + ListElement{ year: "2002"; month: "Jun"; expenses: "5"; income: "8" } + ListElement{ year: "2002"; month: "Jul"; expenses: "3"; income: "7" } + ListElement{ year: "2002"; month: "Aug"; expenses: "1"; income: "5" } + ListElement{ year: "2002"; month: "Sep"; expenses: "2"; income: "4" } + ListElement{ year: "2002"; month: "Oct"; expenses: "10"; income: "13" } + ListElement{ year: "2002"; month: "Nov"; expenses: "12"; income: "17" } + ListElement{ year: "2002"; month: "Dec"; expenses: "6"; income: "9" } + + ListElement{ year: "2003"; month: "Jan"; expenses: "2"; income: "6" } + ListElement{ year: "2003"; month: "Feb"; expenses: "4"; income: "8" } + ListElement{ year: "2003"; month: "Mar"; expenses: "7"; income: "12" } + ListElement{ year: "2003"; month: "Apr"; expenses: "9"; income: "15" } + // rest of 2003 missing on purpose, as well as whole of 2004 } - DataItem { - id: testitem4 - label: "Test4" - value: -7 + CategoryAxis { + id: rowAxis + categoryLabels: ["2000", "2001", "2002", "2003", "2004"] } - DataItem { - id: testitem5 - label: "Test5" - value: 8 + CategoryAxis { + id: columnAxis + categoryLabels: ["January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December"] } - DataItem { - id: testitem6 - label: "Test6" - value: 1 + ValueAxis { + id: valueAxis + min: 0 + max: 35 + labelFormat: "M\u20AC" } + Bars3D { + id: testchart + width: dataView.width + height: dataView.height + gridVisible: true + shadowQuality: Bars3D.ShadowNone + selectionMode: Bars3D.ModeItem + labelTransparency: Bars3D.TransparencyNone + rows: 5 + columns: 12 + mapping: valueMapping + barThickness: Qt.size(0.5, 1.0) + barSpacing: Qt.size(0.5, 0.5) + barSpacingRelative: false + barType: Bars3D.BevelBars + axisX: rowAxis + axisY: valueAxis + axisZ: columnAxis + } + } - DataRow { - id: testrow1 - function addData() { - testrow1.addItem(testitem); - testrow1.addItem(testitem2); - testrow1.addItem(testitem3); - testrow1.addItem(testitem4); - testrow1.addItem(testitem5); - testrow1.addItem(testitem6); - } + Component.onCompleted: { + testchart.data = dataModel + } + + TableView { + id: tableView + x: 0 + y: 0 + width: 270 + height: 500 + TableViewColumn{ role: "year" ; title: "Year" ; width: 40 } + TableViewColumn{ role: "month" ; title: "Month" ; width: 80 } + TableViewColumn{ role: "expenses" ; title: "Expenses" ; width: 70 } + TableViewColumn{ role: "income" ; title: "Income" ; width: 60 } + model: dataModel + } + + Rectangle { + id: shadowToggle + color: "#FFFFFF" + x: 0 + y: tableView.height + width: tableView.width + height: 50 + + TextArea { + id: shadowButtonText + text: "Toggle Shadows" + anchors.fill: parent + textColor: "#000000" } - //visible: true - //x: mainview.x + mainview.width - //y: mainview.y - - grid: false - shadowQuality: Bars3D.ShadowNone - selectionMode: Bars3D.ModeNone - labelTransparency: Bars3D.TransparencyNone - - function setUpBars3D() { - /*console.log(parent) - console.log(container.x) - console.log(container.y) - console.log(Window.x) - console.log(Window.y) - console.log(Screen.desktopAvailableHeight) - console.log(Screen.desktopAvailableWidth) - console.log(mainview.x) - console.log(mainview.y) - console.log(x) - console.log(y)*/ - testchart.setupSampleSpace(6, 1); - testchart.addDataRow(testrow1); + MouseArea { + anchors.fill: parent + onClicked: { + if (testchart.shadowQuality == Bars3D.ShadowNone) { + testchart.shadowQuality = Bars3D.ShadowLow; + shadowButtonText.textColor = "#FFFFFF"; + shadowToggle.color = "#000000"; + } else { + testchart.shadowQuality = Bars3D.ShadowNone; + shadowButtonText.textColor = "#000000"; + shadowToggle.color = "#FFFFFF"; + } + } } } + Rectangle { + id: mappingToggle + color: "#FFFFFF" + x: 0 + y: shadowToggle.height + shadowToggle.y + width: shadowToggle.width + height: 50 - MouseArea { - anchors.fill: parent - onClicked: { - Qt.quit(); + TextArea { + id: mappingButtonText + text: "Show Income" + anchors.fill: parent + textColor: "#000000" } - } - Component.onCompleted: { - // This allows us to flip the texture to be displayed correctly in scene graph - // TODO: Find a way to do it in code.. - //rotation.angle = 180 - testrow1.addData(); - testchart.setUpBars3D(); + MouseArea { + anchors.fill: parent + onClicked: { + if (valueMapping.valueRole == "expenses") { + valueMapping.valueRole = "income" + mappingButtonText.text = "Show Expenses" + } else { + valueMapping.valueRole = "expenses" + mappingButtonText.text = "Show Income" + } + } + } } } |