diff options
Diffstat (limited to 'examples/datavisualization/qmlbars/qml')
3 files changed, 154 insertions, 132 deletions
diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml index 29979e1b..a8257995 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml @@ -21,8 +21,8 @@ import QtDataVisualization 1.0 Item { property alias column: columnAxis - property alias expenses: expensesAxis - property alias income: incomeAxis + property alias value: valueAxis + property alias total: totalAxis // For row labels we can use row labels from data proxy, so default axis // suffices for rows. @@ -35,18 +35,15 @@ Item { "July", "August", "September", "October", "November", "December"] } //! [0] + CategoryAxis3D { + id: totalAxis + labels: ["Yearly total"] + } ValueAxis3D { - id: incomeAxis + id: valueAxis 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/datavisualization/qmlbars/qml/qmlbars/Data.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml index 6922ef17..dcb89dbf 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml @@ -24,96 +24,96 @@ Item { //! [0] ListModel { id: dataModel - ListElement{ timestamp: "2006-01"; expenses: "4"; income: "5" } - ListElement{ timestamp: "2006-02"; expenses: "5"; income: "6" } - ListElement{ timestamp: "2006-03"; expenses: "7"; income: "4" } + ListElement{ timestamp: "2006-01"; expenses: "-4"; income: "5" } + ListElement{ timestamp: "2006-02"; expenses: "-5"; income: "6" } + ListElement{ timestamp: "2006-03"; expenses: "-7"; income: "4" } //! [0] - ListElement{ timestamp: "2006-04"; expenses: "3"; income: "2" } - ListElement{ timestamp: "2006-05"; expenses: "4"; income: "1" } - ListElement{ timestamp: "2006-06"; expenses: "2"; income: "2" } - ListElement{ timestamp: "2006-07"; expenses: "1"; income: "3" } - ListElement{ timestamp: "2006-08"; expenses: "5"; income: "1" } - ListElement{ timestamp: "2006-09"; expenses: "2"; income: "3" } - ListElement{ timestamp: "2006-10"; expenses: "5"; income: "2" } - ListElement{ timestamp: "2006-11"; expenses: "8"; income: "5" } - ListElement{ timestamp: "2006-12"; expenses: "3"; income: "3" } + ListElement{ timestamp: "2006-04"; expenses: "-3"; income: "2" } + ListElement{ timestamp: "2006-05"; expenses: "-4"; income: "1" } + ListElement{ timestamp: "2006-06"; expenses: "-2"; income: "2" } + ListElement{ timestamp: "2006-07"; expenses: "-1"; income: "3" } + ListElement{ timestamp: "2006-08"; expenses: "-5"; income: "1" } + ListElement{ timestamp: "2006-09"; expenses: "-2"; income: "3" } + ListElement{ timestamp: "2006-10"; expenses: "-5"; income: "2" } + ListElement{ timestamp: "2006-11"; expenses: "-8"; income: "5" } + ListElement{ timestamp: "2006-12"; expenses: "-3"; income: "3" } - ListElement{ timestamp: "2007-01"; expenses: "3"; income: "1" } - ListElement{ timestamp: "2007-02"; expenses: "4"; income: "2" } - ListElement{ timestamp: "2007-03"; expenses: "12"; income: "4" } - ListElement{ timestamp: "2007-04"; expenses: "13"; income: "6" } - ListElement{ timestamp: "2007-05"; expenses: "14"; income: "11" } - ListElement{ timestamp: "2007-06"; expenses: "7"; income: "7" } - ListElement{ timestamp: "2007-07"; expenses: "6"; income: "4" } - ListElement{ timestamp: "2007-08"; expenses: "4"; income: "15" } - ListElement{ timestamp: "2007-09"; expenses: "2"; income: "18" } - ListElement{ timestamp: "2007-10"; expenses: "29"; income: "25" } - ListElement{ timestamp: "2007-11"; expenses: "23"; income: "29" } - ListElement{ timestamp: "2007-12"; expenses: "5"; income: "9" } + ListElement{ timestamp: "2007-01"; expenses: "-3"; income: "1" } + ListElement{ timestamp: "2007-02"; expenses: "-4"; income: "2" } + ListElement{ timestamp: "2007-03"; expenses: "-12"; income: "4" } + ListElement{ timestamp: "2007-04"; expenses: "-13"; income: "6" } + ListElement{ timestamp: "2007-05"; expenses: "-14"; income: "11" } + ListElement{ timestamp: "2007-06"; expenses: "-7"; income: "7" } + ListElement{ timestamp: "2007-07"; expenses: "-6"; income: "4" } + ListElement{ timestamp: "2007-08"; expenses: "-4"; income: "15" } + ListElement{ timestamp: "2007-09"; expenses: "-2"; income: "18" } + ListElement{ timestamp: "2007-10"; expenses: "-29"; income: "25" } + ListElement{ timestamp: "2007-11"; expenses: "-23"; income: "29" } + ListElement{ timestamp: "2007-12"; expenses: "-5"; income: "9" } - ListElement{ timestamp: "2008-01"; expenses: "3"; income: "8" } - ListElement{ timestamp: "2008-02"; expenses: "8"; income: "14" } - ListElement{ timestamp: "2008-03"; expenses: "10"; income: "20" } - ListElement{ timestamp: "2008-04"; expenses: "12"; income: "24" } - ListElement{ timestamp: "2008-05"; expenses: "10"; income: "19" } - ListElement{ timestamp: "2008-06"; expenses: "5"; income: "8" } - ListElement{ timestamp: "2008-07"; expenses: "1"; income: "4" } - ListElement{ timestamp: "2008-08"; expenses: "7"; income: "12" } - ListElement{ timestamp: "2008-09"; expenses: "4"; income: "16" } - ListElement{ timestamp: "2008-10"; expenses: "22"; income: "33" } - ListElement{ timestamp: "2008-11"; expenses: "16"; income: "25" } - ListElement{ timestamp: "2008-12"; expenses: "2"; income: "7" } + ListElement{ timestamp: "2008-01"; expenses: "-3"; income: "8" } + ListElement{ timestamp: "2008-02"; expenses: "-8"; income: "14" } + ListElement{ timestamp: "2008-03"; expenses: "-10"; income: "20" } + ListElement{ timestamp: "2008-04"; expenses: "-12"; income: "24" } + ListElement{ timestamp: "2008-05"; expenses: "-10"; income: "19" } + ListElement{ timestamp: "2008-06"; expenses: "-5"; income: "8" } + ListElement{ timestamp: "2008-07"; expenses: "-1"; income: "4" } + ListElement{ timestamp: "2008-08"; expenses: "-7"; income: "12" } + ListElement{ timestamp: "2008-09"; expenses: "-4"; income: "16" } + ListElement{ timestamp: "2008-10"; expenses: "-22"; income: "33" } + ListElement{ timestamp: "2008-11"; expenses: "-16"; income: "25" } + ListElement{ timestamp: "2008-12"; expenses: "-2"; income: "7" } - ListElement{ timestamp: "2009-01"; expenses: "4"; income: "5" } - ListElement{ timestamp: "2009-02"; expenses: "4"; income: "7" } - ListElement{ timestamp: "2009-03"; expenses: "11"; income: "14" } - ListElement{ timestamp: "2009-04"; expenses: "16"; income: "22" } - ListElement{ timestamp: "2009-05"; expenses: "3"; income: "5" } - ListElement{ timestamp: "2009-06"; expenses: "4"; income: "8" } - ListElement{ timestamp: "2009-07"; expenses: "7"; income: "9" } - ListElement{ timestamp: "2009-08"; expenses: "9"; income: "13" } - ListElement{ timestamp: "2009-09"; expenses: "1"; income: "6" } - ListElement{ timestamp: "2009-10"; expenses: "14"; income: "25" } - ListElement{ timestamp: "2009-11"; expenses: "19"; income: "29" } - ListElement{ timestamp: "2009-12"; expenses: "5"; income: "7" } + ListElement{ timestamp: "2009-01"; expenses: "-4"; income: "5" } + ListElement{ timestamp: "2009-02"; expenses: "-4"; income: "7" } + ListElement{ timestamp: "2009-03"; expenses: "-11"; income: "14" } + ListElement{ timestamp: "2009-04"; expenses: "-16"; income: "22" } + ListElement{ timestamp: "2009-05"; expenses: "-3"; income: "5" } + ListElement{ timestamp: "2009-06"; expenses: "-4"; income: "8" } + ListElement{ timestamp: "2009-07"; expenses: "-7"; income: "9" } + ListElement{ timestamp: "2009-08"; expenses: "-9"; income: "13" } + ListElement{ timestamp: "2009-09"; expenses: "-1"; income: "6" } + ListElement{ timestamp: "2009-10"; expenses: "-14"; income: "25" } + ListElement{ timestamp: "2009-11"; expenses: "-19"; income: "29" } + ListElement{ timestamp: "2009-12"; expenses: "-5"; income: "7" } - ListElement{ timestamp: "2010-01"; expenses: "14"; income: "22" } - ListElement{ timestamp: "2010-02"; expenses: "5"; income: "7" } - ListElement{ timestamp: "2010-03"; expenses: "1"; income: "9" } - ListElement{ timestamp: "2010-04"; expenses: "1"; income: "12" } - ListElement{ timestamp: "2010-05"; expenses: "5"; income: "9" } - ListElement{ timestamp: "2010-06"; expenses: "5"; income: "8" } - ListElement{ timestamp: "2010-07"; expenses: "3"; income: "7" } - ListElement{ timestamp: "2010-08"; expenses: "1"; income: "5" } - ListElement{ timestamp: "2010-09"; expenses: "2"; income: "4" } - ListElement{ timestamp: "2010-10"; expenses: "10"; income: "13" } - ListElement{ timestamp: "2010-11"; expenses: "12"; income: "17" } - ListElement{ timestamp: "2010-12"; expenses: "6"; income: "9" } + ListElement{ timestamp: "2010-01"; expenses: "-14"; income: "22" } + ListElement{ timestamp: "2010-02"; expenses: "-5"; income: "7" } + ListElement{ timestamp: "2010-03"; expenses: "-1"; income: "9" } + ListElement{ timestamp: "2010-04"; expenses: "-1"; income: "12" } + ListElement{ timestamp: "2010-05"; expenses: "-5"; income: "9" } + ListElement{ timestamp: "2010-06"; expenses: "-5"; income: "8" } + ListElement{ timestamp: "2010-07"; expenses: "-3"; income: "7" } + ListElement{ timestamp: "2010-08"; expenses: "-1"; income: "5" } + ListElement{ timestamp: "2010-09"; expenses: "-2"; income: "4" } + ListElement{ timestamp: "2010-10"; expenses: "-10"; income: "13" } + ListElement{ timestamp: "2010-11"; expenses: "-12"; income: "17" } + ListElement{ timestamp: "2010-12"; expenses: "-6"; income: "9" } - ListElement{ timestamp: "2011-01"; expenses: "2"; income: "6" } - ListElement{ timestamp: "2011-02"; expenses: "4"; income: "8" } - ListElement{ timestamp: "2011-03"; expenses: "7"; income: "12" } - ListElement{ timestamp: "2011-04"; expenses: "9"; income: "15" } - ListElement{ timestamp: "2011-05"; expenses: "7"; income: "19" } - ListElement{ timestamp: "2011-06"; expenses: "9"; income: "18" } - ListElement{ timestamp: "2011-07"; expenses: "13"; income: "17" } - ListElement{ timestamp: "2011-08"; expenses: "5"; income: "9" } - ListElement{ timestamp: "2011-09"; expenses: "3"; income: "8" } - ListElement{ timestamp: "2011-10"; expenses: "13"; income: "15" } - ListElement{ timestamp: "2011-11"; expenses: "8"; income: "17" } - ListElement{ timestamp: "2011-12"; expenses: "7"; income: "10" } + ListElement{ timestamp: "2011-01"; expenses: "-2"; income: "6" } + ListElement{ timestamp: "2011-02"; expenses: "-4"; income: "8" } + ListElement{ timestamp: "2011-03"; expenses: "-7"; income: "12" } + ListElement{ timestamp: "2011-04"; expenses: "-9"; income: "15" } + ListElement{ timestamp: "2011-05"; expenses: "-7"; income: "19" } + ListElement{ timestamp: "2011-06"; expenses: "-9"; income: "18" } + ListElement{ timestamp: "2011-07"; expenses: "-13"; income: "17" } + ListElement{ timestamp: "2011-08"; expenses: "-5"; income: "9" } + ListElement{ timestamp: "2011-09"; expenses: "-3"; income: "8" } + ListElement{ timestamp: "2011-10"; expenses: "-13"; income: "15" } + ListElement{ timestamp: "2011-11"; expenses: "-8"; income: "17" } + ListElement{ timestamp: "2011-12"; expenses: "-7"; income: "10" } - ListElement{ timestamp: "2012-01"; expenses: "12"; income: "16" } - ListElement{ timestamp: "2012-02"; expenses: "24"; income: "28" } - ListElement{ timestamp: "2012-03"; expenses: "27"; income: "22" } - ListElement{ timestamp: "2012-04"; expenses: "29"; income: "25" } - ListElement{ timestamp: "2012-05"; expenses: "27"; income: "29" } - ListElement{ timestamp: "2012-06"; expenses: "19"; income: "18" } - ListElement{ timestamp: "2012-07"; expenses: "13"; income: "17" } - ListElement{ timestamp: "2012-08"; expenses: "15"; income: "19" } - ListElement{ timestamp: "2012-09"; expenses: "3"; income: "8" } - ListElement{ timestamp: "2012-10"; expenses: "3"; income: "6" } - ListElement{ timestamp: "2012-11"; expenses: "4"; income: "8" } - ListElement{ timestamp: "2012-12"; expenses: "5"; income: "9" } + ListElement{ timestamp: "2012-01"; expenses: "-12"; income: "16" } + ListElement{ timestamp: "2012-02"; expenses: "-24"; income: "28" } + ListElement{ timestamp: "2012-03"; expenses: "-27"; income: "22" } + ListElement{ timestamp: "2012-04"; expenses: "-29"; income: "25" } + ListElement{ timestamp: "2012-05"; expenses: "-27"; income: "29" } + ListElement{ timestamp: "2012-06"; expenses: "-19"; income: "18" } + ListElement{ timestamp: "2012-07"; expenses: "-13"; income: "17" } + ListElement{ timestamp: "2012-08"; expenses: "-15"; income: "19" } + ListElement{ timestamp: "2012-09"; expenses: "-3"; income: "8" } + ListElement{ timestamp: "2012-10"; expenses: "-3"; income: "6" } + ListElement{ timestamp: "2012-11"; expenses: "-4"; income: "8" } + ListElement{ timestamp: "2012-12"; expenses: "-5"; income: "9" } } } diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml index 2bb5e376..cc15dd50 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml @@ -49,7 +49,11 @@ Rectangle { // Set tableView current row to selected bar var rowRole = series.dataProxy.rowLabels[position.x]; - var colRole = series.dataProxy.columnLabels[position.y]; + var colRole + if (barGraph.columnAxis === graphAxes.total) + colRole = "01"; + else + colRole = series.dataProxy.columnLabels[position.y]; var checkTimestamp = rowRole + "-" + colRole var currentRow = tableView.currentRow if (currentRow === -1 || checkTimestamp !== graphData.model.get(currentRow).timestamp) { @@ -99,63 +103,66 @@ Rectangle { barSpacingRelative: false scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh columnAxis: graphAxes.column - valueAxis: graphAxes.income + valueAxis: graphAxes.value - //! [3] + //! [4] Bar3DSeries { - id: barSeries - itemLabelFormat: "Income for @colLabel, @rowLabel: @valueLabel" - baseGradient: barGradient + id: secondarySeries + visible: false + itemLabelFormat: "Expenses, @colLabel, @rowLabel: -@valueLabel" + baseGradient: secondaryGradient ItemModelBarDataProxy { - id: modelProxy + id: secondaryProxy itemModel: graphData.model rowRole: "timestamp" columnRole: "timestamp" - valueRole: "income" + valueRole: "expenses" rowRolePattern: /^(\d\d\d\d).*$/ columnRolePattern: /^.*-(\d\d)$/ + valueRolePattern: /-/ rowRoleReplace: "\\1" columnRoleReplace: "\\1" + multiMatchBehavior: ItemModelBarDataProxy.MMBCumulative } - //! [3] + //! [4] ColorGradient { - id: barGradient - ColorGradientStop { position: 1.0; color: "#00FF00" } - ColorGradientStop { position: 0.0; color: "#006000" } + id: secondaryGradient + ColorGradientStop { position: 1.0; color: "#FF0000" } + ColorGradientStop { position: 0.0; color: "#600000" } } - onSelectedBarChanged: handleSelectionChange(barSeries, position) + onSelectedBarChanged: handleSelectionChange(secondarySeries, position) } - //! [4] + //! [3] Bar3DSeries { - id: secondarySeries - visible: false - itemLabelFormat: "Expenses for @colLabel, @rowLabel: @valueLabel" - baseGradient: secondaryGradient + id: barSeries + itemLabelFormat: "Income, @colLabel, @rowLabel: @valueLabel" + baseGradient: barGradient ItemModelBarDataProxy { - id: secondaryProxy + id: modelProxy itemModel: graphData.model rowRole: "timestamp" columnRole: "timestamp" - valueRole: "expenses" + valueRole: "income" rowRolePattern: /^(\d\d\d\d).*$/ columnRolePattern: /^.*-(\d\d)$/ rowRoleReplace: "\\1" columnRoleReplace: "\\1" + multiMatchBehavior: ItemModelBarDataProxy.MMBCumulative } - //! [4] + //! [3] ColorGradient { - id: secondaryGradient - ColorGradientStop { position: 1.0; color: "#FF0000" } - ColorGradientStop { position: 0.0; color: "#600000" } + id: barGradient + ColorGradientStop { position: 1.0; color: "#00FF00" } + ColorGradientStop { position: 0.0; color: "#006000" } } - onSelectedBarChanged: handleSelectionChange(secondarySeries, position) + onSelectedBarChanged: handleSelectionChange(barSeries, position) } } } @@ -184,7 +191,7 @@ Rectangle { var pattern = /(\d\d\d\d)-(\d\d)/ var matches = pattern.exec(styleData.value) var colIndex = parseInt(matches[2], 10) - 1 - text = matches[1] + " - " + barGraph.columnAxis.labels[colIndex] + text = matches[1] + " - " + graphAxes.column.labels[colIndex] } } @@ -199,7 +206,11 @@ Rectangle { var pattern = /(\d\d\d\d)-(\d\d)/ var matches = pattern.exec(timestamp) var rowIndex = modelProxy.rowCategoryIndex(matches[1]) - var colIndex = modelProxy.columnCategoryIndex(matches[2]) + var colIndex + if (barGraph.columnAxis === graphAxes.total) + colIndex = 0 // Just one column when showing yearly totals + else + colIndex = modelProxy.columnCategoryIndex(matches[2]) if (selectedSeries.visible) mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex) else if (barSeries.visible) @@ -215,25 +226,38 @@ Rectangle { spacing: 0 Button { - id: dataToggle + id: changeDataButton Layout.fillWidth: true Layout.fillHeight: true text: "Show 2010 - 2012" clip: true //! [1] onClicked: { - if (barGraph.rowAxis.max !== 6) { - text = "Show 2010 - 2012" + if (text === "Show yearly totals") { modelProxy.autoRowCategories = true secondaryProxy.autoRowCategories = true - } else { + modelProxy.columnRolePattern = /^.*$/ + secondaryProxy.columnRolePattern = /^.*$/ + graphAxes.value.autoAdjustRange = true + barGraph.columnAxis = graphAxes.total text = "Show all years" + } else if (text === "Show all years") { + modelProxy.autoRowCategories = true + secondaryProxy.autoRowCategories = true + modelProxy.columnRolePattern = /^.*-(\d\d)$/ + secondaryProxy.columnRolePattern = /^.*-(\d\d)$/ + graphAxes.value.min = 0 + graphAxes.value.max = 35 + barGraph.columnAxis = graphAxes.column + text = "Show 2010 - 2012" + } else { // text === "Show 2010 - 2012" // Explicitly defining row categories, since we do not want to show data for // all years in the model, just for the selected ones. modelProxy.autoRowCategories = false secondaryProxy.autoRowCategories = false modelProxy.rowCategories = ["2010", "2011", "2012"] secondaryProxy.rowCategories = ["2010", "2011", "2012"] + text = "Show yearly totals" } } //! [1] @@ -265,19 +289,20 @@ Rectangle { clip: true //! [0] onClicked: { - if (!secondarySeries.visible) { - text = "Show Both" - barGraph.valueAxis = graphAxes.expenses + if (text === "Show Expenses") { barSeries.visible = false secondarySeries.visible = true - } else if (!barSeries.visible){ + barGraph.valueAxis.labelFormat = "-%.2f M\u20AC" + secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: @valueLabel" + text = "Show Both" + } else if (text === "Show Both") { barSeries.visible = true + barGraph.valueAxis.labelFormat = "%.2f M\u20AC" + secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: -@valueLabel" text = "Show Income" - barGraph.valueAxis = graphAxes.income - } else { + } else { // text === "Show Income" secondarySeries.visible = false text = "Show Expenses" - barGraph.valueAxis = graphAxes.income } } //! [0] |