<canvas id="line-chart2" height="300" width="600"></canvas>
<script>

(function($scope) {

    $scope.$watch('msg.payload', function(data) {

   })

    })(scope)

function add_data(chart, label, data)
      {
         var today = new Date();
        var currentHours = ('0'+today.getHours()).substr(-2);
        var currentMinutes = ('0'+today.getMinutes()).substr(-2);
        var currentSeconds = ('0'+today.getSeconds()).substr(-2);
        var time = currentHours + ":" + currentMinutes + ":" + currentSeconds;
        //myChart9.data.datasets[0].data.push(Math.random() * 100);
        var value = Math.random() * 50;
       if(myChart2.data.datasets[0].data.length >10) {
           myChart2.data.datasets[0].data.shift();
        myChart2.data.labels.shift();
       }
        myChart2.data.datasets[0].data.push(value);
        myChart2.data.labels.push(time)
        myChart2.update();

      }
      setInterval(add_data, 500); //milisecond



var myChart2 = new Chart(document.getElementById("line-chart2"), {
  type: 'line',
  data: {
    labels: [1],
     datasets: [{
            label: 'Data 1',
           data: [0],
        backgroundColor: 'blue',
        borderColor: 'blue',
        borderWidth: 2,
        fill: false,
        pointRadius: 4,
        pointRadiusHover: 4,
        pointBorderWidth: 0

     }



]


    },

    options: {

        maintainAspectRatio: false,
           scales: {

                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'X axe name',
                                fontColor:'black',
                                fontSize:10
                            },
                            ticks: {
                               fontColor: "black",
                               fontSize: 14,
                               maxTicksLimit:10

                              }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Y axe name',
                                fontColor: 'black',
                                fontSize:10
                            },
                            ticks: {
                                  fontColor: "black",
                                  fontSize: 14,
                                  maxTicksLimit:5,
                                  autoSkip: true
                            }
                        }]
                 }
         }
});



</script>