diff options
Diffstat (limited to 'examples')
3 files changed, 144 insertions, 102 deletions
diff --git a/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc b/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc index d3da5e6a..f2a0f8b0 100644 --- a/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc +++ b/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc @@ -39,9 +39,9 @@ \snippet qmlbars/qml/qmlbars/Data.qml 0 \dots - Each data item has four roles: year, month, income, and expenses. Years and months are natural to - map to rows and columns of a bar chart, but we can only show either income or expenses as the - value. + Each data item has three roles: timestamp, income, and expenses. The timestamp value is in + format: \c{<four digit year>-<two digit month>}. Years and months are natural to map to rows and + columns of a bar chart, but we can only show either income or expenses as the value. Now we need to add the data to the Bars3D graph. We will create two Bar3DSeries inside it, starting with a series for the income: @@ -50,7 +50,16 @@ \dots The data is attached to the \c itemModel property of the ItemModelBarDataProxy inside the - series. + series. For \c valueRole we simply specify the \c income field, as it contains the value we + want, but getting the years and months is a bit more complicated, since they are both found + in the same field. To extract those values, we specify the \c timestamp field for both + \c rowRole and \c columnRole, and additionally specify a search pattern and a replace rule + 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. + For more information how the replace using regular expressions works, see + QString::replace(const QRegExp &rx, const QString &after) function documentation. Then we add another series for the expenses: diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml index 7e0978c6..6922ef17 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{ 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{ 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{ 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{ 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{ 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{ 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{ 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{ 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{ 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{ 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{ 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{ 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{ 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{ 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{ 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" } + 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 0df8d8ae..2bb5e376 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml @@ -19,7 +19,7 @@ import QtQuick 2.1 import QtQuick.Controls 1.0 import QtQuick.Layouts 1.0 -import QtDataVisualization 1.0 +import QtDataVisualization 1.1 import QtQuick.Window 2.0 import "." @@ -50,14 +50,13 @@ Rectangle { // Set tableView current row to selected bar var rowRole = series.dataProxy.rowLabels[position.x]; var colRole = series.dataProxy.columnLabels[position.y]; + var checkTimestamp = rowRole + "-" + colRole var currentRow = tableView.currentRow - if (currentRow === -1 || rowRole !== graphData.model.get(currentRow).year - || colRole !== graphData.model.get(currentRow).month) { + if (currentRow === -1 || checkTimestamp !== graphData.model.get(currentRow).timestamp) { 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) { + var modelTimestamp = graphData.model.get(i).timestamp + if (modelTimestamp === checkTimestamp) { tableView.currentRow = i // Workaround to 5.2 row selection issue if (typeof tableView.selection != "undefined") { @@ -111,9 +110,13 @@ Rectangle { ItemModelBarDataProxy { id: modelProxy itemModel: graphData.model - rowRole: "year" - columnRole: "month" + rowRole: "timestamp" + columnRole: "timestamp" valueRole: "income" + rowRolePattern: /^(\d\d\d\d).*$/ + columnRolePattern: /^.*-(\d\d)$/ + rowRoleReplace: "\\1" + columnRoleReplace: "\\1" } //! [3] @@ -136,9 +139,13 @@ Rectangle { ItemModelBarDataProxy { id: secondaryProxy itemModel: graphData.model - rowRole: "year" - columnRole: "month" + rowRole: "timestamp" + columnRole: "timestamp" valueRole: "expenses" + rowRolePattern: /^(\d\d\d\d).*$/ + columnRolePattern: /^.*-(\d\d)$/ + rowRoleReplace: "\\1" + columnRoleReplace: "\\1" } //! [4] @@ -157,16 +164,42 @@ Rectangle { id: tableView anchors.top: parent.top anchors.left: parent.left - TableViewColumn{ role: "year" ; title: "Year" ; width: tableView.width / 4 } - TableViewColumn{ role: "month" ; title: "Month" ; width: tableView.width / 4 } + TableViewColumn{ role: "timestamp" ; title: "Month" ; width: tableView.width / 2 } TableViewColumn{ role: "expenses" ; title: "Expenses" ; width: tableView.width / 4 } TableViewColumn{ role: "income" ; title: "Income" ; width: tableView.width / 4 } + itemDelegate: Item { + Text { + anchors.verticalCenter: parent.verticalCenter + width: parent.width + anchors.leftMargin: 4 + anchors.left: parent.left + anchors.right: parent.right + color: styleData.textColor + elide: styleData.elideMode + text: styleData.value + horizontalAlignment: styleData.textAlignment + + Component.onCompleted: { + if (styleData.column === 0) { + 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] + + } + } + } + } + model: graphData.model //! [2] onCurrentRowChanged: { - var rowIndex = modelProxy.rowCategoryIndex(graphData.model.get(currentRow).year) - var colIndex = modelProxy.columnCategoryIndex(graphData.model.get(currentRow).month) + var timestamp = graphData.model.get(currentRow).timestamp + 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]) if (selectedSeries.visible) mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex) else if (barSeries.visible) |