QML StackedBarSeries x-axis labels using data column

Question

I have a data set in an QSqlQueryModel that looks like this

+-----------+-----------+------------+
| date      | sent      | recv       |
|===========+===========+============+
| 2013-4-21 | 3839088   | 140036219  |
| 2013-4-22 | 146037305 | 1439537452 |
| 2013-4-23 | 67140372  | 1787850213 |
| ...                                |
+-----------+-----------+------------+

Values in the date column are QDateTime objects, values in the sent and recv columns are integers.

I want to display this data in a QML ChartView using the StackedBarSeries and a VBarModelMapper:

ChartView {
    anchors.fill: parent
    antialiasing: true

    StackedBarSeries {
        VBarModelMapper {
            model: SqlTrafficModel {}
            firstBarSetColumn: 1
            lastBarSetColumn: 2
            firstRow: 0
        }
    }
}

This is the current state of my view

My problem is that the StackedBarSeries just uses an index for the x-axis label, however I'd like to display the date of each bar as it's x-axis label.

I tried to use DateTimeAxis for the axisX property but it looks like it just shifts the x-axis to the provided min and max values while interpreting the original labels as unix timestamps.

Yes, each bar should represent a row in my model and the label should be the value of the first column aka. the date. — strnmn, Feb 08 '18 at 17:02
[Have you looked at `StackedBarSeries` property `axisX`?](https://doc.qt.io/qt-5.10/qml-qtcharts-stackedbarseries.html) — Ross Rogers, Feb 08 '18 at 17:22
Yes. As mentioned in the last paragraph of my original post, I tried to use a DateTimeAxis instance as the value of the axisX property without luck. — strnmn, Feb 08 '18 at 17:40

score 1 · Answer 1 · edited Feb 09 '18 at 00:42

One possible solution is to implement a Q_INVOKABLE method that returns the requested column in a QStringList and set it to categories in a BarCategoryAxis assigned to the X axis, and call it when the Component.onCompleted and onModelReset signals are emited:

sqltrafficmodel.h

#ifndef SQLTRAFFICMODEL_H
#define SQLTRAFFICMODEL_H

#include <QSqlQuery>
#include <QSqlQueryModel>

class SqlTrafficModel : public QSqlQueryModel
{
    Q_OBJECT
    Q_PROPERTY(QString queryStr READ queryStr WRITE setQueryStr NOTIFY queryStrChanged)
public:
    SqlTrafficModel(QObject *parent = nullptr):QSqlQueryModel(parent){}

    Q_INVOKABLE QStringList getColumn(int col){
        QStringList mColumn;
        for(int row=0; row< rowCount(); ++row){
            mColumn<<index(row, col).data().toString();
        }
        return mColumn;
    }

    QString queryStr() const{
        return mQueryStr;
    }
    void setQueryStr(const QString &queryStr){
        if(queryStr == mQueryStr)
            return;
        mQueryStr = queryStr;
        setQuery(mQueryStr);
        emit queryStrChanged();
    }

signals:
    void queryStrChanged();
private:
    QString mQueryStr;
};

#endif // SQLTRAFFICMODEL_H

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.2

import com.eyllanesc.models 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    visibility: Window.FullScreen

    ChartView {
        anchors.fill: parent
        antialiasing: true

        StackedBarSeries {
            VBarModelMapper {
                model: SqlTrafficModel {
                    id: trafficModel
                    queryStr: "select * from traffic"
                    onModelReset: bar_axis.categories = getColumn(0)
                    Component.onCompleted: bar_axis.categories = getColumn(0)
                }
                firstBarSetColumn: 1
                lastBarSetColumn: 2
                firstRow: 0
            }
            axisX: BarCategoryAxis {
                id: bar_axis
            }
        }
    }
}

The complete example can be found in the following link

Thanks! Unfortunately this is not perfect because I have a lot of data points and the dates disappear quickly... — strnmn, Feb 09 '18 at 00:45
@iMoritz use the signals, for example rowsInserted, rowsRemoved, etc to update the labels. — eyllanesc, Feb 09 '18 at 00:47

QML StackedBarSeries x-axis labels using data column

1 Answers1