DateTimeAxis update

lopeztel

Hi, I have been running into problems while trying to visualize data from mqtt messages, so far I have been able to update a spline series with my values by setting min and max values on the x axis (0 -15) , incrementing the x value of the series by one every time a message is received , then clearing the series after 15 samples are visualized and then starting all over again.

I would like to see the data with a timestamp in the x axis, my x axis setup is something like this:

                DateTimeAxis {
                    id: timeAxis
                    format: "hh:mm"
                    min: new Date()
                    max: new Date()
                }

Then I'm using that here:

               SplineSeries {
                    name: "Temperature"
                    id: tempSeries
                    useOpenGL: true
                    axisY: axisY
                    //axisX: axisX
                    axisX: timeAxis
                }

And this is the function that receives the data:

            function tempMessage(payload)
            {
                //tempSubscription.update(tempSeries);
                if (tempSamples >= 100){
                    timeAxis.max = new Date()
                    tempSeries.append(timeAxis.max,payload)
                    tempSamples++
                }else{
                    tempSeries.clear()
                    timeAxis.min = new Date()
                    timeAxis.max = new Date()
                    tempSeries.append(timeAxis.min,payload)
                    tempSamples = 1
                }

                tempLabel.text = "Temp: " + payload + " °C"
            }

My idea was as follows, set the min and max to the current time , then update the max every time a message is received, append the pair (current time,payload) to the series and clear the data once I reach a number of samples and start all over again. In my mind this would have a "dynamic" behavior in the chartview, code compiles and no warnings are displayed but all I see is an empty chartview.

Any pointers or ideas o how to achieve this? thanks in advance, it seems like something that can be done in QML without dealing with the C++ backend ...

Gojir4

@lopeztel said in DateTimeAxis update:
Are you not always clearing your data here ? :

//tempSubscription.update(tempSeries);
if (tempSamples >= 100){  // I guess you want <= 100 here
    timeAxis.max = new Date()
    ...
}else{
    tempSeries.clear()
    ...
}

I used QDateTimeAxis a long time ago but I think there is no need to manage min and max manually.

lopeztel

@Gojir4 oops, thanks for that, also, I noticed no changes without the axis update ... is there anyway to store a time reference as a one off thing ? let's say at the creation of the chartview so that I can use it as the minimum value for the x axis and then update only the max? with new Date() i only see a dot at the right corned of the chartview even after a bunch of updates ...

Gojir4

@lopeztel said in DateTimeAxis update:

@Gojir4 oops, thanks for that, also, I noticed no changes without the axis update ... is there anyway to store a time reference as a one off thing ? let's say at the creation of the chartview so that I can use it as the minimum value for the x axis and then update only the max? with new Date() i only see a dot at the right corned of the chartview even after a bunch of updates ...

Yes there is:

ChartView{
    property var startDate
    Component.onCompleted: startDate = new Date()
    ...
}

But may I suggest something like that, more like a "circular buffer":

function tempMessage(payload)
{
    //tempSubscription.update(tempSeries);
    //Update max
    timeAxis.max = new Date()
    //append value
    tempSeries.append(timeAxis.max,payload)
    if (tempSeries.count > 100) {
        //We reach max buffer size
        //Remove first item
        tempSeries.remove(0)
        //Update min 
        timeAxis.min = tempSeries.at(0).y
    } 

    tempLabel.text = "Temp: " + payload + " °C"
}

lopeztel

@Gojir4 thanks a lot, this is way better than my solution and would allow to keep something on the chartview at all times (once the 100 sample buffer is full)

Gojir4

@lopeztel Do not forgot to initialize min

ChartView{
    Component.onCompleted: timeAxis.min = new Date()
    ...
}

or

function tempMessage(payload)
{
    ...
    if (tempSeries.count > 100) {
        ...
    } else if(tempSeries.count === 1) {
        //init min 
        timeAxis.min = tempSeries.at(0).y
    }
    ...
}

lopeztel

@Gojir4 yeah, that's more or less how I used the Component.onCompleted