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

Question

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?

mer10z_tech · Accepted Answer · 2014-06-12 14:27:48Z

3

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.

answered Jun 12, 2014 at 14:27

mer10z_tech

6947 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dayan Moreno Leon · Accepted Answer · 2014-06-17 17:23:01Z

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

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

A SIMPLE DIRECTIVE

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

[{value:x,legend:y}]

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.

.directive('pieChart',function(CommService,$compile,$timeout){
return{
    restrict:'A',
    replace:false,
    scope:{
        gdata:'@data'
    },
    template:'<div id="piecontainer_{{$id}}"></div>',
    link:function(scope,element,attrs){

        var data=[];





        /*data=[{value:x,legend:y}]*/
        function Draw(data){
            var i,arr=[];

            for(i=0;i<data.length;i++){
                arr.push(data[i].legend);
            }

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

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

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

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

            var node=element[0];

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

            var g = svg.selectAll(".arc")
                .data(pie(data))
                .enter().append("g")
                .attr("class", "arc ");


            var path=g.append("path")
                .attr("d", arc)
               .style("fill", function(d) { return color(d.data.legend); })
                .style("stroke","#3592ac")
                .style("stroke-width","5px")
                .style("position","absolute");
        }



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

    }
};
})

Thanks Dayan for the design, is there any sample code reference with this structure to ease my development?

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

A SIMPLE DIRECTIVE

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

A SIMPLE DIRECTIVE

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related