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

Issue #68 updated multiBarChart model to standard format

Browse Source
This commit is contained in:
Bob Monteverde 2012-08-17 22:51:06 -04:00
parent cac81e7405
commit 0ef2908ffc
4 changed files with 182 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
nv.d3.js
View File

@ -3425,8 +3425,6 @@ nv.models.lineChart = function() {
gEnter.append('g').attr('class', 'nv-linesWrap');
gEnter.append('g').attr('class', 'nv-legendWrap');
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//------------------------------------------------------------
@ -3452,6 +3450,8 @@ nv.models.lineChart = function() {
//------------------------------------------------------------
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//------------------------------------------------------------
// Main Chart Component(s)
@ -4846,38 +4846,54 @@ nv.models.multiBarChart = function() {
// Public Variables with Default Settings
//------------------------------------------------------------
var margin = {top: 30, right: 20, bottom: 50, left: 60},
width = null,
height = null,
color = nv.utils.defaultColor(),
showControls = true,
showLegend = true,
reduceXTicks = true, // if false a tick will show for every data point
rotateLabels = 0,
tooltips = true,
tooltip = function(key, x, y, e, graph) {
var multibar = nv.models.multiBar()
, xAxis = nv.models.axis()
, yAxis = nv.models.axis()
, legend = nv.models.legend()
, controls = nv.models.legend()
;
var margin = {top: 30, right: 20, bottom: 50, left: 60}
, width = null
, height = null
, color = nv.utils.defaultColor()
, showControls = true
, showLegend = true
, reduceXTicks = true // if false a tick will show for every data point
, rotateLabels = 0
, tooltips = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' on ' + x + '</p>'
},
x, y, //can be accessed via chart.multibar.[x/y]Scale()
noData = "No Data Available."
;
}
, x //can be accessed via chart.xScale()
, y //can be accessed via chart.yScale()
, noData = "No Data Available."
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;
multibar
.stacked(false)
;
xAxis
.orient('bottom')
.tickPadding(5)
.highlightZero(false)
.showMaxMin(false)
.tickFormat(function(d) { return d })
;
yAxis
.orient('left')
.tickFormat(d3.format(',.1f'))
;
//============================================================
//============================================================
// Private Variables
//------------------------------------------------------------
var multibar = nv.models.multiBar().stacked(false),
xAxis = nv.models.axis().orient('bottom').highlightZero(false).showMaxMin(false), //TODO: see why showMaxMin(false) causes no ticks to be shown on x axis
yAxis = nv.models.axis().orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
xAxis.tickFormat(function(d) { return d });
yAxis.tickFormat(d3.format(',.1f'));
var showTooltip = function(e, offsetElement) {
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
top = e.pos[1] + ( offsetElement.offsetTop || 0),
@ -4888,6 +4904,8 @@ nv.models.multiBarChart = function() {
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
};
//============================================================
function chart(selection) {
selection.each(function(data) {
@ -4901,7 +4919,7 @@ nv.models.multiBarChart = function() {
//------------------------------------------------------------
// Display No Data message if there's nothing to show.
// Display noData message if there's nothing to show.
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
container.append('text')
@ -4919,13 +4937,21 @@ nv.models.multiBarChart = function() {
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Scales
x = multibar.xScale();
y = multibar.yScale();
//------------------------------------------------------------
//------------------------------------------------------------
// Setup containers and skeleton of chart
var wrap = container.selectAll('g.nv-wrap.nv-multiBarWithLegend').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarWithLegend').append('g');
var g = wrap.select('g');
gEnter.append('g').attr('class', 'nv-x nv-axis');
gEnter.append('g').attr('class', 'nv-y nv-axis');
@ -4933,10 +4959,11 @@ nv.models.multiBarChart = function() {
gEnter.append('g').attr('class', 'nv-legendWrap');
gEnter.append('g').attr('class', 'nv-controlsWrap');
//------------------------------------------------------------
var g = wrap.select('g');
//------------------------------------------------------------
// Legend
if (showLegend) {
legend.width(availableWidth / 2);
@ -4955,15 +4982,11 @@ nv.models.multiBarChart = function() {
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
}
multibar
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }))
//------------------------------------------------------------
//------------------------------------------------------------
// Controls
if (showControls) {
var controlsData = [
@ -4978,16 +5001,33 @@ nv.models.multiBarChart = function() {
.call(controls);
}
//------------------------------------------------------------
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//------------------------------------------------------------
// Main Chart Component(s)
multibar
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }))
var barsWrap = g.select('.nv-barsWrap')
.datum(data.filter(function(d) { return !d.disabled }))
d3.transition(barsWrap).call(multibar);
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Axes
xAxis
.scale(x)
@ -5027,6 +5067,8 @@ nv.models.multiBarChart = function() {
d3.transition(g.select('.nv-y.nv-axis'))
.call(yAxis);
//------------------------------------------------------------
//============================================================
@ -5071,9 +5113,11 @@ nv.models.multiBarChart = function() {
if (tooltips) showTooltip(e, that.parentNode)
});
//============================================================
chart.update = function() { selection.transition().call(chart) };
chart.container = this; // I need a reference to the container in order to have outside code check if the chart is visible or not
chart.container = this;
});
@ -5097,19 +5141,22 @@ nv.models.multiBarChart = function() {
if (tooltips) nv.tooltip.cleanup();
});
//============================================================
//============================================================
// Global getters and setters
// Expose Public Variables
//------------------------------------------------------------
// expose chart's sub-components
chart.dispatch = dispatch;
chart.multibar = multibar;
chart.legend = legend;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'stacked', 'delay');
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
@ -5183,6 +5230,8 @@ nv.models.multiBarChart = function() {
return chart;
};
//============================================================
return chart;
}

4
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
src/models/lineChart.js
View File

@ -119,8 +119,6 @@ nv.models.lineChart = function() {
gEnter.append('g').attr('class', 'nv-linesWrap');
gEnter.append('g').attr('class', 'nv-legendWrap');
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//------------------------------------------------------------
@ -146,6 +144,8 @@ nv.models.lineChart = function() {
//------------------------------------------------------------
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//------------------------------------------------------------
// Main Chart Component(s)

127
src/models/multiBarChart.js
View File

@ -5,38 +5,54 @@ nv.models.multiBarChart = function() {
// Public Variables with Default Settings
//------------------------------------------------------------
var margin = {top: 30, right: 20, bottom: 50, left: 60},
width = null,
height = null,
color = nv.utils.defaultColor(),
showControls = true,
showLegend = true,
reduceXTicks = true, // if false a tick will show for every data point
rotateLabels = 0,
tooltips = true,
tooltip = function(key, x, y, e, graph) {
var multibar = nv.models.multiBar()
, xAxis = nv.models.axis()
, yAxis = nv.models.axis()
, legend = nv.models.legend()
, controls = nv.models.legend()
;
var margin = {top: 30, right: 20, bottom: 50, left: 60}
, width = null
, height = null
, color = nv.utils.defaultColor()
, showControls = true
, showLegend = true
, reduceXTicks = true // if false a tick will show for every data point
, rotateLabels = 0
, tooltips = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' on ' + x + '</p>'
},
x, y, //can be accessed via chart.multibar.[x/y]Scale()
noData = "No Data Available."
;
}
, x //can be accessed via chart.xScale()
, y //can be accessed via chart.yScale()
, noData = "No Data Available."
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;
multibar
.stacked(false)
;
xAxis
.orient('bottom')
.tickPadding(5)
.highlightZero(false)
.showMaxMin(false)
.tickFormat(function(d) { return d })
;
yAxis
.orient('left')
.tickFormat(d3.format(',.1f'))
;
//============================================================
//============================================================
// Private Variables
//------------------------------------------------------------
var multibar = nv.models.multiBar().stacked(false),
xAxis = nv.models.axis().orient('bottom').highlightZero(false).showMaxMin(false), //TODO: see why showMaxMin(false) causes no ticks to be shown on x axis
yAxis = nv.models.axis().orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
xAxis.tickFormat(function(d) { return d });
yAxis.tickFormat(d3.format(',.1f'));
var showTooltip = function(e, offsetElement) {
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
top = e.pos[1] + ( offsetElement.offsetTop || 0),
@ -47,6 +63,8 @@ nv.models.multiBarChart = function() {
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
};
//============================================================
function chart(selection) {
selection.each(function(data) {
@ -60,7 +78,7 @@ nv.models.multiBarChart = function() {
//------------------------------------------------------------
// Display No Data message if there's nothing to show.
// Display noData message if there's nothing to show.
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
container.append('text')
@ -78,13 +96,21 @@ nv.models.multiBarChart = function() {
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Scales
x = multibar.xScale();
y = multibar.yScale();
//------------------------------------------------------------
//------------------------------------------------------------
// Setup containers and skeleton of chart
var wrap = container.selectAll('g.nv-wrap.nv-multiBarWithLegend').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarWithLegend').append('g');
var g = wrap.select('g');
gEnter.append('g').attr('class', 'nv-x nv-axis');
gEnter.append('g').attr('class', 'nv-y nv-axis');
@ -92,10 +118,11 @@ nv.models.multiBarChart = function() {
gEnter.append('g').attr('class', 'nv-legendWrap');
gEnter.append('g').attr('class', 'nv-controlsWrap');
//------------------------------------------------------------
var g = wrap.select('g');
//------------------------------------------------------------
// Legend
if (showLegend) {
legend.width(availableWidth / 2);
@ -114,15 +141,11 @@ nv.models.multiBarChart = function() {
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
}
multibar
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }))
//------------------------------------------------------------
//------------------------------------------------------------
// Controls
if (showControls) {
var controlsData = [
@ -137,16 +160,33 @@ nv.models.multiBarChart = function() {
.call(controls);
}
//------------------------------------------------------------
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//------------------------------------------------------------
// Main Chart Component(s)
multibar
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }))
var barsWrap = g.select('.nv-barsWrap')
.datum(data.filter(function(d) { return !d.disabled }))
d3.transition(barsWrap).call(multibar);
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Axes
xAxis
.scale(x)
@ -186,6 +226,8 @@ nv.models.multiBarChart = function() {
d3.transition(g.select('.nv-y.nv-axis'))
.call(yAxis);
//------------------------------------------------------------
//============================================================
@ -230,9 +272,11 @@ nv.models.multiBarChart = function() {
if (tooltips) showTooltip(e, that.parentNode)
});
//============================================================
chart.update = function() { selection.transition().call(chart) };
chart.container = this; // I need a reference to the container in order to have outside code check if the chart is visible or not
chart.container = this;
});
@ -256,19 +300,22 @@ nv.models.multiBarChart = function() {
if (tooltips) nv.tooltip.cleanup();
});
//============================================================
//============================================================
// Global getters and setters
// Expose Public Variables
//------------------------------------------------------------
// expose chart's sub-components
chart.dispatch = dispatch;
chart.multibar = multibar;
chart.legend = legend;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'stacked', 'delay');
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
@ -342,6 +389,8 @@ nv.models.multiBarChart = function() {
return chart;
};
//============================================================
return chart;
}