How to Draw a wave

[Bhushan_Sure]

Hi, I want to draw a wave like sin wave which we see in "ECG" basically, Can anybody suggest what can i use ?

[Nikhilesh N]

Hi, @Bhushan_Sure. You can use LineSeries inside a Chart View. If you want to mark the axes, ensure that you use Value Axes types to plot X and Y axes.

Also, if you want an example to use a sine wave, you can refer to the 'Oscilloscope' example given in the documentation. There is an example program you can find in the Qt Creator Editor.

[Bhushan_Sure]

@Nikhilesh-NThank you very much, i will try this,
But while running that example, it is showing following error:-

#include <QtCore/QRandomGenerator>:- No such file and directory

Do you know what is alternative header file for this ?

[Maaz Momin]

@Bhushan_Sure Which Qt version are you using? QRandomGenerator is available from 5.10 onwards.

[Nikhilesh N]

@Bhushan_Sure I guess you need not include QtCore in the header specification. I just used #include <QRandomGenerator>.

[Bhushan_Sure]

@Maaz-Momin Thank you so much, I was using 5.9, Now i tried to run on 5.11 version and it is running.

[J.Hilk]

@Bhushan_Sure
if you only want a sin wave, you don't really need the full QCharts module, a simple Canvas will do just fine:

import QtQuick 2.9
import QtQuick.Window 2.2

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


    Timer{
        repeat: true
        interval: 25
        running: true
        onTriggered: {
            canvas.frames ++;
            canvas.requestPaint()
        }
    }

    Canvas {
        id:canvas
        anchors.fill: parent

        property int frames: 0

        onPaint: {
            var ctx = getContext("2d");
            var cw = parent.width;
            var ch = parent.height;
            var cx = cw / 2,
              cy = ch / 2;
            var rad = Math.PI / 180;
            var w = width;
            var h = height ;
            var amplitude = h;
            var frequency = .01;
            ctx.lineWidth = 4;

            var phi = frames / 30;

            ctx.clearRect(0, 0, cw, ch);
            ctx.beginPath();
            ctx.moveTo(0, ch);
            for (var x = 0; x < w; x++) {
                var y = Math.sin(x * frequency + phi) * amplitude / 2 + amplitude / 2;
                ctx.lineTo(x, y );
            }
            ctx.stroke();
        }
    }
}

[Bhushan_Sure]

@J.Hilk Hi, It should be realtime like taking values from backend and drawing sin waves, so for that i have to use Chart View ?

[J.Hilk]

@Bhushan_Sure
If you have data that is provided to your application, and you want to visualize that, than QtChats is properly the way to go.

Your opening post only mentioned displaying a Sin-Wave, that can be done simply with pure qml/js, as it is small, not chaning static data that is drawn on the screen.

[Bhushan_Sure]

@J.Hilk Thank you, I will try this :)

[Bhushan_Sure]

@J-Hilk @Maaz-Momin @Nikhilesh-N
Hi, I solved this problem and updated the code, Now the code is generating waves like Ecg.
Meanwhile, I also tried for autoscaling the values after some time,The code is below:-

import QtQuick 2.9
import QtQuick.Window 2.3
import QtCharts 2.2

Window
{
    visible: true
    width: 700
    height: 500
    title: qsTr("New Project")
    property int a
    property int b
    property int c

    ChartView {
        anchors.fill: parent
        antialiasing: true
        theme: ChartView.ChartThemeDark
        animationOptions: ChartView.SeriesAnimations

        ValueAxis {
            id: valueAxis
            min: 0
            max: 100
            tickCount: 2
        }

        ValueAxis {
            id: valueAxi
            min: -20
            max: 20
            tickCount: 3
        }

        Timer
        {
            interval: 250; running: true; repeat: true
            onTriggered:
            {
                if(c<40)
                {
                    b= Math.floor(Math.random()*(15-(-15)+1)+(-15));
                    c=c+1
                }
                else
                {
                    b= Math.floor(Math.random()*(35-(-35)+1)+(-35));
                    console.log(b)
                }

                if(c==40)
                {
                    valueAxi.min=-40
                    valueAxi.max=40
                }

                l1.append(a,b)

                if(a==100)
                {
                    l1.clear()
                    a=0
                    c=0
                }
                else
                {
                    a=a+1
                }
            }

        }

        SplineSeries {
            id:l1
            name: "LineSeries"
            axisX: valueAxis
            axisY: valueAxi
        }
    }
}

[Nikhilesh N]

@Bhushan_Sure Cool. Glad you found what you needed.

[Bhushan_Sure]

@Nikhilesh-N Thank you so much for your help :)