1 files changed, 116 insertions, 0 deletions
diff --git a/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/bulletChart.html b/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/bulletChart.html
new file mode 100755
index 00000000..7c5cd984
--- /dev/null
+++ b/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/bulletChart.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
+<style>
+
+body {
+  overflow-y:scroll;
+  font-family: Arial;
+}
+
+</style>
+<body>
+
+<br> <br> <br> <br> <br>
+
+Normal Bullet Chart 
+<div class="gallery with-transitions" id="chart"></div>
+
+Bullet Chart with Custom Labels
+<div class='gallery with-transitions' id='chart2'></div>
+
+<script src="../lib/d3.v3.js"></script>
+<script src="../nv.d3.js"></script>
+<script src="../src/utils.js"></script>
+<script src="../src/models/bullet.js"></script>
+<script src="../src/models/bulletChart.js"></script>
+<script>
+
+var width = 960,
+    height = 80,
+    margin = {top: 5, right: 40, bottom: 20, left: 120};
+
+var chart = nv.models.bulletChart()
+    .width(width - margin.right - margin.left)
+    .height(height - margin.top - margin.bottom);
+
+var chart2 = nv.models.bulletChart()
+    .width(width - margin.right - margin.left)
+    .height(height - margin.top - margin.bottom);
+
+  data = [
+  {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220],"markers":[250]}
+  /*
+  //TODO: fix the tooltip offset if multiple
+  ,
+  {"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21],"markers":[26]},
+  {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100],"markers":[550]},
+  {"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000],"markers":[1000]},
+  {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
+  */
+];
+
+dataWithLabels = [
+  {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220],"markers":[250],
+  "rangeLabels":['Maximum Inventory','Average Inventory','Minimum Inventory'], "measureLabels":['Current Inventory'], "markerLabels":['Target Inventory'] }
+];
+
+  //TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element
+  var vis = d3.select("#chart").selectAll("svg")
+      .data(data)
+    .enter().append("svg")
+      .attr("class", "bullet nvd3")
+      .attr("width", width)
+      .attr("height", height);
+
+  vis
+      .transition()
+      .duration(1000)
+      .call(chart);
+
+
+  var vis2 = d3.select("#chart2").selectAll("svg")
+    .data(dataWithLabels)
+    .enter().append('svg')
+      .attr('class',"bullet nvd3")
+      .attr("width",width)
+      .attr("height",height);
+
+      vis2.transition().duration(1000).call(chart2);
+
+
+  window.transition = function() {
+    vis.datum(randomize)
+      .transition()
+      .duration(1000)
+      .call(chart);
+
+    vis2.datum(randomize)
+      .transition()
+      .duration(1000)
+      .call(chart2);
+  };
+
+
+function randomize(d) {
+  if (!d.randomizer) d.randomizer = randomizer(d);
+  d.ranges = d.ranges.map(d.randomizer);
+  d.markers = d.markers.map(d.randomizer);
+  d.measures = d.measures.map(d.randomizer);
+  return d;
+}
+
+function randomizer(d) {
+  var k = d3.max(d.ranges) * .2;
+  return function(d) {
+    return Math.max(0, d + k * (Math.random() - .5));
+  };
+}
+
+
+
+
+d3.select('body').on('click', window.transition);
+
+
+</script>