[QML & c++ model] Multiple charts in same chartview problem with axis

nwoki

Hi all!
I have the following code (QML) for my chartview:

import QtQuick 2.9
import QtCharts 2.2


Item {
    id: root;

    ValueAxis {
        id: yAxis;
        min: 0;
        max: 125;
        tickCount: 6;
    }

    ValueAxis {
        id: xAxis;
        min: -100;
        max: 100;
        tickCount: 9;
    }

    VXYModelMapper {
        series: lineSeries;
        model: TESTMODEL;
        xColumn: 0;
        yColumn: 1;
    }

    VXYModelMapper {
        series: scatterSeries;
        model: SCATTERMODEL;
        xColumn: 0;
        yColumn: 1;
    }


    ChartView {
        id: chartView
        anchors.fill: parent
        antialiasing: true;
        legend.visible: false;

        Component.onCompleted: {
            setAxisX(xAxis, lineSeries);
            setAxisX(xAxis, scatterSeries);

            setAxisY(yAxis, lineSeries);
            setAxisY(yAxis, scatterSeries);
        }

        LineSeries {
            id: lineSeries;
            name: "LineSeries";
        }

        ScatterSeries {
            id: scatterSeries;
            name: "ScatterSeries";
        }
    }
}

and the result is as follows.

What i'm trying to achieve is the two series (line and scatter) to use the same axis. This is possible via c++ (as stated by the example ) where a bar and line series use the same axis.

Have I done something wrong on my QML part or is this a problem with QML ?

justanotheruser

Try adding the second series using createSeries on the ChartView as shown here: https://doc.qt.io/Qt-5/qml-qtcharts-chartview.html#createSeries-method

nwoki

@justanotheruser said in [QML & c++ model] Multiple charts in same chartview problem with axis:

Try adding the second series using createSeries on the ChartView as shown here: https://doc.qt.io/Qt-5/qml-qtcharts-chartview.html#createSeries-method

That did the trick, adding the second series dynamically. By doing so i had to find a way for getting the scatter model data into the series. As I just need to track one point, this is what I've come up with so far:

    Connections {
        target: TESTMODEL;
        onXValChanged: {
            var scatter = chartView.series(1);

            scatter.remove(0);
            scatter.append(TESTMODEL.xVal, TESTMODEL.yVal);
        }

        onYValChanged: {
            var scatter = chartView.series(1);
            scatter.remove(0);
            scatter.append(TESTMODEL.xVal, TESTMODEL.yVal);
        }
    }

It's ugly but it does the trick. Any idea why QML was duplicating the axis when using a second lineseries? This solution for now is ok as I only need to track 2 values (x, y) for the scatter series but it'll be a pain for those who want to track a series of more coordinates.