You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.1 KiB
HTML
65 lines
1.1 KiB
HTML
12 years ago
|
<!DOCTYPE html>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||
|
|
<style>
|
||
|
|
|
||
|
|
|
||
|
|
text {
|
||
|
|
font: 10px sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
#chart1 {
|
||
|
|
width: 600px;
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h2>Horizon:</h2>
|
||
|
|
<div><svg id="chart1"></svg></div>
|
||
|
|
|
||
|
|
<script src="../lib/d3.v2.js"></script>
|
||
|
|
<script src="../lib/horizon.js"></script>
|
||
|
|
<script src="../nv.d3.js"></script>
|
||
|
|
<script src="../src/utils.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
//TODO: create a nv.models.horizonChart model
|
||
|
|
// (if need be an nv.models.horizon model as well, but might get away with jsut using d3.horizon)
|
||
|
|
// the horizontChart model should have a "tooltip" like functionality that shows a point over the
|
||
|
|
// current value based on the mouse's x position
|
||
|
|
|
||
|
|
nv.addGraph(function() {
|
||
|
|
var chart = d3.horizon()
|
||
|
|
.width(600)
|
||
|
|
.height(60)
|
||
|
|
.bands(2)
|
||
|
|
//.bands(1)
|
||
|
|
.mode("offset")
|
||
|
|
//.mode("mirror")
|
||
|
|
.interpolate("basis");
|
||
|
|
|
||
|
|
var svg = d3.select('#chart1');
|
||
|
|
|
||
|
|
svg.datum(sine()).call(chart);
|
||
|
|
|
||
|
|
return chart;
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function sine() {
|
||
|
|
var sin = [];
|
||
|
|
|
||
|
|
for (var i = 0; i < 200; i++) {
|
||
|
|
sin.push([ i, Math.sin(i/10) + .2 ]);
|
||
|
|
}
|
||
|
|
|
||
|
|
return sin;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|