2012-08-22 16:20:41 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
|
|
|
|
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
overflow-y:scroll;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
text {
|
|
|
|
|
font: 12px sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#chart1 svg {
|
|
|
|
|
height: 500px;
|
|
|
|
|
min-width: 100px;
|
|
|
|
|
min-height: 100px;
|
|
|
|
|
/*
|
|
|
|
|
margin: 50px;
|
|
|
|
|
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
|
|
|
|
For example width should be =< margin.left + margin.right + 1,
|
|
|
|
|
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
|
|
|
|
*/
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="chart">
|
|
|
|
|
<svg style="height: 500px;"></svg>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="../lib/d3.v2.js"></script>
|
|
|
|
|
<script src="../lib/crossfilter.js"></script>
|
|
|
|
|
<script src="../nv.d3.js"></script>
|
|
|
|
|
<script src="../src/tooltip.js"></script>
|
|
|
|
|
<script src="../src/utils.js"></script>
|
|
|
|
|
<script src="../src/models/legend.js"></script>
|
|
|
|
|
<script src="../src/models/axis.js"></script>
|
|
|
|
|
<script src="../src/models/scatter.js"></script>
|
|
|
|
|
<script src="../src/models/line.js"></script>
|
|
|
|
|
<script src="../src/models/lineWithFocusChart.js"></script>
|
|
|
|
|
<script src="stream_layers.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
extend = function(destination, source) {
|
|
|
|
|
for (var property in source) {
|
2012-08-31 19:49:26 +00:00
|
|
|
if (property in destination) {
|
|
|
|
|
if ( typeof source[property] === "object" &&
|
|
|
|
|
typeof destination[property] === "object") {
|
|
|
|
|
destination[property] = extend(destination[property], source[property]);
|
|
|
|
|
} else {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
destination[property] = source[property];
|
|
|
|
|
};
|
2012-08-22 16:20:41 +00:00
|
|
|
}
|
|
|
|
|
return destination;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
nv.addGraph(function() {
|
|
|
|
|
var chart = nv.models.lineWithFocusChart();
|
|
|
|
|
|
|
|
|
|
chart.xAxis
|
|
|
|
|
.tickFormat(d3.format(',f'));
|
|
|
|
|
chart.x2Axis
|
|
|
|
|
.tickFormat(d3.format(',f'));
|
|
|
|
|
|
|
|
|
|
chart.yAxis
|
|
|
|
|
.tickFormat(d3.format(',.2f'));
|
|
|
|
|
chart.y2Axis
|
|
|
|
|
.tickFormat(d3.format(',.2f'));
|
|
|
|
|
|
2012-08-31 19:49:26 +00:00
|
|
|
var dimension = testCrossfilterData().data;
|
2012-08-22 16:20:41 +00:00
|
|
|
|
|
|
|
|
var data = normalizeData(dimension.top(Infinity),
|
2012-08-31 19:49:26 +00:00
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
name: 'Stream #1',
|
|
|
|
|
key: 'stream1'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'Stream #2',
|
|
|
|
|
key: 'stream2'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'Stream #3',
|
|
|
|
|
key: 'stream3'
|
|
|
|
|
}
|
|
|
|
|
], 'x');
|
|
|
|
|
|
2012-08-22 16:20:41 +00:00
|
|
|
d3.select('#chart svg')
|
|
|
|
|
.datum(data)
|
|
|
|
|
.transition().duration(500)
|
|
|
|
|
.call(chart);
|
|
|
|
|
|
|
|
|
|
nv.utils.windowResize(chart.update);
|
|
|
|
|
|
|
|
|
|
return chart;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function normalizeData(data, series, xAxis)
|
2012-08-31 19:49:26 +00:00
|
|
|
{
|
|
|
|
|
var sort = crossfilter.quicksort.by(function(d) { return d[xAxis]; });
|
|
|
|
|
var sorted = sort(data, 0, data.length);
|
|
|
|
|
|
|
|
|
|
var result = [];
|
|
|
|
|
|
|
|
|
|
series.forEach(function(serie, index)
|
|
|
|
|
{
|
|
|
|
|
result.push({key: serie.name, values: [], color: serie.color});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
data.forEach(function(data, dataIndex)
|
|
|
|
|
{
|
|
|
|
|
series.forEach(function(serie, serieIndex)
|
|
|
|
|
{
|
|
|
|
|
result[serieIndex].values.push({x: data[xAxis], y: data[serie.key]});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return result;
|
|
|
|
|
};
|
2012-08-22 16:20:41 +00:00
|
|
|
|
|
|
|
|
function testCrossfilterData() {
|
|
|
|
|
var data = crossfilter(testData());
|
|
|
|
|
|
2012-08-31 19:49:26 +00:00
|
|
|
try
|
|
|
|
|
{
|
|
|
|
|
data.data = data.dimension(function(d) { return d.y; });
|
|
|
|
|
} catch (e)
|
|
|
|
|
{
|
|
|
|
|
console.log(e.stack);
|
|
|
|
|
}
|
2012-08-22 16:20:41 +00:00
|
|
|
|
|
|
|
|
return data;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function testData() {
|
|
|
|
|
|
|
|
|
|
var data1 = [];
|
|
|
|
|
var data2 = [];
|
|
|
|
|
var data3 = [];
|
|
|
|
|
|
|
|
|
|
stream_layers(3,128,.1).map(function(layer, index) {
|
|
|
|
|
layer.forEach(function(item, i) {
|
2012-08-31 19:49:26 +00:00
|
|
|
var object = { x: item.x };
|
|
|
|
|
object['stream' + (index + 1)] = item.y;
|
|
|
|
|
eval('data' + (index + 1)).push(object);
|
|
|
|
|
});
|
2012-08-22 16:20:41 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var data = extend(data1, data2);
|
|
|
|
|
var result = extend(data, data3);
|
|
|
|
|
|
|
|
|
|
return result;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
