blob42/nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
a118e42ea4
nvd3/examples/scatterWithLegend.html

168 lines
3.6 KiB
HTML
Raw Normal View History

Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
margin: 0;
padding: 0;
}
svg {
overflow: hidden;
}
div {
border: 0;
margin: 0;
}
#offsetDiv {
}
#test1 {
margin: 0;
}
</style>
<body>
<div id="offsetDiv">
<div id="test1" class="chartWrap">
<svg></svg>
</div>
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
Reworked library to remove jquery dependancies renamed nvtooltip.js to tooltip.js and put it into the nv namespace Added a batch file for building on windows.
2012-05-07 12:53:51 +00:00
<script src="../src/tooltip.js"></script>
Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
<script src="../src/models/legend.js"></script>
merged yaxis and axis into 1 implementation, will add top and right oriantations soon
2012-05-17 06:04:33 +00:00
<script src="../src/models/axis.js"></script>
Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
<script src="../src/models/scatter.js"></script>
<script src="../src/models/scatterWithLegend.js"></script>
<script>
//Format A
nv.addGraph({
generate: function() {
Reworked library to remove jquery dependancies renamed nvtooltip.js to tooltip.js and put it into the nv namespace Added a batch file for building on windows.
2012-05-07 12:53:51 +00:00
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
Reworked library to remove jquery dependancies renamed nvtooltip.js to tooltip.js and put it into the nv namespace Added a batch file for building on windows.
2012-05-07 12:53:51 +00:00
var chart = nv.models.scatterWithLegend()
Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
.width(width)
.height(height)
Cleaning up stackedArea code to be consistent with line and scatter
2012-05-28 22:31:26 +00:00
.showDistX(true)
stackedArea chart now uses the scatter overlayed, not the line. Updates to examples, made the X and Y distrivutions on the scatter options, defaulting to off. Some minor changes to the sparklin example
2012-05-27 23:52:28 +00:00
.showDistY(true)
Fixed error with color in scatterWithLegend, and used category10 instea d of category20 in scatterWithLegend example.
2012-05-29 08:12:28 +00:00
.color(d3.scale.category10().range());
Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
//.width(width)
//.height(height)
//.forceX([-4,4])
//.forceY([-4,4])
//.margin({top: 20, right: 10, bottom: 50, left: 80})
//chart.xaxis.tickFormat(d3.format(".02f"))
var svg =d3.select('#test1 svg')
.datum(randomData());
svg.transition().duration(500)
.attr('width', width)
.attr('height', height)
.call(chart)
//.attr('width', wid0th)
//.attr('height', height)
return chart;
},
callback: function(graph) {
graph.dispatch.on('tooltipShow', function(e) {
Reworked library to remove jquery dependancies renamed nvtooltip.js to tooltip.js and put it into the nv namespace Added a batch file for building on windows.
2012-05-07 12:53:51 +00:00
var offsetElement = document.getElementById("test1"),
left = e.pos[0] + offsetElement.offsetLeft,
top = e.pos[1] + offsetElement.offsetTop,
formatter = d3.format(".2f");
Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
/*
var content = '<h3>' + e.series.key + '</h3>' +
'<p>' +
'<span class="value"><span class="label">x:</span><span class="val">' + formatter(e.point.x) + '</span></span><br>' +
'<s0pan class="value"><span class="label">y:</span><span class="val">' + formatter(e.point.y) + '</span></span>' +
'</p>';
nvtooltip.show([left, top], content);
*/
var contentX = '<strong>' + formatter(e.point.x) + '</strong>';
var contentY = '<strong>' + formatter(e.point.y) + '</strong>';
Reworked library to remove jquery dependancies renamed nvtooltip.js to tooltip.js and put it into the nv namespace Added a batch file for building on windows.
2012-05-07 12:53:51 +00:00
var height = nv.utils.windowSize().height - 40;
nv.tooltip.show([left, height - 50], contentX, 'n', 1);
nv.tooltip.show([5, top], contentY, 'w', 1);
Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
});
graph.dispatch.on('tooltipHide', function(e) {
Reworked library to remove jquery dependancies renamed nvtooltip.js to tooltip.js and put it into the nv namespace Added a batch file for building on windows.
2012-05-07 12:53:51 +00:00
nv.tooltip.cleanup();
Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
});
Reworked library to remove jquery dependancies renamed nvtooltip.js to tooltip.js and put it into the nv namespace Added a batch file for building on windows.
2012-05-07 12:53:51 +00:00
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40,
removed the distributions from scatter model to the scatterWithLegend.. making scatter.js perform as best as possible for use as an interactive layer
2012-05-28 06:03:23 +00:00
margin = graph.margin();
Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
if (width < margin.left + margin.right + 20)
width = margin.left + margin.right + 20;
if (height < margin.top + margin.bottom + 20)
height = margin.top + margin.bottom + 20;
graph
.width(width)
.height(height);
d3.select('#test1 svg')
.attr('width', width)
.attr('height', height)
.call(graph);
Reworked library to remove jquery dependancies renamed nvtooltip.js to tooltip.js and put it into the nv namespace Added a batch file for building on windows.
2012-05-07 12:53:51 +00:00
};
Initial public commit, merging files from private repo
2012-03-20 23:43:21 +00:00
}
});
function randomData() {
var data = [],
random = d3.random.normal();
for (i = 0; i < 2; i++) {
data.push({
key: 'Group ' + i,
values: []
});
for (j = 0; j < 100; j++) {
data[i].values.push({x: random(), y: random(), size: Math.random()});
}
}
return data;
}
</script>
Reference in New Issue Copy Permalink