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

added resize y axis toggle to cumulative line

Browse Source
master-patched
Bob Monteverde 12 years ago
parent 5ca0f2b310
commit c06fb49fff
4 changed files with 100 additions and 32 deletions
Show Stats Download Patch File Download Diff File

70
nv.d3.js
Unescape Escape View File

@ -600,9 +600,9 @@ nv.models.bar = function() {
}
/***
* Creating a separate bar chart for historical view of a single series
* this will likely be merged into the bar representation, just developing
* it separately to not interfere with the regular bar model
* multiBar will likely be used instead of this, wherever this would have been useful,
* multiBar lets you view 1 or more bars per an x value, either grouped (side by side)
* or stacked (layered on top of each other).
*/
nv.models.historicalBar = function() {
var margin = {top: 0, right: 0, bottom: 0, left: 0},
@ -1151,7 +1151,8 @@ nv.models.cumulativeLine = function() {
dotRadius = function() { return 2.5 },
getX = function(d) { return d.x },
getY = function(d) { return d.y },
id = Math.floor(Math.random() * 10000); //Create semi-unique ID incase user doesn't select one
id = Math.floor(Math.random() * 10000), //Create semi-unique ID incase user doesn't select one
rescaleY = true;
var x = d3.scale.linear(),
dx = d3.scale.linear(),
@ -1159,10 +1160,15 @@ nv.models.cumulativeLine = function() {
xAxis = nv.models.axis().scale(x).orient('bottom'),
yAxis = nv.models.axis().scale(y).orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),
lines = nv.models.line(),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
index = {i: 0, x: 0};
//TODO: let user select default
var controlsData = [
{ key: 'Re-scale y-axis' }
];
var indexDrag = d3.behavior.drag()
.on('dragstart', dragStart)
@ -1194,23 +1200,24 @@ nv.models.cumulativeLine = function() {
var series = indexify(index.i, data);
var seriesData = series
.filter(function(d) { return !d.disabled })
.filter(function(d) { return !rescaleY || !d.disabled }) // only filter out if rescaling y axis
.map(function(d) { return d.values });
x .domain(d3.extent(d3.merge(seriesData), function(d) { return d.x } ))
.range([0, width - margin.left - margin.right]);
.range([0, availableWidth]);
dx .domain([0, data[0].values.length - 1]) //Assumes all series have same length
.range([0, width - margin.left - margin.right])
.range([0, availableWidth])
.clamp(true);
y .domain(d3.extent(d3.merge(seriesData), function(d) { return d.y } ))
.range([height - margin.top - margin.bottom, 0]);
.range([availableHeight, 0]);
lines
.width(width - margin.left - margin.right)
.height(height - margin.top - margin.bottom)
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color[i % 10];
}).filter(function(d,i) { return !data[i].disabled }))
@ -1223,6 +1230,7 @@ nv.models.cumulativeLine = function() {
gEnter.append('g').attr('class', 'y axis');
gEnter.append('g').attr('class', 'linesWrap');
gEnter.append('g').attr('class', 'legendWrap');
gEnter.append('g').attr('class', 'controlsWrap');
@ -1240,6 +1248,12 @@ nv.models.cumulativeLine = function() {
.attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')')
.call(legend);
controls.width(140).color(['#444', '#444', '#444']);
g.select('.controlsWrap')
.datum(controlsData)
.attr('transform', 'translate(0,' + (-margin.top) +')')
.call(controls);
var linesWrap = g.select('.linesWrap')
.datum(series.filter(function(d) { return !d.disabled }))
@ -1259,14 +1273,14 @@ nv.models.cumulativeLine = function() {
indexLine
.attr("transform", function(d) { return "translate(" + dx(d.i) + ",0)" })
.attr('height', height - margin.top - margin.bottom)
.attr('height', availableHeight)
xAxis
.domain(x.domain())
.range(x.range())
.ticks( width / 100 )
.tickSize(-(height - margin.top - margin.bottom), 0);
.tickSize(-availableHeight, 0);
g.select('.x.axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')');
@ -1277,7 +1291,7 @@ nv.models.cumulativeLine = function() {
.domain(y.domain())
.range(y.range())
.ticks( height / 36 )
.tickSize(-(width - margin.right - margin.left), 0);
.tickSize(-availableWidth, 0);
d3.transition(g.select('.y.axis'))
.call(yAxis);
@ -1314,6 +1328,19 @@ nv.models.cumulativeLine = function() {
});
*/
controls.dispatch.on('legendClick', function(d,i) {
d.disabled = !d.disabled;
rescaleY = !d.disabled;
//console.log(d,i,arguments);
selection.transition().call(chart);
});
lines.dispatch.on('elementMouseover.tooltip', function(e) {
dispatch.tooltipShow({
point: e.point,
@ -1412,6 +1439,12 @@ nv.models.cumulativeLine = function() {
return chart;
};
chart.color = function(_) {
if (!arguments.length) return color;
color = _;
return chart;
};
chart.dotRadius = function(_) {
if (!arguments.length) return dotRadius;
dotRadius = d3.functor(_);
@ -2707,16 +2740,16 @@ nv.models.multiBar = function() {
d3.transition(bars)
.delay(function(d,i) { return i * 1200 / data[0].values.length })
.attr('x', function(d,i) {
return stacked ? 0 : (d.series * x.rangeBand() / data.length )
return d.series * x.rangeBand() / data.length
})
.attr('width', x.rangeBand() / (stacked ? 1 : data.length) )
.attr('width', x.rangeBand() / data.length)
.each('end', function() {
d3.transition(d3.select(this))
.attr('y', function(d,i) {
return y(getY(d,i) + (stacked ? d.y0 : 0));
return y(getY(d,i));
})
.attr('height', function(d,i) {
return Math.abs(y(d.y + (stacked ? d.y0 : 0)) - y((stacked ? d.y0 : 0)))
return Math.abs(y(d.y) - y(0))
});
})
@ -4774,7 +4807,8 @@ nv.charts.cumulativeLineChartDaily = function() {
var graph = nv.models.cumulativeLine()
.x(function(d,i) { return i }),
.x(function(d,i) { return i })
.color(d3.scale.category10().range()),
showTooltip = function(e) {
var offsetElement = document.getElementById(selector.substr(1)),
left = e.pos[0] + offsetElement.offsetLeft,

6
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/charts/cumulativeLineChartDaily.js
Unescape Escape View File

@ -15,7 +15,8 @@ nv.charts.cumulativeLineChartDaily = function() {
var graph = nv.models.cumulativeLine()
.x(function(d,i) { return i }),
.x(function(d,i) { return i })
.color(d3.scale.category10().range()),
showTooltip = function(e) {
var offsetElement = document.getElementById(selector.substr(1)),
left = e.pos[0] + offsetElement.offsetLeft,

53
src/models/cumulativeLine.js
Unescape Escape View File

@ -7,7 +7,8 @@ nv.models.cumulativeLine = function() {
dotRadius = function() { return 2.5 },
getX = function(d) { return d.x },
getY = function(d) { return d.y },
id = Math.floor(Math.random() * 10000); //Create semi-unique ID incase user doesn't select one
id = Math.floor(Math.random() * 10000), //Create semi-unique ID incase user doesn't select one
rescaleY = true;
var x = d3.scale.linear(),
dx = d3.scale.linear(),
@ -15,10 +16,15 @@ nv.models.cumulativeLine = function() {
xAxis = nv.models.axis().scale(x).orient('bottom'),
yAxis = nv.models.axis().scale(y).orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),
lines = nv.models.line(),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
index = {i: 0, x: 0};
//TODO: let user select default
var controlsData = [
{ key: 'Re-scale y-axis' }
];
var indexDrag = d3.behavior.drag()
.on('dragstart', dragStart)
@ -50,23 +56,24 @@ nv.models.cumulativeLine = function() {
var series = indexify(index.i, data);
var seriesData = series
.filter(function(d) { return !d.disabled })
.filter(function(d) { return !rescaleY || !d.disabled }) // only filter out if rescaling y axis
.map(function(d) { return d.values });
x .domain(d3.extent(d3.merge(seriesData), function(d) { return d.x } ))
.range([0, width - margin.left - margin.right]);
.range([0, availableWidth]);
dx .domain([0, data[0].values.length - 1]) //Assumes all series have same length
.range([0, width - margin.left - margin.right])
.range([0, availableWidth])
.clamp(true);
y .domain(d3.extent(d3.merge(seriesData), function(d) { return d.y } ))
.range([height - margin.top - margin.bottom, 0]);
.range([availableHeight, 0]);
lines
.width(width - margin.left - margin.right)
.height(height - margin.top - margin.bottom)
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color[i % 10];
}).filter(function(d,i) { return !data[i].disabled }))
@ -79,6 +86,7 @@ nv.models.cumulativeLine = function() {
gEnter.append('g').attr('class', 'y axis');
gEnter.append('g').attr('class', 'linesWrap');
gEnter.append('g').attr('class', 'legendWrap');
gEnter.append('g').attr('class', 'controlsWrap');
@ -96,6 +104,12 @@ nv.models.cumulativeLine = function() {
.attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')')
.call(legend);
controls.width(140).color(['#444', '#444', '#444']);
g.select('.controlsWrap')
.datum(controlsData)
.attr('transform', 'translate(0,' + (-margin.top) +')')
.call(controls);
var linesWrap = g.select('.linesWrap')
.datum(series.filter(function(d) { return !d.disabled }))
@ -115,14 +129,14 @@ nv.models.cumulativeLine = function() {
indexLine
.attr("transform", function(d) { return "translate(" + dx(d.i) + ",0)" })
.attr('height', height - margin.top - margin.bottom)
.attr('height', availableHeight)
xAxis
.domain(x.domain())
.range(x.range())
.ticks( width / 100 )
.tickSize(-(height - margin.top - margin.bottom), 0);
.tickSize(-availableHeight, 0);
g.select('.x.axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')');
@ -133,7 +147,7 @@ nv.models.cumulativeLine = function() {
.domain(y.domain())
.range(y.range())
.ticks( height / 36 )
.tickSize(-(width - margin.right - margin.left), 0);
.tickSize(-availableWidth, 0);
d3.transition(g.select('.y.axis'))
.call(yAxis);
@ -170,6 +184,19 @@ nv.models.cumulativeLine = function() {
});
*/
controls.dispatch.on('legendClick', function(d,i) {
d.disabled = !d.disabled;
rescaleY = !d.disabled;
//console.log(d,i,arguments);
selection.transition().call(chart);
});
lines.dispatch.on('elementMouseover.tooltip', function(e) {
dispatch.tooltipShow({
point: e.point,
@ -268,6 +295,12 @@ nv.models.cumulativeLine = function() {
return chart;
};
chart.color = function(_) {
if (!arguments.length) return color;
color = _;
return chart;
};
chart.dotRadius = function(_) {
if (!arguments.length) return dotRadius;
dotRadius = d3.functor(_);

Write Preview
Loading…
Cancel
Save