nvd3
Version:
A reusable charting library written in d3.js
99 lines (89 loc) • 2.21 kB
HTML
<html>
<head>
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="../bower_components/d3/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
<style>
body {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.ghost {
width: 100%;
height: 100%;
overflow-y: auto;
}
#chart1 {
height: 1000px
}
#chart2, #chart3 {
height: 500px
}
</style>
</head>
<body>
<p> Charts: </p>
<div class="ghost">
<div id="chart1">
<p> Chart 1</p>
<svg></svg>
</div>
<div id="chart2">
<svg></svg>
</div>
<div id="chart3">
<svg></svg>
</div>
<div id="chart4">
<svg></svg>
</div>
</div>
<script>
createChart('#chart1');
createChart('#chart2');
createChart('#chart3');
function createChart(id) {
nv.addGraph(function () {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true);
d3.select(id + ' svg')
.datum(data())
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function data() {
var sin = [],
cos = [];
for (var i = 0; i < 100; i++) {
sin.push({
x: i,
y: Math.sin(i / 10)
});
cos.push({
x: i,
y: .5 * Math.cos(i / 10)
});
}
return [{
values: sin,
key: 'Sine Wave',
color: '#ff7f0e'
}, {
values: cos,
key: 'Cosine Wave',
color: '#2ca02c'
}];
}
}
</script>
</body>
</html>