How to display popup window when hovered on dynamic lineseries chart?

[Shiva Guru Prasad]

import QtQuick 2.0
import QtCharts 2.0
import QtQuick.XmlListModel 2.0
import QtQuick.Controls 2.0

Item {

width: 600
height: 700
property int currentIndex: -1
property string currentTime:Qt.formatDateTime(new Date,"yyyy-mm-dd   hh:mm:ss").toString()

//![1]
MouseArea

{

    hoverEnabled: true

   Button {
        id:display

      height: 30
        width:100
        anchors
        {
            left: screen_cap.right
            leftMargin:10
       }
       text:"Hovering diplay"
       onClicked: popup.open()


    }


ChartView {
    id: chartView
    title: "Driver Speeds, lap 1"
    anchors.fill: parent
    legend.alignment: Qt.AlignTop
    animationOptions: ChartView.SeriesAnimations
    antialiasing: true
    theme: ChartView.ChartThemeBlueCerulean
    DateTimeAxis{
        id:xaxis
        format:currentTime
        min: currentTime
        max:updatedTime

    }
    

}
Popup{
   id:pop_up
    x:30;y:600
    Label{
        Text {
            id: lbl
            text: hover();
        }
    }
}

}

SpeedsXml {
    id: speedsXml
    onStatusChanged: {
        if (status == XmlListModel.Ready) {
            timer.start();
            console.log("Its ready");
        }
    }
}

Timer
{
    id: timer
    interval: 1000
    repeat: true
    triggeredOnStart: true
    running: false


    onTriggered: {
        currentIndex++;

        if (currentIndex < speedsXml.count) {
     
            var lineSeries = chartView.series(speedsXml.get(currentIndex).driver);
            if (!lineSeries) {
                lineSeries = chartView.createSeries(ChartView.SeriesTypeLine,
                                                    speedsXml.get(currentIndex).driver);
                chartView.axisY().min = 0;
                chartView.axisY().max = 250;
                chartView.axisY().tickCount = 6;
                chartView.axisY().titleText = "speed (kph)";
                chartView.axisX().titleText = "Seconds";



            }
            var year=Number(new Date().getFullYear());
            var month=Number(new Date().getMonth());
            var day=Number(new Date().getDay());
              var second=Number(new Date().getSeconds());
            var DATe;


            console.log("here "+second);
            lineSeries.append(second,speedsXml.get(currentIndex).speed);
            var add=second+1;
            var date=Number(new Date());
            console.log(date);



            if (add>second) {

                chartView.axisX().min=xaxis.min;
                chartView.axisX().max=xaxis.max;
                console.log(add);

            }
            else
            {
                chartview.axisX().min=DateTimeAxis.format("yyyy-mm-dd hh:mm:ss");
                chartView.axisX().max=DateTimeAxis.format("yyyy-mm-dd hh:mm:ss")+5;
            }

            chartView.axisX().tickCount = chartView.axisX().max - chartView.axisX().min + 1;

            console.log(currentIndex);
            console.log(speedsXml.get(currentIndex).speed);

        }
    }


}

Rectangle {
    id: mybuttons

    color: "grey"

    anchors{
        horizontalCenter: parent.horizontalCenter
        top: parent.top
        topMargin: 50
    }

    Item {
        anchors{

            top: parent.top
            topMargin: 10
            left: parent.left
            leftMargin: 140
        }

        Button{
            id:zoomin
            text:"ZoomIn"
            height: 30
            width:100
            anchors
            {
                //left: pause.right
                leftMargin:10
            }
            onClicked: {
                chartView.zoomIn()

            }
        }

        Button{
            id:zoomout
            text:"ZoomOut"
            height: 30
            width:100
            anchors
            {
                left: zoomin.right
                leftMargin:10
            }
            onClicked: {
                chartView.zoomOut()
            }
        }

        Button{
            id:zoomreset
            text:"ZoomReset"
            height: 30
            width:100
            anchors
            {
                left: zoomout.right
                leftMargin:10
            }
            onClicked: {
                chartView.zoomReset()
            }
        }
        Button{
            id:screen_cap
            text:"Screen shot"
            height: 30
            width:100
            anchors
            {
                left: zoomreset.right
                leftMargin:10
            }
            onClicked: {
                shoot();
            }


        }


    }
}

}