Discrete bar chart : set margin about angularjs-nvd3-directives

[cmaurer]

I am trying to remember why I originally defined the scope.margin as a function link. I believe I was thinking at the time that it was needed to pass object literals to the directive.

However, you can still pass an object literal to the directive, even though it is defined as a function.link.

margin="{left:10,top:0,bottom:0,right:0}"

which should work.

Is that what you are doing currently and still having issues?

Chris

[julienmeyer]

Set other margins to 0 didn't work. I need to set all others to a value greater than 0.

Because :
In your function initializeWidth() (line 657). You test this "!scope.margin.left || !scope.margin.right". And this return true if left or right margin is undefined or equals to 0. Idem for height margins.
If the test is true, you set all margin values to default values.
I think you need to modify this code to test if margins are defined or not. And use user defined values if different of undefined.

To work with your current code, I set my margin to {left : 10, right: 1, top: 1, bottom: 1} and set margin attributes to '=' and not '&'

[cmaurer]

Ok. Thanks @julienmeyer

[cmaurer]

@julienmeyer
I have been looking at this and I want to be sure I understand the issue. It seems like you are saying {left:10,top:0,bottom:0,right:0} is not working? Am I understanding?

There are two ways that you can define a margin. 1) with the object, and 2) with just an integer value. If you supply just an integer then you are correct, all of the margins will be set to that integer value.

But looking over the code, if the margin object is defined (attrs.margin), then the margin object is assigned to a scope version of the object.

If the margin is totally undefined, then it will default to {left:50,top:50,bottom:50,right:50}.

Does that make sense?

Thanks,
Chris

[julienmeyer]

@cmaurer
You're right. For me, it doesnt' work with {left:10,top:0,bottom:0,right:0}.

My code
html : < nvd3-discrete-bar-chart data="discreteBarData" id="kpi-discrete-bar-{{kpi.id}}" margin="discreteBarMargin" >

I set $scope.discreteBarMargin equals to {top: 0, right: 0, bottom: 0, left: 10}.

[cmaurer]

@julienmeyer

Instead of setting margin="discreteBarMargin", use the object, margin="{top: 0, right: 0, bottom: 0, left: 10}"

Now issue #57 makes a little more sense.

Chris

[ramstein74]

I suggest that margin parameter should be better explained in the documentation

Thank you

[cmaurer]

Sounds good. What would you like to see? What would help make it better?

[ramstein74]

For example the left margin is the area outside the graph but the area that
contains the axis labels.

I did not make it the first time also. I was thinking it was the outer
margin of the svg but its not.

Maybe you sould draw a small image showing where is the margin.

Anyway, i´m not an expert but i´m enjoying very much your work.

Thank you

2013/11/27 Christian Maurer [email protected]

Sounds good. What would you like to see? What would help make it better?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/51#issuecomment-29405695
.

[dwstevens]

This may be an example of the problem. The bar chart is using different margins than the line chart. I think the bars should be centered on the x tick lines, correct?

Here's the code:

        nv.addGraph(function() {
            var chart = nv.models.linePlusBarChart()
                .margin({top: 30, right: 100, bottom: 50, left: 100})
                .x(function(d,i) { return i })
                .color(d3.scale.category10().range());

            chart.xAxis.tickFormat(function(d) {
                console.log(d);
                var dx = chartData[0].values[d] && chartData[0].values[d].x || 0;
                return dx ? d3.time.format('%x')(new Date(dx)) : '';
                })
                .showMaxMin(false);

            chart.y1Axis
                .tickFormat(function(d) { return '$' + d3.format(',f')(d) })
                ;
            chart.y2Axis
                .tickFormat(function(d) { return '$' + d3.format(',f')(d) })
                ;

            chart.bars.forceY([0, maxTimeValue]).padData(false);
            chart.lines.yDomain([minStockPrice, maxStockPrice]);

            d3.select("svg")
                .datum(chartData)
                .transition().duration(500).call(chart);
                    nv.utils.windowResize(
                    function() {
                        chart.update();
                    }
                );
            return chart;
        });

