diff options
Diffstat (limited to 'examples/datavisualization/qmlbars/qml/qmlbars')
3 files changed, 218 insertions, 148 deletions
diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml index 29979e1b..f316eef5 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml @@ -17,15 +17,13 @@ ****************************************************************************/ import QtQuick 2.1 -import QtDataVisualization 1.0 +import QtDataVisualization 1.1 Item { property alias column: columnAxis - property alias expenses: expensesAxis - property alias income: incomeAxis - - // For row labels we can use row labels from data proxy, so default axis - // suffices for rows. + property alias row: rowAxis + property alias value: valueAxis + property alias total: totalAxis // Custom labels for columns, since the data contains abbreviated month names. //! [0] @@ -33,20 +31,26 @@ Item { id: columnAxis labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] + labelAutoRotation: 30 } //! [0] + CategoryAxis3D { + id: totalAxis + labels: ["Yearly total"] + labelAutoRotation: 30 + } + CategoryAxis3D { + // For row labels we can use row labels from data proxy, no labels defined for rows. + id: rowAxis + labelAutoRotation: 30 + } + 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" + labelAutoRotation: 90 } } diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml index 7e0978c6..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{ 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..5172e27d 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 "." @@ -49,15 +49,18 @@ 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 || 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") { @@ -100,45 +103,28 @@ Rectangle { barSpacingRelative: false scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh columnAxis: graphAxes.column - valueAxis: graphAxes.income - - //! [3] - Bar3DSeries { - id: barSeries - itemLabelFormat: "Income for @colLabel, @rowLabel: @valueLabel" - baseGradient: barGradient - - ItemModelBarDataProxy { - id: modelProxy - itemModel: graphData.model - rowRole: "year" - columnRole: "month" - valueRole: "income" - } - //! [3] - - ColorGradient { - id: barGradient - ColorGradientStop { position: 1.0; color: "#00FF00" } - ColorGradientStop { position: 0.0; color: "#006000" } - } - - onSelectedBarChanged: handleSelectionChange(barSeries, position) - } + rowAxis: graphAxes.row + valueAxis: graphAxes.value //! [4] Bar3DSeries { id: secondarySeries visible: false - itemLabelFormat: "Expenses for @colLabel, @rowLabel: @valueLabel" + itemLabelFormat: "Expenses, @colLabel, @rowLabel: -@valueLabel" baseGradient: secondaryGradient ItemModelBarDataProxy { id: secondaryProxy itemModel: graphData.model - rowRole: "year" - columnRole: "month" + rowRole: "timestamp" + columnRole: "timestamp" valueRole: "expenses" + rowRolePattern: /^(\d\d\d\d).*$/ + columnRolePattern: /^.*-(\d\d)$/ + valueRolePattern: /-/ + rowRoleReplace: "\\1" + columnRoleReplace: "\\1" + multiMatchBehavior: ItemModelBarDataProxy.MMBCumulative } //! [4] @@ -150,6 +136,35 @@ Rectangle { onSelectedBarChanged: handleSelectionChange(secondarySeries, position) } + + //! [3] + Bar3DSeries { + id: barSeries + itemLabelFormat: "Income, @colLabel, @rowLabel: @valueLabel" + baseGradient: barGradient + + ItemModelBarDataProxy { + id: modelProxy + itemModel: graphData.model + rowRole: "timestamp" + columnRole: "timestamp" + valueRole: "income" + rowRolePattern: /^(\d\d\d\d).*$/ + columnRolePattern: /^.*-(\d\d)$/ + rowRoleReplace: "\\1" + columnRoleReplace: "\\1" + multiMatchBehavior: ItemModelBarDataProxy.MMBCumulative + } + //! [3] + + ColorGradient { + id: barGradient + ColorGradientStop { position: 1.0; color: "#00FF00" } + ColorGradientStop { position: 0.0; color: "#006000" } + } + + onSelectedBarChanged: handleSelectionChange(barSeries, position) + } } } @@ -157,16 +172,53 @@ 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 { + id: delegateText + 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: customText + horizontalAlignment: styleData.textAlignment + + property string originalText: styleData.value + property string customText + + onOriginalTextChanged: { + if (styleData.column === 0) { + if (delegateText.originalText !== "") { + var pattern = /(\d\d\d\d)-(\d\d)/ + var matches = pattern.exec(delegateText.originalText) + var colIndex = parseInt(matches[2], 10) - 1 + delegateText.customText = matches[1] + " - " + graphAxes.column.labels[colIndex] + } + } else { + delegateText.customText = originalText + } + } + } + } + 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 + 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) @@ -182,25 +234,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] @@ -232,19 +297,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] |