CSS3 pie chart with variable percentage

Question

In HTML, I would like to do something like this:

<div class="thermometer">
  <div class="circle purple">
    <div class="pie-piece percent=75%">
    </div>
  </div>
</div>

where the result would be a 75% filled-in purple circle. (same thing as a pizza cut into 4 pieces, and one piece is missing) (The 75 comes from a database and must not be in the CSS)

My CSS for circle is this:

.thermometer .circle {
    position: absolute;
    width:26px;
    height:26px;
    -moz-border-radius:13px;
    -webkit-border-radius:13px;
    border-radius:13px;
    border: 1px solid #000000;
}
.thermometer .green { background-color: green; }
(other colors)

I looked at examples using "hold" and "clip" property, but didn't understand how to do it with a variable. How can I write CSS for "pie-piece"?

score 2 · Accepted Answer · edited May 23 '17 at 11:56

2

If you are referring to this tutorial, the "Hold" and "pieSlice1" are just the names of the class & ID.

You could predefine a a degree then use jQuery and change the CSS depending on what you get from the database. Check out this post for some more information.

.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});

http://jsfiddle.net/t7zLP/1/

edited May 23 '17 at 11:56

Community

1
1

answered Jan 04 '13 at 03:50

Black Bird

797
1
10
34

Thanks very much! Now I have a slightly different question- about matching the JQuery call with the classes. I will post that in a separate question. This worked beautifully! – sploiber Jan 04 '13 at 13:38

dmi3y · Answer 2 · 2013-01-08T05:41:09.453

Took it seriously, so answering with bit delay.

First, possibly something like this could be done better using canvas drawing (need check it), but just for fun made crazy mix with LESS+HTML+CSS3 and bit JavaScript which seems work anyway.

Here is working example https://c9.io/dmi3y/css3pie/workspace/index.html Should works with all modern browsers, and IE9 +, possibly you could add support to IE versions lower than 9. For this needed support for border radius and transforms. Latter one could be done with Matrix filter, and here is something to read plus working solution in .htc file http://samuli.hakoniemi.net/cross-browser-rotation-transformation-with-css/, but I do not tested it and personally would not care about older browsers much. I would just add notice about if you want see something upgrade browser. Also in FireFox there is some artefacts, possibly because I am using pseudo classes ::before and ::after and may be using real elements will improve this.

Tech information. Here is 9cloud code https://c9.io/dmi3y/css3pie. The core idea is using dynamically generated CSS using client side LESS. So with bit jQuery code which is taken for convenience and easily could be converted to any other library/core js.

Mile stones:

in your markup you define how many area should be filled in degrees

<div class="circle" id="pieOne" data-fill="30deg"></div>

and basically to make it works this is everything you need.

This is brief explanation what's going on:

Taking this value I do override LESS variables in embed styles and create CSS with less.refreshStyles()

<style type="text/less" id="lessPie">
    @import 'styles/pie';
    @fillDegree: #dataDegree#; // from 0deg to 180deg
    @baseRotate: 40deg;
</style>
<script type="text/javascript">
    !function(){
        var lessPieText = $('#lessPie').text();
        $(function(){
            var pieOneDataFill = $('#pieOne').attr('data-fill');
            while (parseInt(pieOneDataFill) > 180) {
                pieOneDataFill = (parseInt(pieOneDataFill) - 180) + 'deg';
            }
            while (parseInt(pieOneDataFill) < 0) {
                pieOneDataFill = (parseInt(pieOneDataFill) + 180) + 'deg';
            }
            $('#lessPie').text(lessPieText.replace('#dataDegree#', pieOneDataFill));
            less.refreshStyles();

            // update % value
            // 180deg         = 100%
            // pieOneDataFill = x%

            var percentValue = (parseInt(pieOneDataFill) * 100) / 180;
            $('#pieOneLegend').find('span').text(Math.floor(percentValue) + '%').end().show();

        });
    }()
</script>

As additional bonus you may rotate pie with @baseRotate: 40deg; value. Also shown legend with % value.

That's pretty much everything. For a while it support only one pie per page (or rather one type of pie) with one value. I will push this on github later and probably will work on project as it sounds to become interesting.

just realized you need % values setup not degree, will work it out later with LESS, for a while could suggest quick JavaScript conversion just simular how I did degrees to % conversion — dmi3y, Jan 08 '13 at 07:02
thanks so much for having such a long look at this!!! It's wonderful. It is just a little bit over my head right now. I do have one simpler version which needs a bit of help at the moment, which is http://jsfiddle.net/sploiber/VJHcH/53/ — sploiber, Jan 09 '13 at 20:56
you are welcome:) bw code already on github https://github.com/dmi3y/css3piecharts — dmi3y, Jan 09 '13 at 21:05
I just submitted a new question with this same jsfiddle. I can't seem to get the selectors right. Thanks again! — sploiber, Jan 09 '13 at 21:09

CSS3 pie chart with variable percentage

2 Answers2