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

Adding ability to right align the Y-axis for historical bar and line charts.

Browse Source
This commit is contained in:
Robin Hu 2013-06-11 12:59:33 -04:00
parent 319520513f
commit 739b93fecf
5 changed files with 62 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
nv.d3.js
View File

@ -3221,14 +3221,14 @@ nv.models.historicalBarChart = function() {
, legend = nv.models.legend()
;
//set margin.right to 23 to fit dates on the x-axis within the chart
var margin = {top: 30, right: 20, bottom: 50, left: 60}
var margin = {top: 30, right: 90, bottom: 50, left: 90}
, color = nv.utils.defaultColor()
, width = null
, height = null
, showLegend = false
, showXAxis = true
, showYAxis = true
, rightAlignYAxis = false
, tooltips = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
@ -3247,7 +3247,7 @@ nv.models.historicalBarChart = function() {
.tickPadding(7)
;
yAxis
.orient('left')
.orient( (rightAlignYAxis) ? 'right' : 'left')
;
//============================================================
@ -3383,6 +3383,10 @@ nv.models.historicalBarChart = function() {
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
if (rightAlignYAxis) {
g.select(".nv-y.nv-axis")
.attr("transform", "translate(" + availableWidth + ",0)");
}
//------------------------------------------------------------
// Main Chart Component(s)
@ -3569,6 +3573,13 @@ nv.models.historicalBarChart = function() {
return chart;
};
chart.rightAlignYAxis = function(_) {
if(!arguments.length) return rightAlignYAxis;
rightAlignYAxis = _;
yAxis.orient( (_) ? 'right' : 'left');
return chart;
};
chart.tooltips = function(_) {
if (!arguments.length) return tooltips;
tooltips = _;
@ -4432,6 +4443,7 @@ nv.models.lineChart = function() {
, showLegend = true
, showXAxis = true
, showYAxis = true
, rightAlignYAxis = false
, tooltips = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
@ -4450,7 +4462,7 @@ nv.models.lineChart = function() {
.tickPadding(7)
;
yAxis
.orient('left')
.orient((rightAlignYAxis) ? 'right' : 'left')
;
//============================================================
@ -4586,6 +4598,10 @@ nv.models.lineChart = function() {
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
if (rightAlignYAxis) {
g.select(".nv-y.nv-axis")
.attr("transform", "translate(" + availableWidth + ",0)");
}
//------------------------------------------------------------
// Main Chart Component(s)
@ -4772,6 +4788,13 @@ nv.models.lineChart = function() {
return chart;
};
chart.rightAlignYAxis = function(_) {
if(!arguments.length) return rightAlignYAxis;
rightAlignYAxis = _;
yAxis.orient( (_) ? 'right' : 'left');
return chart;
};
chart.tooltips = function(_) {
if (!arguments.length) return tooltips;
tooltips = _;

10
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

17
src/models/historicalBarChart.js
View File

@ -11,14 +11,14 @@ nv.models.historicalBarChart = function() {
, legend = nv.models.legend()
;
//set margin.right to 23 to fit dates on the x-axis within the chart
var margin = {top: 30, right: 20, bottom: 50, left: 60}
var margin = {top: 30, right: 90, bottom: 50, left: 90}
, color = nv.utils.defaultColor()
, width = null
, height = null
, showLegend = false
, showXAxis = true
, showYAxis = true
, rightAlignYAxis = false
, tooltips = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
@ -37,7 +37,7 @@ nv.models.historicalBarChart = function() {
.tickPadding(7)
;
yAxis
.orient('left')
.orient( (rightAlignYAxis) ? 'right' : 'left')
;
//============================================================
@ -173,6 +173,10 @@ nv.models.historicalBarChart = function() {
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
if (rightAlignYAxis) {
g.select(".nv-y.nv-axis")
.attr("transform", "translate(" + availableWidth + ",0)");
}
//------------------------------------------------------------
// Main Chart Component(s)
@ -359,6 +363,13 @@ nv.models.historicalBarChart = function() {
return chart;
};
chart.rightAlignYAxis = function(_) {
if(!arguments.length) return rightAlignYAxis;
rightAlignYAxis = _;
yAxis.orient( (_) ? 'right' : 'left');
return chart;
};
chart.tooltips = function(_) {
if (!arguments.length) return tooltips;
tooltips = _;

14
src/models/lineChart.js
View File

@ -19,6 +19,7 @@ nv.models.lineChart = function() {
, showLegend = true
, showXAxis = true
, showYAxis = true
, rightAlignYAxis = false
, tooltips = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
@ -37,7 +38,7 @@ nv.models.lineChart = function() {
.tickPadding(7)
;
yAxis
.orient('left')
.orient((rightAlignYAxis) ? 'right' : 'left')
;
//============================================================
@ -173,6 +174,10 @@ nv.models.lineChart = function() {
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
if (rightAlignYAxis) {
g.select(".nv-y.nv-axis")
.attr("transform", "translate(" + availableWidth + ",0)");
}
//------------------------------------------------------------
// Main Chart Component(s)
@ -359,6 +364,13 @@ nv.models.lineChart = function() {
return chart;
};
chart.rightAlignYAxis = function(_) {
if(!arguments.length) return rightAlignYAxis;
rightAlignYAxis = _;
yAxis.orient( (_) ? 'right' : 'left');
return chart;
};
chart.tooltips = function(_) {
if (!arguments.length) return tooltips;
tooltips = _;

7
src/nv.d3.css
View File

@ -17,7 +17,7 @@
.nvtooltip {
position: absolute;
background-color: rgba(255,255,255,1);
background-color: rgba(255,255,255,0.75);
padding: 1px;
border: 1px solid rgba(0,0,0,.2);
z-index: 10000;
@ -63,7 +63,7 @@
padding: 4px 14px;
line-height: 18px;
font-weight: normal;
background-color: #f7f7f7;
background-color: rgba(247,247,247,0.75);
text-align: center;
border-bottom: 1px solid #ebebeb;
@ -177,8 +177,7 @@ svg .title {
.nvd3 .nv-axis line {
fill: none;
stroke: #000;
stroke-opacity: .25;
stroke: #e5e5e5;
shape-rendering: crispEdges;
}