Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Circular graphs in SVG

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 255
    Comment on it


    Here I am sharing some information related to circular graphs using Javascript.

    JavaScript provides a library that generates circular graphs in SVG. We need to include circles.js or circles.min.js file in the HTML file. It can be downloaded from this link:

    Then, we create a div for placing the graphs in the HTML like below:

    <div class="circle" id="circlesFirst"></div>

    Now, we can create a graph by calling this id like below:

    var createCircle = Circles.create({
      id:                  'circlesFirst',
      radius:              50,
      value:               43,
      maxValue:        200,
      width:               30,
      text:                function(value){return value + '%';},
      colors:              ['#ddd', '#aeaeae'],
      duration:            600,
      styleWrapper:        true,
      styleText:           true


    id - the ID that is given to div to hold the graph
    radius - radius of the circles
    value - starting value of the circle (By default 0 )
    maxValue - maximum value of the circle (By default 100)
    width - the width of the outer circle or ring
    colors - It contains an array of colors
    duration - value in miliseconds of animation duration
    text - the text that will be displayed at the center of the circle. It can also be a function that contains the value of the text like below:

    function(textValue) {
      return '$'+textValue;
    function() {
      return this.PercentValue() + '%';

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: