D3 with AngularJs, Multiple charts on same page with different data based on common key


My requirement is as follows can any one suggest good references for code in D3 with Angular js.

In a single page I need to include multiple graphs (it could be line, bar, pie ), or it could be combination of any of these. Each graph should get json data from Database using Ajax request for particular customer id. The json data for each graph is different but to get the data each graph uses same customer id in query to Database. The customer dropdown appears on the top of the page, when I change the customers all these graphs have repopulated with changed customer data.

I am facing problem to put all the bit and peaces together to make this design, using multiple controllers each controller having different graph, and sharing the data using factory service, passing customer id to the data query of each of these controllers, etc. Can any one point some references with code for me to have best design to start?

Problem courtesy of: Madasu K


This is the structure i have used so far and has worked for me

                         DATA RETRIEVING SERVICE
                  |                 |                |
             TRANSLATOR 1    TRANSLATOR2         TRANSLATOR3
                  |                 |                |
                  |                 |                |
              DIRECTIVE 1     DIRECTIVE 2         DIRECTIVE 3


this assumes that the data us passed to the data attr of the directive as a json string in the format of


so in your template just need to do something like

 <div pie-chart data={{Data}}></div>

and your controller should have a Data variable in its scope with the formated data in it.

    template:'<div id="piecontainer_{{$id}}"></div>',

        var data=[];

        function Draw(data){
            var i,arr=[];


            var color = d3.scale.ordinal().domain(arr)
                .range(scope.colors||["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

            var width = $(element).width();
            var height =$(element).height()||width;

            var radius = Math.min(width, height) / 2;
            var arc = d3.svg.arc()
                .outerRadius(radius - 10)

            var pie = d3.layout.pie()
                .value(function(d){return d.value;});

            var node=element[0];

            var svg = d3.select(node).append("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

            var g = svg.selectAll(".arc")
                .attr("class", "arc ");

            var path=g.append("path")
                .attr("d", arc)
               .style("fill", function(d) { return color(d.data.legend); })

        scope.$watch('data', function (value) {

Solution courtesy of: Dayan Moreno Leon


I followed this tutorial to put my d3 charts inside a directive: http://www.ng-newsletter.com/posts/d3-on-angular.html

After your chart is in a directive you can treat it like any other angular directive and easily reuse it with different inputs parameters.

Discussion courtesy of: mer10z_tech

This recipe can be found in it's original form on Stack Over Flow.