diff options
Diffstat (limited to 'wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/scatterPlusLineChart.html')
-rwxr-xr-x | wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/scatterPlusLineChart.html | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/scatterPlusLineChart.html b/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/scatterPlusLineChart.html new file mode 100755 index 00000000..d09cc9a3 --- /dev/null +++ b/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/scatterPlusLineChart.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<link href="../src/nv.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 { + margin-left: 100px; + margin-top: 100px; +} +*/ + + +#test1 { + margin: 0; +} + +#test1 svg { + height: 500px; +} + +</style> + +<body class='with-3d-shadow with-transitions'> + +<div id="offsetDiv"> + <div id="test1" class="chartWrap"> + <svg></svg> + </div> +</div> + +<script src="../lib/d3.v3.js"></script> +<script src="../lib/fisheye.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/distribution.js"></script> +<script src="../src/models/scatter.js"></script> +<script src="../src/models/scatterPlusLineChart.js"></script> +<script> + + + +//Format A +var chart; +nv.addGraph(function() { + chart = nv.models.scatterPlusLineChart() + .showDistX(true) + .showDistY(true) + .transitionDuration(300) + .color(d3.scale.category10().range()); + + chart.xAxis.tickFormat(d3.format('.02f')) + chart.yAxis.tickFormat(d3.format('.02f')) + + d3.select('#test1 svg') + .datum(nv.log(randomData(4,40))) + .call(chart); + + nv.utils.windowResize(chart.update); + + chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); + + return chart; +}); + + +function randomData(groups, points) { //# groups,# points per group + var data = [], + shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'], + random = d3.random.normal(); + + for (i = 0; i < groups; i++) { + data.push({ + key: 'Group ' + i, + values: [], + slope: Math.random() - .01, + intercept: Math.random() - .5 + }); + + for (j = 0; j < points; j++) { + data[i].values.push({ + x: random(), + y: random(), + size: Math.random(), + shape: shapes[j % 6] + }); + } + } + + return data; +} + + + +</script> |