blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add ability to provide custom labels to bullet chart.

Browse Source
master
Al Tenhundfeld 11 years ago
parent 9227616db2
commit 3b7217b928
2 changed files with 108 additions and 7 deletions
Show Stats Download Patch File Download Diff File

95
examples/bulletChartWithLabels.html
Unescape Escape View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
</style>
<body>
<br> <br> <br> <br> <br>
<div class="gallery" id="chart"></div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.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);
data = [
{"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: 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]}
*/
];
//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);
window.transition = function() {
vis.datum(randomize);
vis
.transition()
.duration(1000)
.call(chart);
};
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>

20
src/models/bullet.js
Unescape Escape View File

@ -15,6 +15,9 @@ nv.models.bullet = function() {
, ranges = function(d) { return d.ranges }
, markers = function(d) { return d.markers }
, measures = function(d) { return d.measures }
, rangeLabels = function(d) { return d.rangeLabels ? d.rangeLabels : [] }
, markerLabels = function(d) { return d.markerLabels ? d.markerLabels : [] }
, measureLabels = function(d) { return d.measureLabels ? d.measureLabels : [] }
, forceX = [0] // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
, width = 380
, height = 30
@ -34,7 +37,10 @@ nv.models.bullet = function() {
var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
markerz = markers.call(this, d, i).slice().sort(d3.descending),
measurez = measures.call(this, d, i).slice().sort(d3.descending);
measurez = measures.call(this, d, i).slice().sort(d3.descending),
rangeLabelz = rangeLabels.call(this, d, i).slice(),
markerLabelz = markerLabels.call(this, d, i).slice(),
measureLabelz = measureLabels.call(this, d, i).slice();
//------------------------------------------------------------
@ -141,14 +147,14 @@ nv.models.bullet = function() {
.on('mouseover', function() {
dispatch.elementMouseover({
value: measurez[0],
label: 'Current',
label: measureLabelz[0] ? measureLabelz[0] : 'Current',
pos: [x1(measurez[0]), availableHeight/2]
})
})
.on('mouseout', function() {
dispatch.elementMouseout({
value: measurez[0],
label: 'Current'
label: measureLabelz[0] ? measureLabelz[0] : 'Current'
})
})
@ -160,14 +166,14 @@ nv.models.bullet = function() {
.on('mouseover', function() {
dispatch.elementMouseover({
value: markerz[0],
label: 'Previous',
label: markerLabelz[0] ? markerLabelz[0] : 'Previous',
pos: [x1(markerz[0]), availableHeight/2]
})
})
.on('mouseout', function() {
dispatch.elementMouseout({
value: markerz[0],
label: 'Previous'
label: markerLabelz[0] ? markerLabelz[0] : 'Previous'
})
});
} else {
@ -177,7 +183,7 @@ nv.models.bullet = function() {
wrap.selectAll('.nv-range')
.on('mouseover', function(d,i) {
var label = !i ? "Maximum" : i == 1 ? "Mean" : "Minimum";
var label = rangeLabelz[i] ? rangeLabelz[i] : !i ? "Maximum" : i == 1 ? "Mean" : "Minimum";
dispatch.elementMouseover({
value: d,
@ -186,7 +192,7 @@ nv.models.bullet = function() {
})
})
.on('mouseout', function(d,i) {
var label = !i ? "Maximum" : i == 1 ? "Mean" : "Minimum";
var label = rangeLabelz[i] ? rangeLabelz[i] : !i ? "Maximum" : i == 1 ? "Mean" : "Minimum";
dispatch.elementMouseout({
value: d,

Write Preview
Loading…
Cancel
Save