4 Replies Latest reply on Jan 7, 2014 7:14 AM by NYG-vibeke

    chart pie origin problem



      I try to add  chart pie on my html files. I use D3js library for this.


      I create on symbol where i put one rectangle. The shape label's is "Rectangle"


      I add this follow code in my first frame



      var testdata=[
      {key:"label 2",y:5.4,autre:"milliard"},
      {key:"Vinci energies",y:9,autre:"milliard"}];
      sym.$('Rectangle').append('<svg id="graph"></svg>');
      nv.addGraph(function() {
                      var width = 1024,
                          height = 768;
                      var chart = nv.models.pieChart()
                          .x(function(d) { return d.key })
                          .y(function(d) { return d.y })
                          .values(function(d) { return d })
                          .tooltipContent(function(key, y, e, graph) {  return '<h3>' + key + '</h3>' +'<p>' + y + '&euro; soit '+e.point.autre+' %</p>' ; });
                            .attr('width', width)
                            .attr('height', height)
                  //chart.dispatch.on('legendClick', function(d,i) { console.log(d,i) });
                      //chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
                      return chart;


      When i launch the page , my pie chart is displayed but the origin of my svg is not correct (only with webkit browser)Capture d’écran 2013-08-10 à 10.31.30.png


      With firefox the pie chart is in good place



      When i look the generate css (with webkit browser), i find this property  :


      html|* > svg {
      -webkit-transform-origin-x: 50%;
      -webkit-transform-origin-y: 50%;



      On firefox there isn't svg css property



      I don't know how to resolve the problem. I try to add some css property to change the origin point but this doesn't work.

        • 1. Re: chart pie origin problem
          Steph_edge Level 1

          Before the edge library was load the pie chart is center!

          Isn't bug of Edge animate?

          How to resolve it ?

          • 2. Re: chart pie origin problem
            robboerman Level 4

            its not a bug, your browser needs a second to load a libary with all the settings. put a preloader on it if you dont want users to see the stuff before everything has loaded.

            or make the piechart itself with edge animate (brings the load time down)


            • 3. Re: chart pie origin problem
              Steph_edge Level 1

              if it is not a bug why the preview are different on firefox and webkit browser?

              I need to use this library to make dynamic chart and i don't want to reinvent the wheel..

              I saw your link before my post but it's not a solution for me.


              So how can i put the pie chart in the center of my dynamic svg  ... ?

              • 4. Re: chart pie origin problem

                To make it work in Chrome and Safari (webkit browsers), you need to do some changes to your code. Add a g element and put your pie chart in it:


                var g = svg.append("g").attr("transform", "translate("+xvalue+"px,"+yvalue+"px)").style("-webkit-transform", "translate("+xvalue+"px,"+yvalue+"px)");



                Change the xvalue and yvalue to your values. If you want the chart centered in your div it would be like this:


                d3.select("#graph").attr("transform", "translate("+width/2+"px,"+height/2+"px)").style("-webkit-transform", "translate("+width/2+"px,"+height/2+"px)");

                1 person found this helpful