diff options
Diffstat (limited to 'wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/multiBarChart.html')
-rwxr-xr-x | wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/multiBarChart.html | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/multiBarChart.html b/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/multiBarChart.html new file mode 100755 index 00000000..55e30102 --- /dev/null +++ b/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/multiBarChart.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> + +<style> + +body { + overflow-y:scroll; +} + +text { + font: 12px sans-serif; +} + +#chart1 { + height: 500px; + margin: 10px; + min-width: 100px; + min-height: 100px; +/* + Minimum height and width is a good idea to prevent negative SVG dimensions... + For example width should be =< margin.left + margin.right + 1, + of course 1 pixel for the entire chart would not be very useful, BUT should not have errors +*/ +} + +</style> +<body> + + <div id="chart1" class='with-3d-shadow with-transitions'> + <svg></svg> + </div> + +<script src="../lib/d3.v3.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/multiBar.js"></script> +<script src="../src/models/multiBarChart.js"></script> +<script src="stream_layers.js"></script> +<script> + +var test_data = stream_layers(3,10+Math.random()*100,.1).map(function(data, i) { +//var test_data = stream_layers(3,1,.1).map(function(data, i) { //for testing single data point + return { + key: 'Stream' + i, + values: data + }; +}); + +console.log('td',test_data); + +var negative_test_data = new d3.range(0,3).map(function(d,i) { return { + key: 'Stream' + i, + values: new d3.range(0,11).map( function(f,j) { + return { + y: 10 + Math.random()*100 * (Math.floor(Math.random()*100)%2 ? 1 : -1), + x: j + } + }) + }; +}); + +var chart; +nv.addGraph(function() { + chart = nv.models.multiBarChart() + .barColor(d3.scale.category20().range()) + .margin({bottom: 100}) + .transitionDuration(300) + .delay(0) + .rotateLabels(45) + .groupSpacing(0.1) + ; + + chart.multibar + .hideable(true); + + chart.reduceXTicks(false).staggerLabels(true); + + chart.xAxis + .axisLabel("Current Index") + .showMaxMin(true) + .tickFormat(d3.format(',.6f')); + + chart.yAxis + .tickFormat(d3.format(',.1f')); + + d3.select('#chart1 svg') + .datum(negative_test_data) + .call(chart); + + nv.utils.windowResize(chart.update); + + chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); + + return chart; +}); + + + + +</script> |