Real-time multi-series time series chart data

forked from simenbrekken's block: Real-time multi-series time series chart data

forked from anonymous's block: Real-time multi-series time series chart data

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

.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>

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 + 100)

var axis = svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(30,' + height + ')')
            .call(x.axis = d3.svg.axis().scale(x).orient('bottom'))
        
				var yaxis = svg.append('g')
            .attr('class', 'y axis')
            .attr('transform', 'translate(30)')
            .call(y.axis = d3.svg.axis().scale(y).orient('left'))
        
        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( 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