Skip to content

Commit

Permalink
updated fix for width and height
Browse files Browse the repository at this point in the history
  • Loading branch information
@krispo
krispo committed Sep 26, 2015
1 parent 3773a6b commit 42d807c
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 12 deletions.
1 change: 1 addition & 0 deletions .jshintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"trailing": true,
"undef": true,
"unused": "vars",
"boss": true,
"globals": {
"angular": false,
"nv": false,
Expand Down
19 changes: 14 additions & 5 deletions dist/angular-nvd3.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**************************************************************************
* AngularJS-nvD3, v1.0.2; MIT License; 16/09/2015 21:33
* AngularJS-nvD3, v1.0.2; MIT License; 26/09/2015 21:38
* http://krispo.github.io/angular-nvd3
**************************************************************************/
(function(){
Expand Down Expand Up @@ -170,11 +170,20 @@
// remove whole svg element with old data
d3.select(element[0]).select('svg').remove();

var h, w, svg;

// Select the current element to add <svg> element and to render the chart in
d3.select(element[0]).append('svg')
.attr('height', scope.options.chart.height)
.attr('width', scope.options.chart.width || '100%')
.datum(data)
svg = d3.select(element[0]).append('svg');
if (h = scope.options.chart.height) {
if (!isNaN(+h)) h += 'px'; //check if height is number
svg.attr('height', h).style({height: h});
}
if (w = scope.options.chart.width) {
if (!isNaN(+w)) w += 'px'; //check if width is number
svg.attr('width', w).style({width: w});
}

svg.datum(data)
.transition().duration(scope.options.chart.transitionDuration)
.call(scope.chart);
}
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-nvd3.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 13 additions & 6 deletions src/angular-nvd3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,14 +165,21 @@
scope.options.chart.transitionDuration = +scope.options.chart.transitionDuration || 250;
// remove whole svg element with old data
d3.select(element[0]).select('svg').remove();

if (scope.options.chart.height && !isNaN(scope.options.chart.height)) scope.options.chart.height += 'px';
if (scope.options.chart.width && !isNaN(scope.options.chart.width)) scope.options.chart.width += 'px';

var h, w, svg;

// Select the current element to add <svg> element and to render the chart in
d3.select(element[0]).append('svg')
.style({height: scope.options.chart.height, width: scope.options.chart.width})
.datum(data)
svg = d3.select(element[0]).append('svg');
if (h = scope.options.chart.height) {
if (!isNaN(+h)) h += 'px'; //check if height is number
svg.attr('height', h).style({height: h});
}
if (w = scope.options.chart.width) {
if (!isNaN(+w)) w += 'px'; //check if width is number
svg.attr('width', w).style({width: w});
}

svg.datum(data)
.transition().duration(scope.options.chart.transitionDuration)
.call(scope.chart);
}
Expand Down

1 comment on commit 42d807c

@bobbyziom
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@krispo I believe that this should fix the issue at #40

However I still have that exact problem after reinstalling angular-nvd3 with bower today (1.0.2). lineChart is not adjusting to full with of bootstrap column before resizing viewport/browser window. Anything I'm missing?

When loading:
Before

After resizing:
Before

I'm using these custom css modifications:

.nvd3.nv-lineChart .nv-x.nv-axis line { stroke: none; fill: none; }
.nvd3.nv-lineChart .nv-y.nv-axis line { stroke: none; fill: none; }
.nvd3.nv-lineChart .nv-y.nv-axis .domain { stroke: none; fill: none; }

svg text {
    fill: #eeeeee;
}

And this is my chart options:

$scope.options = {
                chart: {
                    type: 'lineChart',
                    height: 450,
                    margin : {
                        top: 0,
                        right: 30,
                        bottom: 40,
                        left: 30
                    },
                    x: function(d){ return Date.parse(d.timeframe.start); },
                    y: function(d){ 
                        return d3.round(d.value); 
                    },

                    color: [
                      /* '#1f77b4', */
                      '#ff7f0e',
                      '#d62728',
                      '#9467bd',
                      '#2ca02c',
                      '#8c564b',
                      '#e377c2',
                      '#7f7f7f',
                      '#bcbd22',
                      '#17becf'
                    ],

                    transitionDuration: 300,
                    useInteractiveGuideline: true,
                    clipVoronoi: false,
                    showControls: false,

                    xAxis: {
                        axisLabel: false,
                        tickFormat: function(d) {
                            return d3.time.format('%d. %b %y %H:%M')(new Date(d));
                        },
                        showMaxMin: false,
                        staggerLabels: true
                    },

                    yAxis: {
                        axisLabel: false,
                        tickFormat: function(d){
                            return d;
                        },
                        showMaxMin: false,
                        staggerLabels: true
                    },

                    lines: {
                        interpolate: 'linear'
                    }

                }
            };

And thanks for the awesome work!

Please sign in to comment.