Hello,
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: https://github.com/lugolabs/circles
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
});
where
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)