D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
hamtolchu
Full window
Github gist
Real-time multi-series time series chart data
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .graph .axis { stroke-width: 1; } .graph .axis .tick line { stroke: black; } .graph .axis .tick text { fill: black; font-size: 0.7em; } .graph .axis .domain { fill: none; stroke: black; } .graph .group { fill: none; stroke: black; stroke-width: 1.5; } </style> </head> <body> <div class="graph"></div> <script src="https://d3js.org/d3.v3.min.js"></script> <script> var limit = 60 * 1, duration = 750, now = new Date(Date.now() - duration) var width = 500, height = 200 var groups = { current: { value: 0, color: 'orange', data: d3.range(limit).map(function() { return 0 }) }, target: { value: 0, color: 'green', data: d3.range(limit).map(function() { return 0 }) }, output: { value: 0, color: 'grey', data: d3.range(limit).map(function() { return 0 }) } } var x = d3.time.scale() .domain([now - (limit - 2), now - duration]) .range([0, width]) var y = d3.scale.linear() .domain([0, 100]) .range([height, 0]) var line = d3.svg.line() .interpolate('basis') .x(function(d, i) { return x(now - (limit - 1 - i) * duration) }) .y(function(d) { return y(d) }) var svg = d3.select('.graph').append('svg') .attr('class', 'chart') .attr('width', width) .attr('height', height + 50) var axis = svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(x.axis = d3.svg.axis().scale(x).orient('bottom')) var paths = svg.append('g') for (var name in groups) { var group = groups[name] group.path = paths.append('path') .data([group.data]) .attr('class', name + ' group') .style('stroke', group.color) } function tick() { now = new Date() // Add new values for (var name in groups) { var group = groups[name] //group.data.push(group.value) // Real values arrive at irregular intervals group.data.push(20 + Math.random() * 100) group.path.attr('d', line) } // Shift domain x.domain([now - (limit - 2) * duration, now - duration]) // Slide x-axis left axis.transition() .duration(duration) .ease('linear') .call(x.axis) // Slide paths left paths.attr('transform', null) .transition() .duration(duration) .ease('linear') .attr('transform', 'translate(' + x(now - (limit - 1) * duration) + ')') .each('end', tick) // Remove oldest data point from each group for (var name in groups) { var group = groups[name] group.data.shift() } } tick() </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js