The real time chart is a resuable Javascript component that accepts real time data. The chart's time domain is moving with the passage of time, which means that any data placed in the chart eventually will age out and leave the chart. In addition to the main chart, the component also manages a "focus" window with a viewport (d3.brush) that can moved and sized to view an arbitrary portion of the time series data.
The component adheres to the pattern described in Towards Reusable Chart.
The following options are currently supported:
Future options will include:
Use the component like so:
// create the real time chart
var chart = realTimeChart()
.title("Chart Title")
.yTitle("Y Scale")
.xTitle("X Scale")
.border(true)
.width(600)
.height(290)
.barWidth(1)
.initialData(data);
// invoke the chart
var chartDiv = d3.select("#viewDiv").append("div")
.attr("id", "chartDiv")
.call(chart);
// create new data item and inject into chart
var now = new Date();
var obj = {
value: 50
time: now,
color: "red",
ts: now.getTime(),
interval: timeout
};
// send the datum to the chart
chart.datum(obj);
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Author: Bo Ericsson -->
<title>Real Time Chart</title>
<link rel=stylesheet type=text/css href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" media="all">
<style>
.axis text {
font: 10px sans-serif;
}
.chartTitle {
font-size: 12px;
font-weight: bold;
text-anchor: middle;
}
.axis .title {
font-weight: bold;
text-anchor: middle;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.nav .area {
fill: lightgrey;
stroke-width: 0px;
}
.nav .line {
fill: none;
stroke: darkgrey;
stroke-width: 1px;
}
.viewport {
stroke: grey;
fill: black;
fill-opacity: 0.3;
}
.viewport .extent {
fill: green;
}
.well {
padding-top: 0px;
padding-bottom: 0px;
}
</style>
<body>
<div style="max-width: 600px; max-height: 400px; padding: 10px">
<div class="well">
<h4>D3 Based Real Time Chart
</div>
<div id="viewDiv"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="realTimeChart.js"></script>
<script>
'use strict';
// mean and deviation for time interval
var meanMs = 1000, // milliseconds
dev = 150;
// define time scale
var timeScale = d3.scale.linear()
.domain([300, 1700])
.range([300, 1700])
.clamp(true);
// define value scale
var valueScale = d3.scale.linear()
.domain([0, 1])
.range([30, 95]);
// generate initial data
var normal = d3.random.normal(1000, 150);
var currMs = new Date().getTime() - 300000 - 4000;
var data = d3.range(300).map(function(d, i, arr) {
var value = valueScale(Math.random()); // random data
//var value = Math.round((d % 60) / 60 * 95); // ramp data
var interval = Math.round(timeScale(normal()));
currMs += interval;
var time = new Date(currMs);
var obj = { interval: interval, value: value, time: time, ts: currMs }
return obj;
})
// create the real time chart
var chart = realTimeChart()
.title("Chart Title")
.yTitle("Y Scale")
.xTitle("X Scale")
.border(true)
.width(600)
.height(290)
.barWidth(1)
.initialData(data);
console.log("Version: ", chart.version);
console.dir("Dir++");
console.trace();
console.warn("warn")
// invoke the chart
var chartDiv = d3.select("#viewDiv").append("div")
.attr("id", "chartDiv")
.call(chart);
// alternative invocation
//chart(chartDiv);
// drive data into the chart roughly every second
// in a normal use case, real time data would arrive through the network or some other mechanism
var d = 0;
function dataGenerator() {
var timeout = Math.round(timeScale(normal()));
setTimeout(function() {
// create new data item
var now = new Date();
var obj = {
value: valueScale(Math.random()), // random data
//value: Math.round((d++ % 60) / 60 * 95), // ramp data
time: now,
color: "red",
ts: now.getTime(),
interval: timeout
};
// send the datum to the chart
chart.datum(obj);
// do forever
dataGenerator();
}, timeout);
}
// start the data generator
dataGenerator();
</script>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js