| <!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> |
