// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause //! [0] import QtGraphs //! [0] //! [1] import QtQuick import QtGraphs Item { width: 640 height: 480 Bars3D { width: parent.width height: parent.height Bar3DSeries { itemLabelFormat: "@colLabel, @rowLabel: @valueLabel" ItemModelBarDataProxy { itemModel: dataModel // Mapping model roles to bar series rows, columns, and values. rowRole: "year" columnRole: "city" valueRole: "expenses" } } } ListModel { id: dataModel ListElement{ year: "2022"; city: "Oulu"; expenses: "4200"; } ListElement{ year: "2022"; city: "Rauma"; expenses: "2100"; } ListElement{ year: "2022"; city: "Helsinki"; expenses: "7040"; } ListElement{ year: "2022"; city: "Tampere"; expenses: "4330"; } ListElement{ year: "2023"; city: "Oulu"; expenses: "3960"; } ListElement{ year: "2023"; city: "Rauma"; expenses: "1990"; } ListElement{ year: "2023"; city: "Helsinki"; expenses: "7230"; } ListElement{ year: "2023"; city: "Tampere"; expenses: "4650"; } } } //! [1] //! [2] import QtQuick import QtGraphs Item { width: 640 height: 480 Scatter3D { width: parent.width height: parent.height Scatter3DSeries { ItemModelScatterDataProxy { itemModel: dataModel // Mapping model roles to scatter series item coordinates. xPosRole: "xPos" yPosRole: "yPos" zPosRole: "zPos" } } } ListModel { id: dataModel ListElement{ xPos: "2.754"; yPos: "1.455"; zPos: "3.362"; } ListElement{ xPos: "3.164"; yPos: "2.022"; zPos: "4.348"; } ListElement{ xPos: "4.564"; yPos: "1.865"; zPos: "1.346"; } ListElement{ xPos: "1.068"; yPos: "1.224"; zPos: "2.983"; } ListElement{ xPos: "2.323"; yPos: "2.502"; zPos: "3.133"; } } } //! [2] //! [3] import QtQuick import QtGraphs Item { width: 640 height: 480 Surface3D { width: parent.width height: parent.height Surface3DSeries { itemLabelFormat: "Pop density at (@xLabel N, @zLabel E): @yLabel" ItemModelSurfaceDataProxy { itemModel: dataModel // Mapping model roles to surface series rows, columns, and values. rowRole: "longitude" columnRole: "latitude" yPosRole: "pop_density" } } //! [4] onTapped: { // Disable the default input handler unsetDefaultTapHandler() // Implement own custom event handler console.log("Custom tap event handler") } //! [4] } ListModel { id: dataModel ListElement{ longitude: "20"; latitude: "10"; pop_density: "4.75"; } ListElement{ longitude: "21"; latitude: "10"; pop_density: "3.00"; } ListElement{ longitude: "22"; latitude: "10"; pop_density: "1.24"; } ListElement{ longitude: "23"; latitude: "10"; pop_density: "2.53"; } ListElement{ longitude: "20"; latitude: "11"; pop_density: "2.55"; } ListElement{ longitude: "21"; latitude: "11"; pop_density: "2.03"; } ListElement{ longitude: "22"; latitude: "11"; pop_density: "3.46"; } ListElement{ longitude: "23"; latitude: "11"; pop_density: "5.12"; } ListElement{ longitude: "20"; latitude: "12"; pop_density: "1.37"; } ListElement{ longitude: "21"; latitude: "12"; pop_density: "2.98"; } ListElement{ longitude: "22"; latitude: "12"; pop_density: "3.33"; } ListElement{ longitude: "23"; latitude: "12"; pop_density: "3.23"; } ListElement{ longitude: "20"; latitude: "13"; pop_density: "4.34"; } ListElement{ longitude: "21"; latitude: "13"; pop_density: "3.54"; } ListElement{ longitude: "22"; latitude: "13"; pop_density: "1.65"; } ListElement{ longitude: "23"; latitude: "13"; pop_density: "2.67"; } } } //! [3] //! [7] ItemModelBarDataProxy { itemModel: model // E.g. a list model defined elsewhere containing yearly expenses data. // Mapping model roles to bar series rows, columns, and values. rowRole: "year" columnRole: "city" valueRole: "expenses" rowCategories: ["2020", "2021", "2022", "2023"] columnCategories: ["Oulu", "Rauma", "Helsinki", "Tampere"] } //! [7] //! [8] ItemModelScatterDataProxy { itemModel: model // E.g. a list model defined elsewhere containing point coordinates. // Mapping model roles to scatter series item coordinates. xPosRole: "xPos" yPosRole: "yPos" zPosRole: "zPos" } //! [8] //! [9] ItemModelSurfaceDataProxy { itemModel: model // E.g. a list model defined elsewhere containing population data. // Mapping model roles to surface series rows, columns, and values. rowRole: "longitude" columnRole: "latitude" valueRole: "pop_density" } //! [9] //! [10] import QtQuick import QtGraphs GraphsView { anchors.fill: parent theme: GraphsTheme { colorScheme: GraphsTheme.ColorScheme.Dark seriesColors: ["#E0D080", "#B0A060"] borderColors: ["#807040", "#706030"] grid.mainColor: "#ccccff" grid.subColor: "#eeeeff" axisY.mainColor: "#ccccff" axisY.subColor: "#eeeeff" } axisX: BarCategoryAxis { categories: ["2023", "2024", "2025"] lineVisible: false } axisY: ValueAxis { min: 0 max: 10 subTickCount: 4 } BarSeries { BarSet { values: [7, 6, 9] } BarSet { values: [9, 8, 6] } } } //! [10] //! [11] import QtGraphs GraphsView { LineSeries { GraphTransition { GraphPointAnimation {} } } SplineSeries { GraphTransition { SplineControlAnimation {} } } } //! [11] //! [12] import QtGraphs GraphsView { LineSeries { GraphTransition { GraphPointAnimation { duration: 1000; easingCurve.type: Easing.OutCubic } } } } //! [12] //! [13] import QtGraphs GraphsView { SplineSeries { GraphTransition { GraphPointAnimation { duration: 1000; easingCurve.type: Easing.OutCubic } SplineControlAnimation { duration: 1000; easingCurve.type: Easing.OutCubic } } } } //! [13]