VXYModelMapper: how to define x and y values

[corianderop]

I have a model which I've exposed to qml that has two role and creates two columns. I'm trying to graph the content of these two columns by using the VXYModelMapper class and I'm running into some trouble. It's not really clear to me from the documentation how to use the xColumn and yColumn to define my x and y data. What I've tried so far is something like:

cmodel.cpp

using namespace std;
cmodel::cmodel()
    : xVector(),yVector()
{
    xVector.append(0);
    xVector.append(1);
    xVector.append(2);
    xVector.append(3);

    yVector.append(0);
    yVector.append(1);
    yVector.append(2);
    yVector.append(3);
}
int cmodel::rowCount( const QModelIndex& parent) const
{
    return 4;
}

QHash<int, QByteArray> cmodel::roleNames() const {
    QHash<int, QByteArray> roles;
    roles[X_ROLE] = "xvalue";
    roles[Y_ROLE] ="yvalue";

    return roles;
}
bool cmodel::setData(const QModelIndex &index, const QVariant &value, int role){
    return true;
}

bool cmodel::insertColumns(int position, int columns, const QModelIndex &parent)
{

    return true;
}

bool cmodel::removeColumns(int position, int columns, const QModelIndex &parent)
{

    return true;
}

QVariant cmodel::data(const QModelIndex& index, int role) const {
    if( index.row() >= rowCount()){
        return QVariant::Invalid;
    }
    else{
        QVariant result;
        switch(role){
        case X_ROLE:
            result=xVector[index.row()];
            cout<<"X_ROLE: "<<X_ROLE<<endl;
            break;
        case Y_ROLE:
            result=yVector[index.row()];
            cout<<"Y_ROLE: "<<Y_ROLE<<endl;
            break;

        }//switch
        return result;
    }//else
}//QVariant

main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.2
import QtCharts 2.0
ApplicationWindow {
    width: Screen.width/3;
    height: Screen.height/3
    visible: true

 //Item{
    //anchors.bottom: parent.bottom
    ChartView {
        //title:"Line"
        anchors.fill:parent
        antialiasing: true


        LineSeries{
            VXYModelMapper{
            model:myGraph
            xColumn:257
            yColumn:258
            }
        }//lineseries


    }//chartview
 //}
Item{
    anchors.left:parent.left
    TableView{
    id: graphTableView
    //anchors.fill: parent
    model:myGraph



    TableViewColumn{
        role:"xvalue"
        title:"X_ROLE"
        width:100
    }
    TableViewColumn{
        role:"yvalue"
        title:"Y_ROLE"
        width:100
    }

    }//tableview
}
}//applicationWindow

In my case X_ROLE and Y_ROLE are 257 and 258 respectively which is why I hardcoded them in the x/yColumn as a test. This isn't working. I'm confused as to whether x/yColumn are roles or something else. I haven't been able to find any examples on how to use this class.

When I use a tableview to simply list the contents of the two column I get what I want but I'm stuck on graphing it.

Has anyone implemented this and have any hints?

[Added code formatting tags ~kshegunov]

[SaranshVora]

@corianderop Hi I am also stuck in a similar situation did you figure out a solution for it ?