will-hart/graph.js

## graph.js
// a basic counter and date template for adding new data
var seconds = 0;
var base_date = "2012-10-09 12:57:";

// declare five data arrays
var all_data = [
    [],
    [],
    [],
    [],
    []
];

// build the data arrays with random data
for (i = 0; i < 10; i++) {
    for (j = 0; j < 5; j++) {
        all_data[j].push({
            timeLogged: new Date(base_date + "0" + seconds),
            value: j * 10 + Math.random() * 7
        });
    }
    seconds++;
}

getYMax = function(data) {
    return d3.max(data.map(function(array) {
        return d3.max(array, function(d) {
            return d.value;
        });
    }));
}

// update the chart with new data
updateChart = function (chart, data) {

    // check if we have a full "minute" of data.  If yes just exit
    // rather than screwing around with dates.
    if (seconds >= 59) return;

    // Add a new random variable one second after the last one
    for (i = 0; i < 5; i++) {
        data[i].push({
            timeLogged: new Date(base_date + seconds),
            value: i * 10 + Math.random() * 2 * (i + 1)
        });
    }
    seconds++;

    // remove the old chart and draw a new one
    chart.remove();
    draw(data);
},

// Draw the initial chart
draw = function (data) {

    var colours = ["#0078e7", "#198A34", "#ff158a", "#cfda20", "#202020"],

        margin = {
            top: 80,
            right: 60,
            bottom: 60,
            left: 60
        },

        width = innerWidth - margin.left - margin.right,
        height = innerHeight - margin.top - margin.bottom,

        x = d3.time.scale.utc()
            .domain(d3.extent(data[0], function (d) {
            return d.timeLogged;
        }))
            .range([0, width]),
        y = d3.scale.linear()
            .domain([0, getYMax(data)])
            .range([height, 0]),
        xAxis = d3.svg.axis().scale(x).orient('bottom'),
        yAxis = d3.svg.axis().scale(y).orient('left'),

        line = d3.svg.line()
            .x(function (d) {
            return x(d.timeLogged);
        })
            .y(function (d) {
            return y(d.value);
        }),

        chart = d3.select("body").append("svg:svg")
            .data([data])
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr("viewBox", "0, 0, " + innerWidth + ", " + innerHeight)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    /* draw the x-axis */
    chart.append("g")
        .attr("class", "x_axis")
        .attr("transform", "translate(0, " + height + ")")
        .call(xAxis);

    /* draw the y-axis */
    chart.append("g")
        .attr("class", "y_axis")
        .call(yAxis);

    /* draw the lines */
    for (i = 0; i < 5; i++) {
        chart.append("svg:path")
            .data([all_data[i]])
            .attr("class", "line")
            .attr("fill", "none")
            .attr("stroke", colours[i])
            .attr("stroke-width", 2)
            .attr("d", line);
    }

    // draw the legend at the top of the screen

    for (i = 0; i < 5; i++) {
        // draw the coloured block
        chart.append("svg:rect")
            .attr("x", 25 + 130 * i)
            .attr("y", -46)
            .attr("stroke", colours[i])
            .attr("fill", colours[i])
            .attr("height", 3)
            .attr("width", 22);

        // draw the text
        chart.append("svg:text")
            .attr("x", 50 + 130 * i)
            .attr("y", -40)
            .text("Series " + (i+1));
    }

    /* force the chart to update every half second */
    setTimeout(function () {
        updateChart(chart, data);
    }, 250);
};


// do the drawing :)
draw(all_data);

## index.html
<html>
    <head>
        <script src="d3.js"></script>
        <script src="graph.js"></script>
        <style type="text/css">
            svg {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: -9999;
        }
        .x_axis path, .x_axis line, .y_axis path, .y_axis line {
            fill: none;
            stroke: #000;
            stroke-width: 2px;
        }
        </style>
    </head>
    <body></body>
</html>
	// a basic counter and date template for adding new data
	var seconds = 0;
	var base_date = "2012-10-09 12:57:";

	// declare five data arrays
	var all_data = [
	[],
	[],
	[],
	[],
	[]
	];

	// build the data arrays with random data
	for (i = 0; i < 10; i++) {
	for (j = 0; j < 5; j++) {
	all_data[j].push({
	timeLogged: new Date(base_date + "0" + seconds),
	value: j * 10 + Math.random() * 7
	});
	}
	seconds++;
	}

	getYMax = function(data) {
	return d3.max(data.map(function(array) {
	return d3.max(array, function(d) {
	return d.value;
	});
	}));
	}

	// update the chart with new data
	updateChart = function (chart, data) {

	// check if we have a full "minute" of data. If yes just exit
	// rather than screwing around with dates.
	if (seconds >= 59) return;

	// Add a new random variable one second after the last one
	for (i = 0; i < 5; i++) {
	data[i].push({
	timeLogged: new Date(base_date + seconds),
	value: i * 10 + Math.random() * 2 * (i + 1)
	});
	}
	seconds++;

	// remove the old chart and draw a new one
	chart.remove();
	draw(data);
	},

	// Draw the initial chart
	draw = function (data) {

	var colours = ["#0078e7", "#198A34", "#ff158a", "#cfda20", "#202020"],

	margin = {
	top: 80,
	right: 60,
	bottom: 60,
	left: 60
	},

	width = innerWidth - margin.left - margin.right,
	height = innerHeight - margin.top - margin.bottom,

	x = d3.time.scale.utc()
	.domain(d3.extent(data[0], function (d) {
	return d.timeLogged;
	}))
	.range([0, width]),
	y = d3.scale.linear()
	.domain([0, getYMax(data)])
	.range([height, 0]),
	xAxis = d3.svg.axis().scale(x).orient('bottom'),
	yAxis = d3.svg.axis().scale(y).orient('left'),

	line = d3.svg.line()
	.x(function (d) {
	return x(d.timeLogged);
	})
	.y(function (d) {
	return y(d.value);
	}),

	chart = d3.select("body").append("svg:svg")
	.data([data])
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.attr("viewBox", "0, 0, " + innerWidth + ", " + innerHeight)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	/* draw the x-axis */
	chart.append("g")
	.attr("class", "x_axis")
	.attr("transform", "translate(0, " + height + ")")
	.call(xAxis);

	/* draw the y-axis */
	chart.append("g")
	.attr("class", "y_axis")
	.call(yAxis);

	/* draw the lines */
	for (i = 0; i < 5; i++) {
	chart.append("svg:path")
	.data([all_data[i]])
	.attr("class", "line")
	.attr("fill", "none")
	.attr("stroke", colours[i])
	.attr("stroke-width", 2)
	.attr("d", line);
	}

	// draw the legend at the top of the screen

	for (i = 0; i < 5; i++) {
	// draw the coloured block
	chart.append("svg:rect")
	.attr("x", 25 + 130 * i)
	.attr("y", -46)
	.attr("stroke", colours[i])
	.attr("fill", colours[i])
	.attr("height", 3)
	.attr("width", 22);

	// draw the text
	chart.append("svg:text")
	.attr("x", 50 + 130 * i)
	.attr("y", -40)
	.text("Series " + (i+1));
	}

	/* force the chart to update every half second */
	setTimeout(function () {
	updateChart(chart, data);
	}, 250);
	};


	// do the drawing :)
	draw(all_data);
	<html>
	<head>
	<script src="d3.js"></script>
	<script src="graph.js"></script>
	<style type="text/css">
	svg {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -9999;
	}
	.x_axis path, .x_axis line, .y_axis path, .y_axis line {
	fill: none;
	stroke: #000;
	stroke-width: 2px;
	}
	</style>
	</head>
	<body></body>
	</html>