how to draw a configurable pie chart in css


Tags: javascript,jquery,css

Problem :

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.



Solution :

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


    CSS Howto..

    Is it possible to see how your html & css code would look on a mobile device without actually have a website url?

    How to center an image .logo via css? [duplicate]

    How to.. the middle div of three ever on center and if the navigator are resized

    How to change comma separated css values with Jquery.css Method?

    How to add and remove background images in css on clicking a link on page

    How to get the correct mouse position in relation to a div that has has a scale transform applied

    How to achieve multiple icon hover transitions over one image

    How to link HTML file to CSS in Windows Notepad (NOT NOTEPAD++) [closed]

    How to create a gullwing shape with CSS

    How to find last/first not empty child using only CSS?

    How to add media attribute to ASP.NET MVC4 style bundle

    how to apply background transparency on a div (for an AJAX loading animation)?

    CSS: How to set 100% width on the first li of ul

    how to specify different css for ie

    how to make a css gradient stop after so many pixels?

    How to style a subset of some text in HTML/CSS?

    How to auto width a form element with CSS?

    How to set a background-color to element which has the same id with anchor of url?

    How to remove a css class and add another when I get a certain mobile resolution

    How to add offset border to image of unknown size?

    How to use css to crop parts of an image

    How to separate CSS positioning from CSS styling?

    How to align buttons below and right-aligned to a HTML list?

    How to remove the border that show after clicking a picture

    How to remove the dots from custom menu with CSS

    How to make div height fit the content using css

    How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

    How to include CSS for a specific part of the page

    Test if is visible with ng-show attribute

    CSS: How do I get wrapped labels to align