4

I want to create a circle which is divided into 6 sectors based on some values, the angle of the sector is dependent on some parameter. The bigger the value of the parameter, the larger the radians of the circle.

The way I understand it can be built by making a circle which has this 6 different portions, and then put another div on top, which creates this white ring like effect. I know how to create circle, but not able to understand how to dynamically divide it into different colored sectors.

Is this even possible with CSS, does a solution exist using Javascript. Any help will be deeply appreciated.

circle

Community
  • 1
  • 1
Sachin
  • 3,672
  • 9
  • 55
  • 96
  • 1
    CSS circle with four points - Fiddle: http://jsfiddle.net/tupCW/.. I am , however; not aware of any CSS only solution with 6 sectors – Rasmus Søborg May 04 '13 at 20:00
  • It's most likely possible with a SVG library: http://raphaeljs.com/ – Blender May 04 '13 at 20:03
  • There won't be any CSS only solution if, as you said, `the angle of the sector is dependent on some parameter`. I understand this parameter to be rather variable - no way to go with CSS. – Kiruse May 04 '13 at 20:03
  • You might want to have a look at http://de.wikipedia.org/wiki/Vorlage:Sitzverteilung - from there on you will only need different border radii, and a solution for getting 360° (I can only think of one section being larger than 90°). Maybe a `` or `` will fit your needs better - it would definitely be simpler. – Bergi May 04 '13 at 20:06
  • 3
    Try this: http://mistercss.blogspot.in/p/pie-chart-generator.html – Rajender Joshi May 04 '13 at 20:14
  • @SonuJoshi: When I click on create chart nothing happens – Sachin May 05 '13 at 06:56
  • 1
    It was fun :) http://jsbin.com/elozep/1/edit – drinchev May 05 '13 at 08:15
  • @drinchev Wow!!! But its not dynamic in the sense I can change the sector sizes based on certain value – Sachin May 05 '13 at 09:24
  • 1
    Yes, for this you'll have to use Raphael or something else ;). I made it just for fun and for answering your original question : "How to create a multi colored circle in html and css" – drinchev May 05 '13 at 09:44
  • @Sachin I fixed it :P Try to Click on Create Chart Again : http://mistercss.blogspot.com/p/pie-chart-generator.html – Ali Bassam Jun 01 '13 at 19:41

3 Answers3

2

HTML5 Canvas is the way to go. Here are some links to learn:

W3C Specification

Kinetic.js

tobspr
  • 8,200
  • 5
  • 33
  • 46
  • I guess Kinetic.js would be an overkill in this case, since I want a very non-interactive and simple chart. Maybe once we make it more complex we can go for Kinetic.js – Sachin May 05 '13 at 07:22
  • Yeah, this was just an example what you can do with canvas .. of course you do not need a library for something like that .. – tobspr May 05 '13 at 10:45
1

Try something like this: http://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-iv-simple-pie-charts/

It should be noted that I found that once by using google to find this question/answer: HTML5 Canvas pie chart

Community
  • 1
  • 1
nullSharp
  • 331
  • 1
  • 4
  • Thanks for the article, it was very helpful. I am new to HTML5 and didn't google a solution using HTML5 – Sachin May 05 '13 at 07:09
1
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<canvas id="first" width="300" height="300" style="border:1px solid #000;">Your browser       does not support the HTML5 canvas tag
</canvas>

 <p>
  <select name="shapes" id="shapes">
     <option value="Square">Square</option>
     <option value="Circle">Circle</option>
  </select>
</p>
<p>
  <select name="bkcolour" id="bkcolour">
    <option>Red</option>
    <option>Black</option>
  </select>
</p>

<button onclick="drawshapes()">Try it</button>

<script>
    function drawTenSquare()
    {
   for(var i=0; i<10; i++)
   {
        var x=45;
    var y=25;
    var canvas =document.getElementById("first");
            var context=canvas.getContext("2d");
            context.fillStyle="#FF0000";
            context.fillRect(x+(i*15),y+(i*5),10,10);
   }
   }

   function drawTenCircle()
   {
    for(var i=0; i<10; i++)
    {
       var canvas=document.getElementById("first");
           var context=canvas.getContext("2d");
           context.beginPath();
           context.arc(95+(i*5),50+(i*2),40,0,2*Math.PI);
           context.stroke();
   }
  }

  function drawshapes()
  {
   var shape = document.getElementById("shapes")
   var index = shape.selectedIndex;
   var valindex = shape[index].value;

   if(valindex == "Square")
   {
    drawTenSquare();
   }
   else if(valindex == "Circle")
   {
    drawTenCircle();
   }
}
</script>

</body>
</html>
M. Haris Azfar
  • 598
  • 6
  • 16