Statistics circles in CSS

Question

I would like to do something like this but I don't know how.

I have an idea but it doesn't work.

<div id="stats">
    <div id="men" class="circle"></div>
    <div id="women" class="circle"></div>
    <div id="white-circle" class="small-circle"></div>
</div>

<style>
#stats {
    width: 100px;
    height: 100px;
    background: white;
    position: relative;
}

.circle {
    border-radius: 100px;
    background: #CCC;
    width: 100px;
    height: 100px;
    position: absolute;
}

.circle#men {
   background: #27ae60; 
}

.circle#women {
   background: #f26646; 
}

.small-circle {
    border-radius: 100px;
    background: white;
    width: 65px;
    height: 65px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}
</style>

if you want to do it by your self, you will have to use SVG (generate it with javascript), but there are alot of good chart libraries for javascript out there, you just have to search a bit — x4rf41, Commented Aug 13, 2013 at 8:05
I provided a complete implementation in my answer, in case you're not comfortable writing one in SVG. — AP., Commented Mar 14, 2017 at 17:04

Roseann Solano · Accepted Answer · 2013-08-13 08:24:29Z

It is actually called as donut chart. It will be difficult for you to just use a div tag. Instead use canvas or just use a javascript framework for charting. Here are few examples.

<canvas></canvas>

markup

<canvas width="500px" height="250px"></canvas>

javascript

$(document).ready(function() {

    var context = $("canvas")[0].getContext("2d");

        var values = '24,43,43,45';
        var segments = values.split(",");
        var segmentColor = 50;
        var total = 0;

        //Reset the canvas
        context.restore();
        context.save();
        context.clearRect(0,0,500,250);

        for (i=0;i<segments.length;i++) {
            total = total + parseFloat(segments[i]);
        }

        var parts = 360/total;
        var startAngle=0

        context.translate(100,100)
        context.rotate(270*(Math.PI/180)); //Turn the chart around so the segments start from 12 o'clock

        for (i=0;i<segments.length;i++) {

            //Draw the segments
            context.fillStyle ="rgb(" + segmentColor + "," + segmentColor + "," + segmentColor + ")";
            context.beginPath();
            context.moveTo(0,0);
            context.arc(0,0,100,startAngle*(Math.PI/180),(startAngle + parseFloat(segments[i]*parts))*(Math.PI/180),false);
            context.lineTo(0,0);
            context.closePath();
            context.fill();

            startAngle = startAngle + parseFloat(segments[i]*parts);
            segmentColor = segmentColor + 20;   
        }

            //Turn into a donut!!                   
            context.fillStyle = "White";
            context.beginPath();
            context.arc(0,0,60,0,Math.PI*2,false);
            context.closePath();
            context.fill();                 


});

Notice: var values = '24,43,43,45'; // This will basicall divide the circle into 4 parts Demo: http://jsfiddle.net/Zgfb6/

This is basically just a link only answer, it would be better to include a sample of how to use canvas to meet the requirements — musefan, Commented Aug 13, 2013 at 8:16
theoretically with creative use of 3d-transform and border radius and alot of divs you might be able to do it, but it wouldn't look as good and would be much more work, and it would probably be less compatible. is there any reason why you dont want svg? — x4rf41, Commented Aug 14, 2013 at 13:37

fyr · Accepted Answer · 2013-08-13 08:12:28Z

1

One method would be to just use a chart framework which supports donut charts like d3js.

Examples made with d3js:

edited Aug 13, 2013 at 8:12

answered Aug 13, 2013 at 8:07

fyr

20.6k7 gold badges39 silver badges53 bronze badges

+1 I've used this in the past and it is excellent for representing statistical information.
– zik
Commented Aug 13, 2013 at 10:43

Add a comment |

AP. · Accepted Answer · 2017-03-13 17:16:24Z

Here's how to make circles in css:

If you know how to make square in css you only need to add border-radius: 100% in css. That will convert a square into circle. Here is some more code which to address your question:

<html>
    <head>
        <title> Disappering Circles </title>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <div id="red"></div>
        <div id="blue"></div>
        <div id="yellow"></div>
        <script type="text/javascript"></script>
    </body>
</html>

Here is the CSS:

#red {
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
    border-radius: 100%
}
#blue{
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
}
#yellow{
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block;
}

AP. · Accepted Answer · 2017-03-14 17:02:31Z

You could also use Highcharts, and more specifically highcharts-chart (web-component of Highcharts) to get a chart like this:

Implementation:

chart.data = [{
  name: 'Clients',
  size: "100%",
  innerSize: "60%",
  showInLegend: true,
  dataLabels: {enabled: false},
  data: [
    {name: "Men", y: 2258, color: '#20ad61'},
    {name: "Women", y: 5023, color: '#f26645'},
  ],
}]

chart.legendOptions = {
  enabled: true,
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'middle',
  labelFormatter: function() {return Math.round(this.y/7281*100)+"% "+this.name},
}

chart.chartOptions = {spacingLeft: 0,}

chart.highchartOptions = {
  title: {
    verticalAlign: 'middle',
    y: -2
  },
  subtitle: {
    verticalAlign: 'middle'
  },
}

#chart {
  width: 23em;
  height: 10em
}

#chart .highcharts-point {rx: initial; ry: initial}

<base href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/">
<link rel="import" href="highcharts-chart.html">

<highcharts-chart id='chart' title='<b>7,281</b>' subtitle='CLIENTS' type="pie" title="" label="Gender" legend height-responsive></highcharts-chart>

Note: Click Run Code Snippet to see the chart.

Collectives™ on Stack Overflow

Statistics circles in CSS

4 Answers 4

Not the answer you're looking for? Browse other questions tagged
javascript
html
css
statistics
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Not the answer you're looking for? Browse other questions tagged javascripthtmlcssstatistics or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
javascript
html
css
statistics
or ask your own question.