Skip to content

Commit

Permalink
Adding ability to right align the Y-axis for historical bar and line …
Browse files Browse the repository at this point in the history 
…charts.
  • Loading branch information
@robinfhu
robinfhu committed Jun 11, 2013
1 parent 3195205 commit 739b93f
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 17 deletions.
31 changes: 27 additions & 4 deletions nv.d3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>' +
Expand All @@ -3247,7 +3247,7 @@ nv.models.historicalBarChart = function() {
.tickPadding(7)
;
yAxis
.orient('left')
.orient( (rightAlignYAxis) ? 'right' : 'left')
;

//============================================================
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 = _;
Expand Down Expand Up @@ -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>' +
Expand All @@ -4450,7 +4462,7 @@ nv.models.lineChart = function() {
.tickPadding(7)
;
yAxis
.orient('left')
.orient((rightAlignYAxis) ? 'right' : 'left')
;

//============================================================
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 = _;
Expand Down
10 changes: 5 additions & 5 deletions nv.d3.min.js
View file

Large diffs are not rendered by default.

17 changes: 14 additions & 3 deletions src/models/historicalBarChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>' +
Expand All @@ -37,7 +37,7 @@ nv.models.historicalBarChart = function() {
.tickPadding(7)
;
yAxis
.orient('left')
.orient( (rightAlignYAxis) ? 'right' : 'left')
;

//============================================================
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 = _;
Expand Down
14 changes: 13 additions & 1 deletion src/models/lineChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>' +
Expand All @@ -37,7 +38,7 @@ nv.models.lineChart = function() {
.tickPadding(7)
;
yAxis
.orient('left')
.orient((rightAlignYAxis) ? 'right' : 'left')
;

//============================================================
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 = _;
Expand Down
7 changes: 3 additions & 4 deletions src/nv.d3.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -177,8 +177,7 @@ svg .title {

.nvd3 .nv-axis line {
fill: none;
stroke: #000;
stroke-opacity: .25;
stroke: #e5e5e5;
shape-rendering: crispEdges;
}

Expand Down

0 comments on commit 739b93f

Please sign in to comment.