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

Issue #68 updated cumulativeLineChart model to standard format

Browse Source
master-patched
Bob Monteverde 12 years ago
parent aca8838f52
commit 869a22c5bf
6 changed files with 196 additions and 104 deletions
Show Stats Download Patch File Download Diff File

146
nv.d3.js
Unescape Escape View File

@ -1458,41 +1458,50 @@ nv.models.cumulativeLineChart = function() {
// Public Variables with Default Settings
//------------------------------------------------------------
var margin = {top: 30, right: 30, bottom: 50, left: 60},
color = nv.utils.defaultColor(),
width = null,
height = null,
showLegend = true,
tooltips = true,
showRescaleToggle = true, //TODO: get rescale y functionality back (need to calculate exten of y for ALL possible re-zero points
rescaleY = true,
tooltip = function(key, x, y, e, graph) {
var lines = nv.models.line()
, xAxis = nv.models.axis()
, yAxis = nv.models.axis()
, legend = nv.models.legend()
, controls = nv.models.legend()
;
var margin = {top: 30, right: 30, bottom: 50, left: 60}
, color = nv.utils.defaultColor()
, width = null
, height = null
, showLegend = true
, tooltips = true
, showControls = true
, rescaleY = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' at ' + x + '</p>'
},
x, y, //can be accessed via chart.lines.[x/y]Scale()
noData = "No Data Available."
;
}
, x //can be accessed via chart.xScale()
, y //can be accessed via chart.yScale()
, id = lines.id()
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;
xAxis
.orient('bottom')
.tickPadding(5)
;
yAxis
.orient('left')
;
//============================================================
//============================================================
// Private Variables
//------------------------------------------------------------
var lines = nv.models.line(),
dx = d3.scale.linear(),
id = lines.id(),
xAxis = nv.models.axis().orient('bottom').tickPadding(5),
yAxis = nv.models.axis().orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
index = {i: 0, x: 0};
//TODO: let user select default
var controlsData = [
{ key: 'Re-scale y-axis' }
];
var dx = d3.scale.linear()
, index = {i: 0, x: 0}
;
var showTooltip = function(e, offsetElement) {
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
@ -1516,15 +1525,14 @@ nv.models.cumulativeLineChart = function() {
d.x += d3.event.dx;
d.i = Math.round(dx.invert(d.x));
//d3.transition(d3.select('.chart-' + id)).call(chart);
d3.select(this).attr('transform', 'translate(' + dx(d.i) + ',0)');
}
function dragEnd(d,i) {
//d3.transition(d3.select('.chart-' + id)).call(chart);
chart.update();
}
//============================================================
function chart(selection) {
@ -1557,10 +1565,13 @@ nv.models.cumulativeLineChart = function() {
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Scales
x = lines.xScale();
y = lines.yScale();
if (!rescaleY) {
var seriesDomains = data
.filter(function(series) { return !series.disabled })
@ -1588,12 +1599,18 @@ nv.models.cumulativeLineChart = function() {
.range([0, availableWidth])
.clamp(true);
//------------------------------------------------------------
var data = indexify(index.i, data);
//------------------------------------------------------------
// Setup containers and skeleton of chart
var wrap = container.selectAll('g.nv-wrap.nv-cumulativeLine').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-cumulativeLine').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');
@ -1601,9 +1618,11 @@ nv.models.cumulativeLineChart = 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);
@ -1622,8 +1641,17 @@ nv.models.cumulativeLineChart = function() {
.attr('transform', 'translate(0,' + (-margin.top) +')')
}
//------------------------------------------------------------
//------------------------------------------------------------
// Controls
if (showControls) {
var controlsData = [
{ key: 'Re-scale y-axis', disabled: !rescaleY }
];
if (showRescaleToggle) {
controls.width(140).color(['#444', '#444', '#444']);
g.select('.nv-controlsWrap')
.datum(controlsData)
@ -1631,7 +1659,14 @@ nv.models.cumulativeLineChart = function() {
.call(controls);
}
//------------------------------------------------------------
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//------------------------------------------------------------
// Main Chart Component(s)
lines
//.x(function(d) { return d.x })
@ -1644,9 +1679,6 @@ nv.models.cumulativeLineChart = function() {
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var linesWrap = g.select('.nv-linesWrap')
.datum(data.filter(function(d) { return !d.disabled }))
@ -1666,7 +1698,11 @@ nv.models.cumulativeLineChart = function() {
.attr('transform', function(d) { return 'translate(' + dx(d.i) + ',0)' })
.attr('height', availableHeight)
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Axes
xAxis
.scale(x)
@ -1687,6 +1723,7 @@ nv.models.cumulativeLineChart = function() {
d3.transition(g.select('.nv-y.nv-axis'))
.call(yAxis);
//------------------------------------------------------------
//============================================================
@ -1697,8 +1734,6 @@ nv.models.cumulativeLineChart = function() {
d.disabled = !d.disabled;
rescaleY = !d.disabled;
//console.log(d,i,arguments);
selection.transition().call(chart);
});
@ -1734,14 +1769,12 @@ nv.models.cumulativeLineChart = function() {
if (tooltips) showTooltip(e, that.parentNode);
});
//============================================================
});
//TODO: decide if this is a good idea, and if it should be in all models
chart.update = function() { chart(selection) };
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.update = function() { chart(selection) };
chart.container = this;
});
return chart;
}
@ -1764,19 +1797,22 @@ nv.models.cumulativeLineChart = function() {
if (tooltips) nv.tooltip.cleanup();
});
//============================================================
//============================================================
// Global getters and setters
// Expose Public Variables
//------------------------------------------------------------
// expose chart's sub-components
chart.dispatch = dispatch;
chart.lines = lines;
chart.legend = legend;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
@ -1802,6 +1838,12 @@ nv.models.cumulativeLineChart = function() {
return chart;
};
chart.showControls = function(_) {
if (!arguments.length) return showControls;
showControls = _;
return chart;
};
chart.showLegend = function(_) {
if (!arguments.length) return showLegend;
showLegend = _;
@ -1826,6 +1868,7 @@ nv.models.cumulativeLineChart = function() {
return chart;
};
//============================================================
//============================================================
@ -1842,6 +1885,7 @@ nv.models.cumulativeLineChart = function() {
return point;
})
/*
TODO: implement check below, and disable series if series loses 100% or more cause divide by 0 issue
if (v < -.9) {
//if a series loses more than 100%, calculations fail.. anything close can cause major distortion (but is mathematically currect till it hits 100)
}
@ -1850,6 +1894,8 @@ nv.models.cumulativeLineChart = function() {
})
}
//============================================================
return chart;
}
@ -3329,7 +3375,7 @@ nv.models.lineChart = function() {
}
, x
, y
, noData = "No Data Available."
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;
@ -5109,15 +5155,15 @@ nv.models.multiBarChart = function() {
selection.transition().call(chart);
});
dispatch.on('tooltipShow', function(e) {
if (tooltips) showTooltip(e, that.parentNode)
dispatch.on('tooltipShow', function(e) {
if (tooltips) showTooltip(e, that.parentNode)
});
//============================================================
chart.update = function() { selection.transition().call(chart) };
chart.container = this;
chart.container = this;
});
@ -5625,12 +5671,12 @@ nv.models.multiBarHorizontalChart = function() {
, stacked = false
, tooltips = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + " - " + x + '</h3>' +
return '<h3>' + key + ' - ' + x + '</h3>' +
'<p>' + y + '</p>'
}
, x //can be accessed via chart.xScale()
, y //can be accessed via chart.yScale()
, noData = "No Data Available."
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;

8
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

134
src/models/cumulativeLineChart.js
Unescape Escape View File

@ -5,41 +5,50 @@ nv.models.cumulativeLineChart = function() {
// Public Variables with Default Settings
//------------------------------------------------------------
var margin = {top: 30, right: 30, bottom: 50, left: 60},
color = nv.utils.defaultColor(),
width = null,
height = null,
showLegend = true,
tooltips = true,
showRescaleToggle = true, //TODO: get rescale y functionality back (need to calculate exten of y for ALL possible re-zero points
rescaleY = true,
tooltip = function(key, x, y, e, graph) {
var lines = nv.models.line()
, xAxis = nv.models.axis()
, yAxis = nv.models.axis()
, legend = nv.models.legend()
, controls = nv.models.legend()
;
var margin = {top: 30, right: 30, bottom: 50, left: 60}
, color = nv.utils.defaultColor()
, width = null
, height = null
, showLegend = true
, tooltips = true
, showControls = true
, rescaleY = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' at ' + x + '</p>'
},
x, y, //can be accessed via chart.lines.[x/y]Scale()
noData = "No Data Available."
;
}
, x //can be accessed via chart.xScale()
, y //can be accessed via chart.yScale()
, id = lines.id()
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;
xAxis
.orient('bottom')
.tickPadding(5)
;
yAxis
.orient('left')
;
//============================================================
//============================================================
// Private Variables
//------------------------------------------------------------
var lines = nv.models.line(),
dx = d3.scale.linear(),
id = lines.id(),
xAxis = nv.models.axis().orient('bottom').tickPadding(5),
yAxis = nv.models.axis().orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
index = {i: 0, x: 0};
//TODO: let user select default
var controlsData = [
{ key: 'Re-scale y-axis' }
];
var dx = d3.scale.linear()
, index = {i: 0, x: 0}
;
var showTooltip = function(e, offsetElement) {
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
@ -63,15 +72,14 @@ nv.models.cumulativeLineChart = function() {
d.x += d3.event.dx;
d.i = Math.round(dx.invert(d.x));
//d3.transition(d3.select('.chart-' + id)).call(chart);
d3.select(this).attr('transform', 'translate(' + dx(d.i) + ',0)');
}
function dragEnd(d,i) {
//d3.transition(d3.select('.chart-' + id)).call(chart);
chart.update();
}
//============================================================
function chart(selection) {
@ -104,10 +112,13 @@ nv.models.cumulativeLineChart = function() {
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Scales
x = lines.xScale();
y = lines.yScale();
if (!rescaleY) {
var seriesDomains = data
.filter(function(series) { return !series.disabled })
@ -135,12 +146,18 @@ nv.models.cumulativeLineChart = function() {
.range([0, availableWidth])
.clamp(true);
//------------------------------------------------------------
var data = indexify(index.i, data);
//------------------------------------------------------------
// Setup containers and skeleton of chart
var wrap = container.selectAll('g.nv-wrap.nv-cumulativeLine').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-cumulativeLine').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');
@ -148,9 +165,11 @@ nv.models.cumulativeLineChart = 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);
@ -169,8 +188,17 @@ nv.models.cumulativeLineChart = function() {
.attr('transform', 'translate(0,' + (-margin.top) +')')
}
//------------------------------------------------------------
//------------------------------------------------------------
// Controls
if (showControls) {
var controlsData = [
{ key: 'Re-scale y-axis', disabled: !rescaleY }
];
if (showRescaleToggle) {
controls.width(140).color(['#444', '#444', '#444']);
g.select('.nv-controlsWrap')
.datum(controlsData)
@ -178,8 +206,15 @@ nv.models.cumulativeLineChart = function() {
.call(controls);
}
//------------------------------------------------------------
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//------------------------------------------------------------
// Main Chart Component(s)
lines
//.x(function(d) { return d.x })
.y(function(d) { return d.display.y })
@ -191,9 +226,6 @@ nv.models.cumulativeLineChart = function() {
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var linesWrap = g.select('.nv-linesWrap')
.datum(data.filter(function(d) { return !d.disabled }))
@ -213,7 +245,11 @@ nv.models.cumulativeLineChart = function() {
.attr('transform', function(d) { return 'translate(' + dx(d.i) + ',0)' })
.attr('height', availableHeight)
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Axes
xAxis
.scale(x)
@ -234,6 +270,7 @@ nv.models.cumulativeLineChart = function() {
d3.transition(g.select('.nv-y.nv-axis'))
.call(yAxis);
//------------------------------------------------------------
//============================================================
@ -244,8 +281,6 @@ nv.models.cumulativeLineChart = function() {
d.disabled = !d.disabled;
rescaleY = !d.disabled;
//console.log(d,i,arguments);
selection.transition().call(chart);
});
@ -281,14 +316,12 @@ nv.models.cumulativeLineChart = function() {
if (tooltips) showTooltip(e, that.parentNode);
});
//============================================================
});
//TODO: decide if this is a good idea, and if it should be in all models
chart.update = function() { chart(selection) };
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.update = function() { chart(selection) };
chart.container = this;
});
return chart;
}
@ -311,19 +344,22 @@ nv.models.cumulativeLineChart = function() {
if (tooltips) nv.tooltip.cleanup();
});
//============================================================
//============================================================
// Global getters and setters
// Expose Public Variables
//------------------------------------------------------------
// expose chart's sub-components
chart.dispatch = dispatch;
chart.lines = lines;
chart.legend = legend;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
@ -349,6 +385,12 @@ nv.models.cumulativeLineChart = function() {
return chart;
};
chart.showControls = function(_) {
if (!arguments.length) return showControls;
showControls = _;
return chart;
};
chart.showLegend = function(_) {
if (!arguments.length) return showLegend;
showLegend = _;
@ -373,6 +415,7 @@ nv.models.cumulativeLineChart = function() {
return chart;
};
//============================================================
//============================================================
@ -389,6 +432,7 @@ nv.models.cumulativeLineChart = function() {
return point;
})
/*
TODO: implement check below, and disable series if series loses 100% or more cause divide by 0 issue
if (v < -.9) {
//if a series loses more than 100%, calculations fail.. anything close can cause major distortion (but is mathematically currect till it hits 100)
}
@ -397,6 +441,8 @@ nv.models.cumulativeLineChart = function() {
})
}
//============================================================
return chart;
}

2
src/models/lineChart.js
Unescape Escape View File

@ -23,7 +23,7 @@ nv.models.lineChart = function() {
}
, x
, y
, noData = "No Data Available."
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;

6
src/models/multiBarChart.js
Unescape Escape View File

@ -268,15 +268,15 @@ nv.models.multiBarChart = function() {
selection.transition().call(chart);
});
dispatch.on('tooltipShow', function(e) {
if (tooltips) showTooltip(e, that.parentNode)
dispatch.on('tooltipShow', function(e) {
if (tooltips) showTooltip(e, that.parentNode)
});
//============================================================
chart.update = function() { selection.transition().call(chart) };
chart.container = this;
chart.container = this;
});

4
src/models/multiBarHorizontalChart.js
Unescape Escape View File

@ -21,12 +21,12 @@ nv.models.multiBarHorizontalChart = function() {
, stacked = false
, tooltips = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + " - " + x + '</h3>' +
return '<h3>' + key + ' - ' + x + '</h3>' +
'<p>' + y + '</p>'
}
, x //can be accessed via chart.xScale()
, y //can be accessed via chart.yScale()
, noData = "No Data Available."
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;

Write Preview
Loading…
Cancel
Save