diff options
Diffstat (limited to 'wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/bulletChart.html')
-rwxr-xr-x | wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/bulletChart.html | 116 |
1 files changed, 0 insertions, 116 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 deleted file mode 100755 index 7c5cd984..00000000 --- a/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/bulletChart.html +++ /dev/null @@ -1,116 +0,0 @@ -<!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> |