<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="../build/nv.d3.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script> <script src="../build/nv.d3.js"></script> <style> text { font: 12px sans-serif; } svg { display: block; } html, body, svg { margin: 0px; padding: 0px; height: 100%; width: 100%; } </style> </head> <body> 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> 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],"markerLines":[270]}, {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100],"markers":[550], "markerLines":[530]}, {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4], "markerLines":[3.8]} ]; dataWithLabels = [{ "title":"Revenue", "subtitle":"US$, in thousands", "ranges":[150,225,300], "measures":[220], "markers":[250, 100], "markerLines":[240, 120], "markerLabels":['Target Inventory', 'Low Inventory'], "markerLineLabels":['Break even Inventory', 'Threshold Inventory'], "rangeLabels":['Maximum Inventory','Average Inventory','Minimum Inventory'], "measureLabels":['Current 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.markerLines = d.markerLines.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> </body> </html>