D3 Examples - real time gauge

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
  <link rel="stylesheet" href="style.css">
  <style>
    body { margin:0; padding: 30px; position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  
  
  
    <div class="col-md-6">
​
      <div class="gauge">
        <div class="guage-info">
            <h3 class="gauge-title"><span class="guage-title-em">Clicks</span> this year</h3>
            <small class="gauge-text gauge-text-sm">Compared to last year</small>
            <h1 class="gauge-stats">
              <span class="gauge-stats-value">120</span>
            </h1>
            <p class="gauge-delta">
              <i class="gauge-delta-icon"></i>
              <span class="gauge-delta-value">1.420 (+12%)</span>
            </p>
        </div>
    
        <div class="gauge-chart js-sparkline"></div>
      </div>
    
    </div>
​
​
  
  
  <script>
​
 var data = [
  {x: 10, y: 10, z: 10},
  {x: 10, y: 10, z: 10},
  {x: 10, y: 10, z: 10},
  {x: 10, y: 10, z: 10},
  {x: 10, y: 10, z: 10},
  {x: 10, y: 10, z: 10},
];
​
var width = 200;
var height = 100;
var globalX = 0;
var duration = 500;
var step = 10;
var chart = d3.select('.js-sparkline')
  .append('svg')
    .attr('width', width + 10)
    .attr('height', height + 10);
​
var x = d3.scaleLinear().domain([0, width]).range([0, width]);
var y = d3.scaleLinear().domain([0, height]).range([height, 0]);
​
var defs = chart.append('defs');
​
var gradient = defs.append("linearGradient")
   .attr("id", "areaGradient")
   .attr("x1", "100%")
   .attr("x2", "100%")
   .attr("y1", "0%")
   .attr("y2", "100%");
​
gradient.append("stop")
   .attr('class', 'start')
   .attr("offset", "0%")
   .attr("stop-color", "#5b85c9")
   .attr("stop-opacity", 1);
​
gradient.append("stop")
   .attr('class', 'end')
   .attr("offset", "100%")
   .attr("stop-color", "#5b85c9")
   .attr("stop-opacity", 0);
​
var line = d3.line()
  .x(d => x(d.x))
  .y(d => y(d.y))
  .curve(d3.curveCatmullRom.alpha(0.5));
​
var targetLine = d3.line()
    .x(d => x(d.x))
    .y(d => y(d.z))
    .curve(d3.curveCatmullRom.alpha(0.5));
    
var areaLine = d3.area()
  .x(d => x(d.x))
  .y0(height)
  .y1(d => y(d.y));
​
// Append the holder for line chart and fill area
var path = chart.append('path');
var targetPath = chart.append('path');
var areaPath = chart.append('path');
​
var rand = (min, max) => Math.random() * (max - min) + min;
​
// Draw
function draw(value, target) {
    var point = {
        x: globalX,
        y: value,
        z: target,
    };
    
    data.push(point);
    globalX += step;
    
    // Draw new line
    path.datum(data)
        .attr('class', 'line')
        .attr('d', line);
        
    targetPath.datum(data)
        .attr('class', 'line-default')
        .attr('d', targetLine);
        
    areaPath.datum(data)
        .attr('class', 'area')
        .attr('fill', 'url(#areaGradient)')
        .attr('d', areaLine);
​
    // Shift the chart left
    if (globalX > width) {
      x.domain([globalX - (width - step), globalX]);
    }
​
    path.attr('transform', null)
        .transition()
        .duration(duration)
        .attr('transform', 'translate(' + x(globalX - max) + ')');
​
    targetPath.attr('transform', null)
        .transition()
        .duration(duration)
        .attr('transform', 'translate(' + x(globalX - max) + ')');
  
  areaPath.attr('transform', null)
        .transition()
        .duration(duration)
        .attr('transform', 'translate(' + x(globalX - max) + ')');
        
    if (data.length > 50) data.shift();
}
​
​
setInterval(function() {
  console.log('adding new value');
  draw(rand(50, 100), rand(40, 80));
}, 1000);
​
// (function() {
//       var data = document.getElementById("fileData");
//       var conn = new WebSocket("ws://{{.Host}}/ws");
//       conn.onclose = function(evt) {
//           console.log('Connection closed');
//       }
//       conn.onmessage = function(evt) {
//           draw(JSON.parse(evt.data).value)
//       }
//   })();
​
  </script>
</body>
​
    