CODEWITHSUNDEEP
javascriptjquerycss
codeofnode
codeofnode

Reputation: 18609

how to draw a configurable pie chart in css

from the link http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/

I am looking for a quick solution to make pie chart with css. And i don't know the deep implementation of css.

so quickly i made the fiddle : http://jsfiddle.net/S8gj2/

var setButti = function(n, p, f) {
        var total = n + p + f;
        var atrs = { 'tc-passed' : p*360/total, 'tc-failed' : f*360/total, 'tc-ne' : n*360/total };
        var butti = $('#buttiEl');
        butti.html('<div class="pieContainer"><div class="pieBackground"></div></div>');
        for (var key in atrs) {
          $('.pieBackground', butti).append('<div class="'+key+' hold"><div class="pie"></div></div>').
            css('-webkit-transform', 'rotate('+atrs[key]+'deg)').
            css('-moz-transform', 'rotate('+atrs[key]+'deg)').
            css('-o-transform', 'rotate('+atrs[key]+'deg)').
            css('transform', 'rotate('+atrs[key]+'deg)');
        }
      };


setButti(1,1,1);

But it does not show a pie chart it is simply a grey circle. can any one help to make this pie chart.

Upvotes: 0

Views: 844

Answers (1)

Becuzz
Becuzz

Reputation: 6866

You need to change your javascript to create the divs in the appropriate places in the DOM with the appropriate rotational offsets.

var setButti = function(n, p, f) {
        var total = n + p + f;
        var atrs = { 'tc-passed' : p*360/total, 'tc-failed' : f*360/total, 'tc-ne' : n*360/total };
        var butti = $('#buttiEl');
        butti.html('<div class="pieContainer"><div class="pieBackground"></div></div>');
        var offset = 0;
        for (var key in atrs) {
          var wedgeWidth = atrs[key];
          if (wedgeWidth > 180) {
              $('.pieContainer', butti).append(buildWedge(key, 180, offset));
              wedgeWidth -= 180;
              offset += 180;
          }
          $('.pieContainer', butti).append(buildWedge(key, wedgeWidth, offset));
          offset += wedgeWidth * 1;
        }
      };

function buildWedge(cssClass, wedgeWidth, offset) {
    var wedge = $('<div class="pie"></div>').
      css('-webkit-transform', 'rotate('+ wedgeWidth +'deg)').
      css('-moz-transform', 'rotate('+ wedgeWidth +'deg)').
      css('-o-transform', 'rotate('+ wedgeWidth+'deg)').
      css('transform', 'rotate('+wedgeWidth +'deg)');
    var container = $('<div class="'+cssClass+' hold"></div>').
      css('-webkit-transform', 'rotate('+ offset +'deg)').
      css('-moz-transform', 'rotate('+ offset +'deg)').
      css('-o-transform', 'rotate('+ offset +'deg)').
      css('transform', 'rotate('+offset +'deg)');
    container.append(wedge);
    return container;
}

JS Fiddle

Upvotes: 1

Related Questions