Chart.js

Chart.js live Streaming to plot ECG data.

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.7.1/chartjs-plugin-streaming.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<html>

  <head>

  </head>

  <body>
    <div class="container mt-5 pb-5">
      <h1 class="mb-3">Chart.js Live Streaming of data points</h1>
      <canvas id="myChart" width="100%" height="200"></canvas>
      <script>
        
        config = {
          type: 'line',
          data: {
            datasets: [{
              data: [{
                x: moment("2019-01-01T05:00:00").format('x') + 0,
                y: -0.11700000
              }, {
                x: moment("2019-01-01T05:00:00").format('x') + 3,
                y: -0.14400000
              }, {
                x: moment("2019-01-01T05:00:00").format('x') + 7,
                y: -0.17500000
              }, {
                x: moment("2019-01-01T05:00:00").format('x') + 10,
                y: -0.19200000
              }, {
                x: moment("2019-01-01T05:00:00").format('x') + 13,
                y: -0.19900000
              }, {
                x: moment("2019-01-01T05:00:00").format('x') + 17,
                y: -0.20500000
              }, {
                x: moment("2019-01-01T05:00:00").format('x') + 20,
                y: -0.21000000
              }, {
                x: moment("2019-01-01T05:00:00").format('x') + 23,
                y: -0.21400000
              }, {
                x: moment("2019-01-01T05:00:00").format('x') + 27,
                y: -0.21600000
              }, {
                x: moment("2019-01-01T05:00:00").format('x') + 30,
                y: -0.21800000
...

SCSS

h1 {
  font-size: 24px;
}

JavaScript

/* var x = moment("2019-01-01T05:00:00").format('x') + 1310; */
/* var y = moment("2019-01-01T05:00:00").format('x') + 1610; */
/* var z = moment("2019-01-01T05:00:00").format('x') + 1910; */

/* var x = moment().valueOf() + 1310; */
/* var y = moment().valueOf() + 1690; */
/* var z = moment().valueOf() + 1990; */
/* var x = moment('1.310').format('sSSS'); */
/* var y = moment('1.610').format('sSSS'); */
/* var z = moment('1.910').format('sSSS'); */

console.log(x);
console.log(y);
console.log(z);