D3 Examples - Bullet Charts with automatic updating

Bullet Charts with automatic updating

This is a Bullet Chart example that allows the user to update the chart automatically by updating the bulletdata2.json file. This (online) example won't change, but if you download the file and read in conjunction with d3noob.org you will be able to impliment your own dynamic chart with it.

This is a follow on from the example that updated the charts with random data.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  padding-top: 40px;
  position: relative;
  width: 800px;
}
​
.bullet { font: 10px sans-serif; }
.bullet .marker { stroke: #000; stroke-width: 2px; }
.bullet .tick line { stroke: #666; stroke-width: .5px; }
.bullet .range.s0 { fill: #eee; }
.bullet .range.s1 { fill: #ddd; }
.bullet .range.s2 { fill: #ccc; }
.bullet .measure.s0 { fill: steelblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }
​
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="bullet.js"></script>
<script>
​
var margin = {top: 5, right: 40, bottom: 20, left: 120},
    width = 800 - margin.left - margin.right,
    height = 50 - margin.top - margin.bottom;
​
var chart = d3.bullet()
    .width(width)
    .height(height);
​
d3.json("bulletdata2.json", function(error, data) {
  var svg = d3.select("body").selectAll("svg")
      .data(data)
    .enter().append("svg")
      .attr("class", "bullet")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(chart);
​
  var title = svg.append("g")
      .style("text-anchor", "end")
      .attr("transform", "translate(-6," + height / 2 + ")");
​
  title.append("text")
      .attr("class", "title")
      .text(function(d) { return d.title; });
​
  title.append("text")
      .attr("class", "subtitle")
      .attr("dy", "1em")
      .text(function(d) { return d.subtitle; });
​
  setInterval(function() {
    updateData();
    }, 1000);
​
});
​
function updateData() {
  d3.json("bulletdata2.json", function(error, data) {
        d3.select("body").selectAll("svg")
            .datum(function (d, i) {
                d.ranges = data[i].ranges;
                d.measures = data[i].measures;
                d.markers = data[i].markers;
                return d;
            })
            .call(chart.duration(1000));
    });
}
​
</script>
</body>
    