Pie Chart Generator

This is the Pure CSS3 Pie Chart Generator, Kyle Larson's Article helped me build this Generator.



Pie Size(px):
Base Color:
Link Percentages ?
Pie Slice 1: Color: Percentage(%):
Pie Slice 2: Color: Percentage(%):
Pie Slice 3: Color: Percentage(%):
Pie Slice 4: Color: Percentage(%):
Pie Slice 5: Color: Percentage(%):
Pie Slice 6: Color: Percentage(%):
Pie Slice 7: Color: Percentage(%):
Pie Slice 8: Color: Percentage(%):
Pie Slice 9: Color: Percentage(%):


HTML + CSS
Note: You need to add other prefixes by yourself so it can be displayed correctly in all browsers, if you're using Chrome, -moz- prefixes won't show up, and vice versa. The JS Library will make things easier. Also, in Chrome, the pie displays as if it was eaten a little bit from left and right, this only displays here, if you paste the code elsewhere it will render perfectly.
Please report any Bug.

16 comments:

  1. Great job. This will come in very handy as we update our capital campaign donations/goal online. Thanks!

    ReplyDelete
  2. This is not working in google chrome...

    ReplyDelete
    Replies
    1. Dear Anonymous,

      Thank you for your feedback.

      I am using Chromium Version 28.0.1498.0 (198077) and It's working perfectly, which version are you using? Please make sure it's updated.

      Thanks again.

      Delete
  3. I want to use this connect with my database ? my backend is Django(python). I bunch of automated data generates , how I link this to this chart?

    ReplyDelete
    Replies
    1. Hi nikol,

      Concerning working with database, you can use the JavaScript Library which is the same library used with this generator, the JavaScript Library is very easy to use, you can check it here: http://mistercss.blogspot.com/2013/04/pie-chart-javascript-library.html .

      I don't know about Django, but with my humble knowledge in Server Side languages, I would mostly use JQuery's Ajax Request, bring data from the database, and use them directly in JavaScript to create the pie, and I'm sure Django also has a special way to provoke JavaScript codes via Server Side, when you're able to do that, the pie can be created with 1 line of code.

      Delete
  4. Very nice Tool, Thank you
    Trying to fiddle a bit with circular Elements through css and Im not familiar with creating them so this is a great help to learn on examples.

    ReplyDelete
  5. This is a great script, nice and simple and to the point, plus it's really easy to read!

    ReplyDelete
  6. Very nice work. Have you considered labeling slices with percentages or has anyone done this?

    ReplyDelete
    Replies
    1. Thanks! Upgrading this script is one of my goals but I haven't added anything to it because of my busy jobs! Hopefully I will soon! Currently I'm adding labels by myself in my projects, I'm just using the order of colors and percentages to create small legends next to each pie!

      Delete
  7. Very good job. Exactly what I needed. Excellent.

    ReplyDelete
  8. It is a relevant website for me and it made my day . do Americans need visa for Turkey. yes of course , why not. Turkish visa is compulsory for American citizens to visit turkey.

    ReplyDelete