mirror of
https://github.com/gwenhael-le-moine/ledgerrb.git
synced 2025-01-15 15:40:53 +01:00
112 lines
No EOL
3.5 KiB
HTML
112 lines
No EOL
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
|
|
<script src="../build/nv.d3.js"></script>
|
|
|
|
<style>
|
|
text {
|
|
font: 12px sans-serif;
|
|
}
|
|
svg {
|
|
display: block;
|
|
|
|
}
|
|
html, body, svg {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.container > div {
|
|
float: left;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- just make a circle to create the tooltip over -->
|
|
<div class="container" style="left: 200px;">
|
|
<div style="height: 20px; width: 100%; float: left; display: inline-block;"></div>
|
|
<div style="position: relative; margin-top: 10px; margin-left: 10px; margin-bottom: -50px; margin-right: -50px; display: inline-block; width: 300px; height: 300px;">
|
|
<div style="position: absolute; right: 0; bottom: 0; display: inline-block; width: 110px; height: 110px;">
|
|
<svg id="test1">
|
|
<g transform="translate(55, 55)">
|
|
<circle class="tooltip_me" r="50" style="stroke-width: 2px; fill: rgb(148, 103, 189); stroke: rgb(148, 103, 189);"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div style="height: 10px; width: 100%; display: inline-block;"></div>
|
|
<div style="position: relative; margin-top: 20px; margin-left: 20px; margin-bottom: -50px; margin-right: -50px; display: inline-block; width: 300px; height: 400px;">
|
|
<div style="position: absolute; right: 100; bottom: 0; display: inline-block; width: 300px; height: 300px;">
|
|
<svg id="test2">
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var width = 500,
|
|
height = 20;
|
|
|
|
var tooltip = nv.models.tooltip();
|
|
tooltip.duration(0);
|
|
|
|
d3.select('.tooltip_me')
|
|
.on('mouseover', function(d,i) {
|
|
console.log("mouseover", d, i);
|
|
var data = {series: {
|
|
key: "title",
|
|
value: "the value",
|
|
color: "#229922"
|
|
}};
|
|
tooltip.data(data).hidden(false);
|
|
})
|
|
.on('mouseout', function(d,i) {
|
|
console.log("mouseout", d, i);
|
|
tooltip.hidden(true);
|
|
})
|
|
.on('mousemove', function(d,i) {
|
|
console.log("mousemove", d, i);
|
|
tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
});
|
|
|
|
|
|
// we must also test the scatter/line way of getting position
|
|
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
|
|
var chart;
|
|
nv.addGraph(function() {
|
|
chart = nv.models.lineChart()
|
|
.showXAxis(false)
|
|
.showLegend(false)
|
|
.clipVoronoi(false)
|
|
.showVoronoi(true)
|
|
.showYAxis(false);
|
|
d3.select('#test2')
|
|
.datum(sinAndCos())
|
|
.call(chart);
|
|
return chart;
|
|
});
|
|
|
|
function sinAndCos() {
|
|
var cos = [];
|
|
for (var i = 0; i < 5; i++) {
|
|
cos.push({x: i, y: Math.round(.5 * Math.cos(i/10) * 100) / 100});
|
|
}
|
|
return [{
|
|
values: cos,
|
|
key: "Cosine Wave",
|
|
color: "#2ca02c"
|
|
}];
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |