1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
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>