qml Chartview append to AreaSeries

Question

I am new to QML and took following examle as a learning base for ChartView. Later on I want to use similar methods to add data dynmically during runtime

    import QtQuick 2.2
    import QtQuick.Window 2.1
    import QtQuick.Controls 2.4
    import QtQuick.Layouts 1.0
    import QtQuick.Dialogs 1.0
    import QtCharts 2.15



    ChartView {
            id: chart
            anchors.fill: parent
            axes: [
                ValueAxis{
                    id: xAxis
                    min: 1.0
                    max: 10.0
                },
                ValueAxis{
                    id: yAxis
                    min: 0.0
                    max: 10.0
                }
            ]
        //onClicked: console.log("onClicked: " + point.x + ", " + point.y);
        Component.onCompleted: {
                var seriesCount = Math.round(Math.random()* 10);
                for(var i = 0;i < seriesCount;i ++)
                {  
                    var series = chart.createSeries(ChartView.SeriesTypeLine, "line"+ i, xAxis, yAxis);
                    series.pointsVisible = true;
                    series.color = Qt.rgba(Math.random(),Math.random(),Math.random(),1);
                    series.hovered.connect(function(point, state){ console.log(point); }); // connect onHovered signal to a function
                    var pointsCount = Math.round(Math.random()* 20);
                    var x = 0.0;
                    console.log("MOIN: " + series)
                    for (var p in series) console.log(p + ": " + series[p]);
                    for(var j = 0;j < pointsCount;j ++)
                    {
                        x += (Math.random() * 2.0);
                        var y = (Math.random() * 10.0);
                        series.append(x, y);
                    }
                }
            }
        }

Taken from QML, create LineSeries at runtime

I wanted to change it to AreaSeries and updated folloewing line

  var series = chart.createSeries(ChartView.SeriesTypeArea, "line"+ i, xAxis, yAxis);

But I get following error message for line :

 series.append(x, y);

MainChart.qml:42: TypeError: Property 'append' of object QtCharts::DeclarativeAreaSeries(0x1d955d73900) is not a function

I listed all members of series and could not find any similar function like add or push.

Does the AreaSeries not support adding points dynmically

UPDATE: I am sure, this is not the perfect solution, but it works. I forgot to add the upperSeries. Unfortunately I creates 2 entries in the legend. Does anybody know how to improve

        var seriesA = chart.createSeries(ChartView.SeriesTypeArea, null , xAxis, yAxis);
        seriesA.upperSeries = chart.createSeries(ChartView.SeriesTypeLine, null, xAxis, yAxis);

Answer 1

I've used a mixture of createSeries() and Qt.createQmlObject() which seems to work. I couldn't resolve the issue of creating LineSeries for upperSeries and lowerSeries for the AreaSeries via createSeries() function without them being part of the legend.

import QtQuick
import QtCharts

Item {
    width: 800
    height: 600

    ChartView {
        id: chartView
        anchors.fill: parent
        title: qsTr("Dynamic chart")
        antialiasing: true
        axes: [
            ValueAxis {
                id: xAxis
                min: 0
                max: 20
            },
            ValueAxis {
                id: yAxis
                min: 0.0
                max: 10.0
            }
        ]

        Component.onCompleted: {
            var areaSeries = chartView.createSeries(ChartView.SeriesTypeArea, "Area series" , xAxis, yAxis);
            areaSeries.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1);

            // Dynamically create upper line series
            var upperLineSeries = Qt.createQmlObject('import QtCharts; LineSeries {}',
                                                     areaSeries,
                                                     "dynamicUpperLineSeries");
            upperLineSeries.pointsVisible = true;

            // Dynamically create lower line series
            var lowerLineSeries = Qt.createQmlObject('import QtCharts; LineSeries {}',
                                                     areaSeries,
                                                     "dynamicLowerLineSeries");
            lowerLineSeries.pointsVisible = true;

            // Fill both line series with values
            for(var i = 0; i <= xAxis.max; ++i) {
                let ran = chartView.getRandomRange(5.0, 10.0);

                upperLineSeries.append(i, ran);
                lowerLineSeries.append(i, chartView.getRandomRange(0.0, ran));
            }

            // Assign both series to AreaSeries upper-/lowerSeries properties
            areaSeries.upperSeries = upperLineSeries;
            areaSeries.lowerSeries = lowerLineSeries;
        }

        function getRandomRange(min, max) {
            return Math.random() * (max - min) + min;
        }
    }
}