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. JoshJune 17, 2013 at 10:32 PM

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

    ReplyDelete
  2. AnonymousSeptember 12, 2013 at 10:02 AM

    This is not working in google chrome...

    ReplyDelete
    Replies
    1. UnknownSeptember 12, 2013 at 12:12 PM

      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. nikolOctober 15, 2013 at 6:11 PM

    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. UnknownOctober 16, 2013 at 5:16 PM

      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. AnonymousFebruary 2, 2014 at 7:00 PM

    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. AnonymousFebruary 3, 2014 at 6:23 PM

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

    ReplyDelete
  6. AnonymousJune 14, 2014 at 8:31 AM

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

    ReplyDelete
    Replies
    1. UnknownJuly 21, 2014 at 12:44 PM

      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. UchephilzAugust 21, 2014 at 6:51 PM

    Totally Splendid

    ReplyDelete
  8. AnonymousSeptember 13, 2014 at 5:44 PM

    Very good job. Exactly what I needed. Excellent.

    ReplyDelete
  9. MatthewApril 4, 2022 at 11:12 AM

    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
  10. canerJuly 10, 2023 at 1:12 AM

    dijital kartvizit
    referans kimliği nedir
    binance referans kodu
    referans kimliği nedir
    bitcoin nasıl alınır
    resimli magnet
    CTVY

    ReplyDelete
  11. onurJuly 25, 2023 at 4:14 AM

    hatay
    kars
    mardin
    samsun
    urfa
    D680JQ

    ReplyDelete
  12. recepSeptember 7, 2023 at 8:53 AM

    arnavutköy
    artvin
    avcılar
    aydın
    bağcılar
    AZLY

    ReplyDelete

Subscribe to: Posts (Atom)