var chartData = [{
    "key": "Time Value",
    "bar": true,
    "values": [{
        "x": 1358917200000,
        "y": 16.39
    }, {
        "x": 1361336400000,
        "y": 5.43
    }, {
        "x": 1364356800000,
        "y": 2.94
    }, {
        "x": 1366776000000,
        "y": 4.16
    }, {
        "x": 1369800000000,
        "y": 3.83
    }, {
        "x": 1372219200000,
        "y": 3.38
    }, {
        "x": 1374638400000,
        "y": 1.6
    }, {
        "x": 1377662400000,
        "y": 4.75
    }, {
        "x": 1380081600000,
        "y": 4.3
    }, {
        "x": 1382500800000,
        "y": 8.59
    }, {
        "x": 1385528400000,
        "y": 1.46
    }]
}, {
    "key": "Stock Price",
    "values": [{
        "x": 1358917200000,
        "y": 514.01
    }, {
        "x": 1361336400000,
        "y": 448.85
    }, {
        "x": 1364356800000,
        "y": 452.08
    }, {
        "x": 1366776000000,
        "y": 405.46
    }, {
        "x": 1369800000000,
        "y": 444.95
    }, {
        "x": 1372219200000,
        "y": 398.07
    }, {
        "x": 1374638400000,
        "y": 440.51
    }, {
        "x": 1377662400000,
        "y": 490.9
    }, {
        "x": 1380081600000,
        "y": 481.53
    }, {
        "x": 1382500800000,
        "y": 524.96
    }, {
        "x": 1385528400000,
        "y": 545.96
    }]
}];

[cmaurer]

@dwstevens
Thanks for the additional data. If you enable the tooltips, does the data match the xAxis? i.e. do the bars/lines show the same values as the xAxis?

Thanks,
Chris

[dwstevens]

Here's the hover, it seems to line up on the center of the bar.

Here's the line, it's shifted to the right:

On Dec 15, 2013, at 2:50 PM, Christian Maurer [email protected] wrote:

@dwstevens
Thanks for the additional data. If you enable the tooltips, does the data match the xAxis? i.e. do the bars/lines show the same values as the xAxis?

Thanks,
Chris

—
Reply to this email directly or view it on GitHub.

[cmaurer]

@dwstevens Your images are missing.

[dwstevens]

Ah, replying via email didn't work. Here they are:

These two are of the bars:

And then here is the alignment of the tooltip for the line, you can see the slightly different x offset, even though they share the same x axis.

[cmaurer]

@dwstevens It's cool. Thanks for reposting.
I agree with you, it seems everything should line up. I was looking at it yesterday and it seems that the axis are being set to the same domain and range. I am going to have to fiddle with it some more to see what is causing this.

Chris

[dwstevens]

It seems like when it calculates the bar width and spacing that it's using the width of the SVG instead of the specified margins, or the margins when the axis are present. I would expect the first bar to center horizontally on the first tick mark, just like the first plot on the line chart lines up with the first tick mark.

[brownpl]

Hello - I am running into a similar problem and was curious if there was any movement here. If not, I'll see if I can try to track it down and post my resolution if I find one.

[cmaurer]

I have not had an opportunity to focus on this. If you want to take a stab at it, I would appreciate it.

Thanks,
Chris

Sent from my iPhone

On Jun 27, 2014, at 12:10 PM, brownpl [email protected] wrote:

Hello - I am running into a similar problem and was curious if there was any movement here. If not, I'll see if I can try to track it down and post my resolution if I find one.

—
Reply to this email directly or view it on GitHub.

[elavarasan92]

Thanks guys. You guys saved me a lot of time.I couldn't able to edit margin or padding of the chart now with your help i did it. You guys really don't know how thankful iam.