diff options
Diffstat (limited to 'examples/charts/qmlcustomlegend')
9 files changed, 592 insertions, 0 deletions
diff --git a/examples/charts/qmlcustomlegend/main.cpp b/examples/charts/qmlcustomlegend/main.cpp new file mode 100644 index 00000000..82cda036 --- /dev/null +++ b/examples/charts/qmlcustomlegend/main.cpp @@ -0,0 +1,49 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the Qt Enterprise Charts Add-on. +** +** $QT_BEGIN_LICENSE$ +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include <QtWidgets/QApplication> +#include <QtQuick/QQuickView> +#include <QtCore/QDir> +#include <QtQml/QQmlEngine> + +int main(int argc, char *argv[]) +{ + // Qt Charts uses Qt Graphics View Framework for drawing, therefore QApplication must be used. + QApplication app(argc, argv); + + QQuickView viewer; + // The following are needed to make examples run without having to install the module + // in desktop environments. +#ifdef Q_OS_WIN + QString extraImportPath(QStringLiteral("%1/../../../../%2")); +#else + QString extraImportPath(QStringLiteral("%1/../../../%2")); +#endif + viewer.engine()->addImportPath(extraImportPath.arg(QGuiApplication::applicationDirPath(), + QString::fromLatin1("qml"))); + QObject::connect(viewer.engine(), &QQmlEngine::quit, &viewer, &QWindow::close); + + viewer.setTitle(QStringLiteral("QML Custom Legend")); + viewer.setSource(QUrl("qrc:/qml/qmlcustomlegend/main.qml")); + viewer.setResizeMode(QQuickView::SizeRootObjectToView); + viewer.show(); + + return app.exec(); +} diff --git a/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/AnimatedAreaSeries.qml b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/AnimatedAreaSeries.qml new file mode 100644 index 00000000..0af6b5c3 --- /dev/null +++ b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/AnimatedAreaSeries.qml @@ -0,0 +1,30 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the Qt Enterprise Charts Add-on. +** +** $QT_BEGIN_LICENSE$ +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtCharts 2.0 + +AreaSeries { + id: series + + Behavior on opacity { + NumberAnimation { duration: 250 } + } +} diff --git a/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/ChartViewHighlighted.qml b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/ChartViewHighlighted.qml new file mode 100644 index 00000000..7ca033b2 --- /dev/null +++ b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/ChartViewHighlighted.qml @@ -0,0 +1,77 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the Qt Enterprise Charts Add-on. +** +** $QT_BEGIN_LICENSE$ +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtCharts 2.0 + +//![1] +ChartView { + id: chartViewHighlighted + title: "" + property variant selectedSeries + signal clicked + legend.visible: false + margins.top: 10 + margins.bottom: 0 + antialiasing: true + + LineSeries { + id: lineSeries + + axisX: ValueAxis { + min: 2006 + max: 2012 + labelFormat: "%.0f" + tickCount: 7 + } + axisY: ValueAxis { + id: axisY + titleText: "EUR" + min: 0 + max: 40000 + niceNumbersEnabled: true + labelFormat: "%.0f" + tickCount: 5 + } + } +//![1] + + MouseArea { + anchors.fill: parent + onClicked: { + chartViewHighlighted.clicked(); + } + } + + onSelectedSeriesChanged: { + lineSeries.clear(); + lineSeries.color = selectedSeries.color; + var maxVal = 0.0; + for (var i = 0; i < selectedSeries.upperSeries.count; i++ ) { + var y = selectedSeries.upperSeries.at(i).y - selectedSeries.lowerSeries.at(i).y; + lineSeries.append(selectedSeries.upperSeries.at(i).x, y); + if (maxVal < y) + maxVal = y; + } + chartViewHighlighted.title = selectedSeries.name; + axisY.max = maxVal; + } +} + diff --git a/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/ChartViewSelector.qml b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/ChartViewSelector.qml new file mode 100644 index 00000000..86714a01 --- /dev/null +++ b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/ChartViewSelector.qml @@ -0,0 +1,100 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the Qt Enterprise Charts Add-on. +** +** $QT_BEGIN_LICENSE$ +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtCharts 2.0 + +Rectangle { + id: chartViewSelector + width: parent.width + height: parent.height + signal seriesAdded(string seriesName, color seriesColor) + + function highlightSeries(seriesName) { + if (seriesName == "") { + if (state != "") + state = ""; + + for (var i = 0; i < chartViewStacked.count; i++) + chartViewStacked.series(i).opacity = 1.0; + } else { + var targetOpacity = 0.1; + for (var j = 0; j < chartViewStacked.count; j++) { + if (chartViewStacked.series(j).name != seriesName) + chartViewStacked.series(j).opacity = 0.25; + else if (state == "highlight") + chartViewSelected.selectedSeries = chartViewStacked.series(j); + } + } + } + + function selectSeries(seriesName) { + for (var i = 0; i < chartViewStacked.count; i++) { + if (chartViewStacked.series(i).name == seriesName) { + chartViewSelected.selectedSeries = chartViewStacked.series(i); + if (chartViewSelector.state == "") + chartViewSelector.state = "highlighted"; + else + chartViewSelector.state = ""; + } + } + } + + ChartViewStacked { + id: chartViewStacked + anchors.left: parent.left + anchors.leftMargin: 0 + width: parent.width + height: parent.height + onSeriesAdded: chartViewSelector.seriesAdded(series.name, series.color); + } + + ChartViewHighlighted { + id: chartViewSelected + anchors.left: chartViewStacked.right + width: parent.width + height: parent.height + + opacity: 0.0 + onClicked: { + chartViewSelector.state = ""; + } + } + + states: State { + name: "highlighted" + PropertyChanges { + target: chartViewSelected + opacity: 1.0 + } + PropertyChanges { + target: chartViewStacked + anchors.leftMargin: -chartViewStacked.width + opacity: 0.0 + } + } + + transitions: Transition { + PropertyAnimation { + properties: "width, height, opacity, anchors.leftMargin" + duration: 400 + } + } +} diff --git a/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/ChartViewStacked.qml b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/ChartViewStacked.qml new file mode 100644 index 00000000..ade88c04 --- /dev/null +++ b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/ChartViewStacked.qml @@ -0,0 +1,117 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the Qt Enterprise Charts Add-on. +** +** $QT_BEGIN_LICENSE$ +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtCharts 2.0 + +ChartView { + id: chartView + title: "Government Taxes" + legend.visible: false + signal entered(string seriesName) + signal exited(string seriesName) + margins.top: 10 + margins.bottom: 0 + antialiasing: true + + ValueAxis { + id: axisX + min: 2006 + max: 2012 + tickCount: 7 + labelFormat: "%.0f" + } + + ValueAxis { + id: axisY + titleText: "EUR" + min: 0 + max: 90000 + tickCount: 10 + labelFormat: "%.0f" + } + + AnimatedAreaSeries { + id: stateSeries + name: "state" + axisX: axisX + axisY: axisY + borderWidth: 0 + upperSeries: LineSeries { + id: stateUpper + XYPoint { x: 2006; y: 33119 } + XYPoint { x: 2007; y: 37941 } + XYPoint { x: 2008; y: 40122 } + XYPoint { x: 2009; y: 38991 } + XYPoint { x: 2010; y: 34055 } + XYPoint { x: 2011; y: 34555 } + XYPoint { x: 2012; y: 38991 } + } + lowerSeries: LineSeries { + XYPoint { x: 2006; y: 0 } + XYPoint { x: 2007; y: 0 } + XYPoint { x: 2008; y: 0 } + XYPoint { x: 2009; y: 0 } + XYPoint { x: 2010; y: 0 } + XYPoint { x: 2011; y: 0 } + XYPoint { x: 2012; y: 0 } + } + } + + //![1] + AnimatedAreaSeries { + id: municipalSeries + name: "municipal" + axisX: axisX + axisY: axisY + borderWidth: 0 + upperSeries: LineSeries { + id: municipalUpper + XYPoint { x: 2006; y: 33119 + 13443 } + XYPoint { x: 2007; y: 37941 + 15311 } + XYPoint { x: 2008; y: 40122 + 16552 } + XYPoint { x: 2009; y: 38991 + 17904 } + XYPoint { x: 2010; y: 34055 + 17599 } + XYPoint { x: 2011; y: 34555 + 19002 } + XYPoint { x: 2012; y: 38991 + 19177 } + } + lowerSeries: stateUpper + } + //![1] + + AnimatedAreaSeries { + id: socialSeries + name: "social sec." + axisX: axisX + axisY: axisY + borderWidth: 0 + upperSeries: LineSeries { + id: socialUpper + XYPoint { x: 2006; y: 33119 + 13443 + 18855 } + XYPoint { x: 2007; y: 37941 + 15311 + 20238 } + XYPoint { x: 2008; y: 40122 + 16552 + 21347 } + XYPoint { x: 2009; y: 38991 + 17904 + 22376 } + XYPoint { x: 2010; y: 34055 + 17599 + 22076 } + XYPoint { x: 2011; y: 34555 + 19002 + 22631 } + XYPoint { x: 2012; y: 38991 + 19177 + 23686 } + } + lowerSeries: municipalUpper + } +} diff --git a/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/CustomLegend.qml b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/CustomLegend.qml new file mode 100644 index 00000000..d146f83c --- /dev/null +++ b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/CustomLegend.qml @@ -0,0 +1,136 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the Qt Enterprise Charts Add-on. +** +** $QT_BEGIN_LICENSE$ +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtCharts 2.0 + +Rectangle { + id: legend + color: "lightgray" + + property int seriesCount: 0 + property variant seriesNames: [] + property variant seriesColors: [] + signal entered(string seriesName) + signal exited(string seriesName) + signal selected(string seriesName) + + function addSeries(seriesName, color) { + var names = seriesNames; + names[seriesCount] = seriesName; + seriesNames = names; + + var colors = seriesColors; + colors[seriesCount] = color; + seriesColors = colors; + + seriesCount++; + } + + Gradient { + id: buttonGradient + GradientStop { position: 0.0; color: "#F0F0F0" } + GradientStop { position: 1.0; color: "#A0A0A0" } + } + + Gradient { + id: buttonGradientHovered + GradientStop { position: 0.0; color: "#FFFFFF" } + GradientStop { position: 1.0; color: "#B0B0B0" } + } + + //![2] + Component { + id: legendDelegate + Rectangle { + id: rect + //![2] + property string name: seriesNames[index] + property color markerColor: seriesColors[index] + gradient: buttonGradient + border.color: "#A0A0A0" + border.width: 1 + radius: 4 + + implicitWidth: label.implicitWidth + marker.implicitWidth + 30 + implicitHeight: label.implicitHeight + marker.implicitHeight + 10 + + Row { + id: row + spacing: 5 + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 5 + Rectangle { + id: marker + anchors.verticalCenter: parent.verticalCenter + color: markerColor + opacity: 0.3 + radius: 4 + width: 12 + height: 10 + } + Text { + id: label + anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: -1 + text: name + } + } + + //![3] + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + onEntered: { + rect.gradient = buttonGradientHovered; + legend.entered(label.text); + } + onExited: { + rect.gradient = buttonGradient; + legend.exited(label.text); + marker.opacity = 0.3; + marker.height = 10; + } + onClicked: { + legend.selected(label.text); + marker.opacity = 1.0; + marker.height = 12; + } + } + //![3] + } + } + + //![1] + Row { + id: legendRow + anchors.centerIn: parent + spacing: 10 + + Repeater { + id: legendRepeater + model: seriesCount + delegate: legendDelegate + } + } + //![1] +} diff --git a/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/main.qml b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/main.qml new file mode 100644 index 00000000..815d5331 --- /dev/null +++ b/examples/charts/qmlcustomlegend/qml/qmlcustomlegend/main.qml @@ -0,0 +1,66 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the Qt Enterprise Charts Add-on. +** +** $QT_BEGIN_LICENSE$ +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtCharts 2.0 + +Rectangle { + id: main + width: 400 + height: 320 + + Column { + id: column + anchors.fill: parent + anchors.bottomMargin: 10 + spacing: 0 + + ChartViewSelector { + id: chartViewSelector + width: parent.width + height: parent.height - customLegend.height - anchors.bottomMargin + onSeriesAdded: customLegend.addSeries(seriesName, seriesColor); + } + + CustomLegend { + id: customLegend + width: parent.width + height: 50 + anchors.horizontalCenter: parent.horizontalCenter + onEntered: chartViewSelector.highlightSeries(seriesName); + onExited: chartViewSelector.highlightSeries(""); + onSelected: chartViewSelector.selectSeries(seriesName); + } + } + + states: State { + name: "highlighted" + PropertyChanges { + target: chartViewHighlighted + width: column.width + height: (column.height - column.anchors.margins * 2 - customLegend.height) + } + PropertyChanges { + target: chartViewStacked + width: 1 + height: 1 + } + } +} diff --git a/examples/charts/qmlcustomlegend/qmlcustomlegend.pro b/examples/charts/qmlcustomlegend/qmlcustomlegend.pro new file mode 100644 index 00000000..d42afded --- /dev/null +++ b/examples/charts/qmlcustomlegend/qmlcustomlegend.pro @@ -0,0 +1,7 @@ +!include( ../examples.pri ) { + error( "Couldn't find the examples.pri file!" ) +} + +RESOURCES += resources.qrc +SOURCES += main.cpp +OTHER_FILES += qml/qmlcustomlegend/* diff --git a/examples/charts/qmlcustomlegend/resources.qrc b/examples/charts/qmlcustomlegend/resources.qrc new file mode 100644 index 00000000..bd49690b --- /dev/null +++ b/examples/charts/qmlcustomlegend/resources.qrc @@ -0,0 +1,10 @@ +<RCC> + <qresource prefix="/"> + <file>qml/qmlcustomlegend/main.qml</file> + <file>qml/qmlcustomlegend/CustomLegend.qml</file> + <file>qml/qmlcustomlegend/ChartViewStacked.qml</file> + <file>qml/qmlcustomlegend/ChartViewHighlighted.qml</file> + <file>qml/qmlcustomlegend/ChartViewSelector.qml</file> + <file>qml/qmlcustomlegend/AnimatedAreaSeries.qml</file> + </qresource> +</RCC> |