CODEWITHSUNDEEP
javascriptcss
sploiber
sploiber

Reputation: 621

CSS3 pie chart with variable percentage

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"?

Upvotes: 4

Views: 5025

Answers (2)

dmi3y
dmi3y

Reputation: 3522

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.

Upvotes: 2

Black Bird
Black Bird

Reputation: 797

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/

Upvotes: 2

Related Questions