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

    chart pie origin problem

    Steph_edge

      Hi,

      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:"label1",y:15.3,autre:"milliard"},
      {key:"label 2",y:5.4,autre:"milliard"},
      {key:"label3",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 })
                          //.showLabels(true)
                          .values(function(d) { return d })
                          .color(d3.scale.category10().range())
                          .width(width)
                          .height(height)
                          .tooltipContent(function(key, y, e, graph) {  return '<h3>' + key + '</h3>' +'<p>' + y + '&euro; soit '+e.point.autre+' %</p>' ; });
      
      
      
                        d3.select("#graph")
                            .datum([testdata])
                          .transition().duration(200)
                           //.attr('-webkit-transform-origin-x','100%')
                            .attr('width', width)
                            .attr('height', height)
                            .call(chart);
      
      
      
      
                  //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)

            http://www.youtube.com/watch?v=DfWTFn_dCt4

            • 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
                NYG-vibeke

                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