From a309eb6a29fcdd57f37aef424c30bc13f3fde9b7 Mon Sep 17 00:00:00 2001 From: Miikka Heikkinen Date: Tue, 13 May 2014 15:02:46 +0300 Subject: Add bar combining to qmlbars example Change-Id: Ie2a566e2ceb4dabcd7a0e2a2f034a49add34f1b8 Reviewed-by: Mika Salmela --- .../datavisualization/qmlbars/qml/qmlbars/main.qml | 101 +++++++++++++-------- 1 file changed, 63 insertions(+), 38 deletions(-) (limited to 'examples/datavisualization/qmlbars/qml/qmlbars/main.qml') 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] -- cgit v1.2.3