DateTimeAxis update



  • 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 ...



  • @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.



  • @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 ...



  • @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"
    }
    


  • @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)



  • @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
        }
        ...
    }
    
    


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


Log in to reply