summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMiikka Heikkinen <miikka.heikkinen@digia.com>2014-05-13 15:02:46 +0300
committerMiikka Heikkinen <miikka.heikkinen@digia.com>2014-05-14 08:15:18 +0300
commita309eb6a29fcdd57f37aef424c30bc13f3fde9b7 (patch)
treeab3b92c4bea622a773612806e9cff62a4ae72623
parent576050ff96cbf67014313bd7c1f2b475b00dd80c (diff)
Add bar combining to qmlbars example
Change-Id: Ie2a566e2ceb4dabcd7a0e2a2f034a49add34f1b8 Reviewed-by: Mika Salmela <mika.salmela@digia.com>
-rw-r--r--examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc34
-rw-r--r--examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml17
-rw-r--r--examples/datavisualization/qmlbars/qml/qmlbars/Data.qml168
-rw-r--r--examples/datavisualization/qmlbars/qml/qmlbars/main.qml101
4 files changed, 181 insertions, 139 deletions
diff --git a/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc b/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc
index f2a0f8b0..4034cdd2 100644
--- a/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc
+++ b/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc
@@ -57,21 +57,33 @@
for those roles to extract the correct portion of the field contents for each role.
The search pattern is a normal JavaScript regular expression and the replace rule specifies
what the field content that matches the regular expression is replaced with.
- In this case we want to replace the entire field content with just the year or the month.
+ In this case we want to replace the entire field content with just the year or the month,
+ which is the first captured substring for both rows and columns.
For more information how the replace using regular expressions works, see
QString::replace(const QRegExp &rx, const QString &after) function documentation.
+ The \c multiMatchBehavior property specifies what to do in case multiple item model items match
+ the same row/column combination. In this case we want to add their values together.
+ This property has no effect when we are showing values for each month, as there are no
+ duplicate months in our item model, but it becomes relevant later when we want to show
+ the yearly totals.
+
Then we add another series for the expenses:
\snippet qmlbars/qml/qmlbars/main.qml 4
\dots
+ The model contains expenses as negative values, but we want to show them as positive bars, so
+ that we can easily compare them to income bars. We use \c valueRolePattern to remove the minus
+ sign to achieve this. No replacement string needs to be specified as the default replacement
+ is an empty string.
+
We use the \c visible property of the series to hide the second series for now.
\section1 Custom axis labels
One interesting tidbit about axes is that we redefine the category labels for column axis in
- \c Axes.qml. This is done because the data contains abbreviated month names, which we don't want
+ \c Axes.qml. This is done because the data contains numbers for months, which we don't want
to use for our column labels:
\snippet qmlbars/qml/qmlbars/Axes.qml 0
@@ -85,15 +97,23 @@
\snippet qmlbars/qml/qmlbars/main.qml 0
- The axis change is done because income and expenses have a different label format. The same could have
- been achieved using a single axis and just changing the label format.
+ The axis label format and item selection label formats are tweaked to get the negative sign
+ showing properly for expenses, which were actually resolved as positive values.
- The second interesting block is where we filter some of the rows away from the visualized data:
+ The second interesting block is where we change the visualized data by adjusting the proxy
+ propertes:
\snippet qmlbars/qml/qmlbars/main.qml 1
- The filtering is done by setting \c autoRowCategories to false on the ItemModelBarDataProxy item and defining
- the row categories explicitly. This way, only the items in specified rows are visualized.
+ To show yearly totals, we need to combine the twelve months of each year into a single bar.
+ We achieve this by specifying a \c columnRolePattern that matches all model items. That way
+ the data proxy will only have a single column. The cumulative \c multiMatchBehavior we
+ specified earlier for the proxy becomes relevant now, causing the values of all twelve months
+ of each year to be added up into a single bar.
+
+ To show just a subset of years, we set \c autoRowCategories to false on the
+ ItemModelBarDataProxy item and define the row categories explicitly. This way, only the items
+ in specified row categories are visualized.
The third interesting block shows how to get the row and column index of an item if you know the
row and column values by using ItemModelBarDataProxy methods \c rowCategoryIndex() and \c columnCategoryIndex():
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]