aboutsummaryrefslogtreecommitdiff
path: root/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/multiBarChart.html
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/multiBarChart.html')
-rwxr-xr-xwqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/multiBarChart.html105
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>