chartsqmlqchartview

How can I display time and date in separate lines along xaxis in QML chartview line series


I am able to display epoch value to Date and Time strings along x-axis in QML Chartview Lineseries. But, I want to split the time and date into separate lines as shown in the attachment.

Can someone please help me on this. Below is the sample code

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

property var lineSeries

property var x1Val : [1649736833, 1649740465, 1649744065, 1649747665, 1649751265, 1649754865, 1649758465, 1649762065, 1649765665, 1649769265]
property var y1Val : [0,1,2,3,4,5,6,7,8,9]

Component.onCompleted: {

    for(var i = 0; i < 2; i++) {
        lineSeries = chartView.createSeries(ChartView.SeriesTypeLine, "strend" + i)

        lineSeries.axisX = axisx2

        lineSeries.axisY = axisy2

        for(var iLoop = 0; iLoop < x1Val.length; iLoop++) {
            lineSeries.append(x1Val[iLoop] * 1000 + (i * 10000000), y1Val[iLoop])
        }
    }
}

ChartView {
    x: 0
    y: 0
    width: 640
    height: 480

    id: chartView

    DateTimeAxis {
        id: axisx2
        min: new Date(1649736833000)
        max: new Date(1649779265000)
        //format: "yyyy/MM/dd hh:mm"
        format: "hh:mm yyyy/MM/dd"
    }
    ValueAxis {
        id: axisy2
        min: 0
        max: 10
    }
}
}

Expected Output Expected_Output


Solution

  • use the format like below. This aligns the time to center of the date.

    format: "     hh:mm
    yyyy/MM/dd" //where &#160 - spacing character in HTML enter image description here

    Thank you all for your help