CODEWITHSUNDEEP
angularjsd3.jsnvd3.js
Madasu K
Madasu K

Reputation: 1863

different nvD3 approaches

As I am relatively new to nvD3, I am confused with the different nvD3 code notations I am coming across, can any one help me to understand it better.

The nvD3 code samples are as follows:

Aprroach#1:

html :
<div id="chart">
  <svg></svg>
</div>

script :

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    ;

  chart.xAxis
    .axisLabel('Time (ms)')
    .tickFormat(d3.format(',r'))
    ;

  chart.yAxis
    .axisLabel('Voltage (v)')
    .tickFormat(d3.format('.02f'))
    ;
  var data=sinandcos();
  d3.select('#chart svg')
    .datum(sinandcos())
    .transition().duration(500)
    .call(chart)
    .selectAll('.nv-y text')
    .attr('x',-15)
    ;

  return chart;
});

Approach #2 :

html :
<body ng-controller="MainCtrl">

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

  </body>

script :

var app = angular.module('myApp', ['nvd3']);

app.controller('MainCtrl', function($scope, $compile) {

  $scope.options = {
            chart: {
                 type: 'lineChart',             
                height: 450,
                margin : {
                "top": 20,
                "right": 20,
                "bottom": 40,
                "left": 55
              },
                x: function(d){ return d[0]; },
                y: function(d){ return d[1]; },
                useVoronoi: false,
                clipEdge: true,
                transitionDuration: 2000,
                useInteractiveGuideline: true,
                xAxis: {
                    tickFormat: function(d) {
                        return d3.time.format('%x')(new Date(d))
                    },
                    showMaxMin: false
                },
                yAxis: {
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    }
                }
            }
        };

        $scope.data = [....] 

});

In Approach #1, I don't see any angular js controllers concept and in Approach #2, I don't see chart drawing calls like the below to draw the chart d3.select('#chart svg') .datum(sinandcos()) .transition().duration(500) .call(chart) .selectAll('.nv-y text') .attr('x',-15)

In Approach#2, if I want to add 4 charts in a single page, as below, how can I do it? Can any one point some reference code for this?

                   chart1#    chart2#
                   Chart3#    chart4#

Upvotes: 1

Views: 387

Answers (1)

Lucas
Lucas

Reputation: 1389

I believe you are confusing the nvD3 library (#1) with a library such as Angular-nvD3 built on top of the nvD3 library (#2).

To add 4 charts to a page, you could create 4 containers in the arrangement you want and then repeat the nv.addGraph for each of them to add the graphs.

The Approach #1 would look like:

html :
<div id="chart1">
  <svg></svg>
</div>

<div id="chart2">
  <svg></svg>
</div>

<div id="chart3">
  <svg></svg>
</div>

<div id="chart4">
  <svg></svg>
</div>


script :

nv.addGraph(function() {
  ...
  d3.select('#chart1 svg')
  ...
}

nv.addGraph(function() {
  ...
  d3.select('#chart2 svg')
  ...
}

nv.addGraph(function() {
  ...
  d3.select('#chart3 svg')
  ...
}

nv.addGraph(function() {
  ...
  d3.select('#chart4 svg')
  ...
}

Upvotes: 2

Related Questions