CODEWITHSUNDEEP
javascriptangularjsd3.jsangularjs-directivenvd3.js
user3138740
user3138740

Reputation:

how to draw nvd3 simple barchart with x and y axis in angularjs

I am using nvd3.js plugin in my angular-js application. I came up with a simple bar chart requirement, where i need to show bars on the x-axis that indicates months, based on the values on y-axis that indicates revenue. I have to achieve this using nvd3.js plugin. Can anyone help on how to achieve this using nvd3.js plugin?

Upvotes: 3

Views: 3662

Answers (1)

krispo
krispo

Reputation: 526

For your purpose you can try angular-nvd3 directive.

You should just set up chart options and chart data as json, something like

//html
<nvd3 options="options" data="data"></nvd3>

//javascript, controller
$scope.options = {
    chart: {
        type: 'discreteBarChart',
        height: 450,
        x: function(d){return d.label;},
        y: function(d){return d.value;},
        showValues: true,
        valueFormat: function(d){
            return d3.format(',.2f')(d);
        },
        transitionDuration: 500,
        xAxis: {
            axisLabel: 'Month',
            rotateLabels: -20
        },
        yAxis: {
            axisLabel: 'Revenue',
            axisLabelDistance: 30
        }
    }
}

$scope.data = [{
    values: [{
        "label" : "Jan" ,
        "value" : 29.765957771107
    },{
        "label" : "Feb" ,
        "value" : 20
    },{
    ...
    }]
}]

See live demo

Upvotes: 2

Related Questions