RubyGems - nvd3-rails - Versions diffs - 0.0.1 - Mend

nvd3-rails 0.0.1

Files changed (167) hide show

data/vendor/assets/javascripts/nvd3/examples/lineTimeSeries.html ADDED

@@ -0,0 +1,142 @@
+<!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;
+}
+svg {
+  display: block;
+  border: grey dotted 1px;
+}
+#chart1 svg {
+  height: 500px;
+  min-width: 100px;
+  min-height: 100px;
+/*
+  margin: 50px;
+  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
+*/
+}
+.nvd3 .nv-groups .nv-point {
+  transition: stroke-width 100ms linear, stroke-opacity 100ms linear;
+  -moz-transition: stroke-width 100ms linear, stroke-opacity 100ms linear;
+  -webkit-transition: stroke-width 100ms linear, stroke-opacity 100ms linear;
+}
+.nvtooltip {
+  transition: opacity 100ms linear;
+  -moz-transition: opacity 100ms linear;
+  -webkit-transition: opacity 100ms linear;
+  transition-delay: 100ms;
+  -moz-transition-delay: 100ms;
+  -webkit-transition-delay: 100ms;
+  padding: 2px;
+  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
+  -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
+  box-shadow: 2px 2px 4px rgba(0,0,0,.5);
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+.nvtooltip h3 {
+  font-size: 10pt;
+}
+.nvtooltip p {
+  font-size: 10pt;
+}
+</style>
+<body>
+  <div id="chart1">
+    <svg style="height: 240px; width:500px;"></svg>
+  </div>
+<script src="../lib/d3.v2.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/scatter.js"></script>
+<script src="../src/models/line.js"></script>
+<script src="../src/models/lineTimeSeriesChart.js"></script>
+<script>
+// Wrapping in nv.addGraph allows for '0 timeout render', stors rendered charts in nv.graphs, and may do more in the future... it's NOT required
+nv.addGraph(function() {
+  var chart = nv.models.lineTimeSeriesChart();
+//  chart
+//      .x(function(d,i) { return i })
+//  chart.xAxis // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the partent chart, so need to chain separately
+//      .tickFormat(d3.format(',.1f'));
+  chart.yAxis
+      .axisLabel('Voltage (v)')
+      .tickFormat(d3.format(',.2f'));
+  d3.select('#chart1 svg')
+      //.datum([]) //for testing noData
+      .datum(sinAndCos())
+    .transition().duration(500)
+      .call(chart);
+  //TODO: Figure out a good way to do this automatically
+  nv.utils.windowResize(chart.update);
+  //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
+  return chart;
+});
+(new Date).getTime()
+function sinAndCos() {
+  var sin = [],
+      cos = [];
+  var now = Math.round((new Date).getTime()),
+      dur = 24 * 3600 * 1000,
+      step = dur / 100;
+  for (var i = now - dur, j = 1; i < now; i += step, j += 1) {
+    sin.push({x: i, y: j%10==0 ? null : Math.sin(i/(10*step)) }); //the nulls are to show how defined works
+    cos.push({x: i, y: .5 * Math.cos(i/(10*step))});
+  }
+  return [
+    {
+      area: true,
+      values: sin,
+      key: "Sine Wave",
+      color: "#ff7f0e"
+    },
+    {
+      values: cos,
+      key: "Cosine Wave",
+      color: "#2ca02c"
+    }
+  ];
+}
+</script>

data/vendor/assets/javascripts/nvd3/examples/lineWithFisheyeChart.html ADDED

@@ -0,0 +1,101 @@
+<!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;
+}
+svg {
+  display: block;
+}
+#chart1 svg {
+  height: 500px;
+  min-width: 100px;
+  min-height: 100px;
+/*
+  margin: 50px;
+  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">
+    <svg style="height: 500px;"></svg>
+  </div>
+<script src="../lib/d3.v2.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/scatter.js"></script>
+<script src="../src/models/lineWithFisheye.js"></script>
+<script src="../src/models/lineWithFisheyeChart.js"></script>
+<script>
+// Wrapping in nv.addGraph allows for '0 timeout render', stors rendered charts in nv.graphs, and may do more in the future... it's NOT required
+nv.addGraph(function() {
+  var chart = nv.models.lineChart();
+  chart.xAxis // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
+      .tickFormat(d3.format(',r'));
+  chart.yAxis
+      .axisLabel('Voltage (v)')
+      .tickFormat(d3.format(',.2f'));
+  d3.select('#chart1 svg')
+      .datum(sinAndCos())
+    .transition().duration(500)
+      .call(chart);
+  //TODO: Figure out a good way to do this automatically
+  nv.utils.windowResize(chart.update);
+  //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
+  return chart;
+});
+function sinAndCos() {
+  var sin = [],
+      cos = [];
+  for (var i = 0; i < 200; i++) {
+    sin.push({x: i, y: Math.sin(i/2)});
+    cos.push({x: i, y: .5 * Math.cos(i)});
+  }
+  return [
+    {
+      values: sin,
+      key: "Sine Wave",
+      color: "#ff7f0e"
+    },
+    {
+      values: cos,
+      key: "Cosine Wave",
+      color: "#2ca02c"
+    }
+  ];
+}
+</script>

data/vendor/assets/javascripts/nvd3/examples/lineWithFocusChart.html ADDED

@@ -0,0 +1,87 @@
+<!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;
+}
+svg {
+  display: block;
+}
+#chart1 svg {
+  height: 500px;
+  min-width: 100px;
+  min-height: 100px;
+/*
+  margin: 50px;
+  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="chart">
+    <svg style="height: 500px;"></svg>
+  </div>
+<script src="../lib/d3.v2.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/scatter.js"></script>
+<script src="../src/models/line.js"></script>
+<script src="../src/models/lineWithFocusChart.js"></script>
+<script src="stream_layers.js"></script>
+<script>
+nv.addGraph(function() {
+  var chart = nv.models.lineWithFocusChart();
+  chart.xAxis
+      .tickFormat(d3.format(',f'));
+  chart.x2Axis
+      .tickFormat(d3.format(',f'));
+  chart.yAxis
+      .tickFormat(d3.format(',.2f'));
+  chart.y2Axis
+      .tickFormat(d3.format(',.2f'));
+  d3.select('#chart svg')
+      .datum(testData())
+    .transition().duration(500)
+      .call(chart);
+  nv.utils.windowResize(chart.update);
+  return chart;
+});
+function testData() {
+  return stream_layers(3,128,.1).map(function(data, i) {
+    return {
+      key: 'Stream' + i,
+      values: data
+    };
+  });
+}
+</script>

data/vendor/assets/javascripts/nvd3/examples/multiBar.html ADDED

@@ -0,0 +1,92 @@
+<!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;
+}
+</style>
+<body>
+  <div id="test1">
+    <svg></svg>
+  </div>
+<script src="../lib/d3.v2.js"></script>
+<script src="../nv.d3.js"></script>
+<script src="../src/tooltip.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="stream_layers.js"></script>
+<script>
+  //var test_data = stream_layers(3,128,.1).map(function(data, i) {
+  var test_data = stream_layers(3,128,.1).map(function(data, i) {
+    return {
+      key: 'Stream' + i,
+      values: data
+    };
+  });
+nv.addGraph({
+  generate: function() {
+      var width = nv.utils.windowSize().width - 40,
+      height = nv.utils.windowSize().height - 40;
+      var chart = nv.models.multiBar()
+                .width(width)
+                .height(height)
+                .stacked(true)
+    var svg = d3.select('#test1 svg')
+      .attr('width', width)
+      .attr('height', height)
+      .datum(test_data);
+    svg.transition().duration(500).call(chart);
+    return chart;
+  },
+  callback: function(graph) {
+    window.onresize = function() {
+    var width = nv.utils.windowSize().width - 40,
+        height = nv.utils.windowSize().height - 40,
+        margin = graph.margin();
+      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);
+      };
+  }
+});
+</script>

data/vendor/assets/javascripts/nvd3/examples/multiBarChart.html ADDED

@@ -0,0 +1,93 @@
+<!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">
+    <svg></svg>
+  </div>
+<script src="../lib/d3.v2.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,10).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());
+    chart.xAxis
+        .showMaxMin(true)
+        .tickFormat(d3.format(',f'));
+    chart.yAxis
+        .tickFormat(d3.format(',.1f'));
+    d3.select('#chart1 svg')
+        .datum(negative_test_data)
+      .transition().duration(500).call(chart);
+    nv.utils.windowResize(chart.update);
+    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
+    return chart;
+});
+</script>