Nice work!
Could you please post the unminified JS source? (i.e. jquery.circliful.js) so that we can fork and contribute?
For example, I'd like to:

• customize the animation speed (or disable it entirely),
• find out why the DIV element requires an id (and auto-generate one if it does not, based on a timestamp for example)
• find out why the classes placed on the DIV disappear (I'd like to put a float class there)

Thanks

I want to add tooltip on both portions of circle, one filled semi circle and other blank semi circle with different text. Is it possible to do that as its canvas.

Hi
Is it possible to get a filled circle and not having the border overlapping inside the filled area?
something like that:
http://i.imgur.com/3B36HDV.png
I couldn't see any option for that and don't understand why is it default like that.
thanks a lot

Got these options: <div class="stat" id="myStat1" data-dimension="180" data-text="90" data-info="" data-width="15" data-bordersize="15" data-fontsize="50" data-percent="90" data-fgcolor="#3c989e" data-bgcolor="#eee" data-fill="white" data-total="100" data-part="90" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff" data-animationstep="0.4"></div>

Bordersize didn't change.

When you create half circle, it uses the full dimension (height/width). For example, default data-dimension 200 (200px X 200px). This creates wasted white space below the half circle. It should be 200px by 100px in revised dimension calculation. I realize we can use negative padding or margins in CSS to get around this. But, I was hoping to avoid that.

I started using your plugin recently and it serves me quite well, but i need an extra feature, and i didnt see in your documentation how to do it.
What i need is to set exact width of outer border width. I noticed that outer border getting smaller proportionaly with data-width, but when i set data-width to 1px, my outer border stays somewhere between 10-15px. Is there any way that i can explicitly set outer border width to 3px.

I upgraded to the latest version of circliful and the data-width value stopped working. When I go back to the previous version of JS it works fine and it takes the value that I set. In the new version it seems to take always the default value.

Are there any plans for making the circle canvas responsive?

Line 55 of circliful.js is writing the count to the console. Should this be happening?

var timer = window.setInterval(function () {console.log(count++)....

Hi, it seems that info text is missing inside circle, or am I doing something wrong?

I added .text(info) to function addInfoText and now it is ok.

        function addInfoText(obj, factor) {
            $('<span></span>')
                .appendTo(obj)
                .addClass('circle-info-half')
                .text(info)
                .css(
                'line-height', (customSettingsObj.dimension * factor) + 'px'
            );
        }

How do i break lines in data-text ? Is it possible to have two or three lines of text depending on the lenght of the string ?

Hi,

Just wanted to let you guys know that in the docs it says data-icon-color and data-icon-size but the javascript uses iconcolor and iconsize. Use data-iconcolor and data-iconsize inorder to use these methods.

Yours sincerely,
wally

I was using the most recent version which included an update to include text instead of icons below the percentage. All was well with that. All of the charts on my site broke with the recent renaming of the files. I updated the css and js cdn paths, but now be charts will not initialize.

Using:
<link href="https://cdn.rawgit.com/pguso/jquery-plugin-circliful/master/css/jquery.circliful.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/pguso/jquery-plugin-circliful/master/js/jquery.circliful.min.js"></script>

To test, I have an element called "test-chart".
<div id="test-chart"></div>

I am initializing on document load with:
$("#test-chart").circliful({ animationStep: 5, foregroundBorderWidth: 15, backgroundBorderWidth: 15, percent: 20, foregroundColor: "#4caf50", text: "CPU" });

All I see is an empty chart with a gray outer border, none of the settings above applied.

Same thing happens in jsfiddle:
[https://jsfiddle.net/k1sfd7rt/]

I am using the latest js from here.
The pie circle disappear after resize or rotate the device. Need a refresh to reset.

I grabbed an old version from web which does not have this problem. (but with other error code)

Any ideas how to fix it?

Just noticed bower was failing to resolve this dependency. Looks like it was finding the 0.1.6 tagged release and crashing out once it read the bower.json.

mismatch Version declared in the json (0.1.5) is different than the resolved one (0.1.6)

Seems a few of my other dependencies have this issue too and seem to resolve, though. shrug

I want this on several bootstrap tab. But for there it animate when page loaded. But I want it when the tab is active.

Are not these two suppose to show percentage without data-percent attribute? It is not working for me unless i add data-percent and that kills the reason of above two. The examples also using all three of there attributes. What i am missing here?

When I test my site on mobile using this plugin I only get one white circle. There is no grey to display the percentage and all the other circles is gone

Hi guys,
I just downloaded this plugin and it's awesome, great job. But I found two small issues:

• I already have font-awesome included in my website and I followed your instructions in adding only the icon name without fa-, but this doesn't work. After looking through the source code, I found this:

.addClass('fa ' + $(this).data('icon')) 

instead of

.addClass('fa fa-' + $(this).data('icon')) 

• After I fixed the problem with the icon I noticed that icon is being included before the text and not after. I found this in addCircleText function:

.prepend(icon) 

instead of

.append(icon) 

Beside these small issues everything is awesome thanks.

Best regards

Please check

In the Readme it lists a hard dependency on 1.10, and I see in the bower file it's >= 1.5 -- can you be more specific?

There was a breaking change to the library's filename without notice.
Also the bowerfile still points to the old file name.

This plugin is just what i've been looking for - but when i render the demo code, it gets rendered three times - once with the circle and text where it should be, then the text, then the empty circle.

The code i have added to my page:
< div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff">< /div>

Love the new implementation, but lost the ability to have text instead of icons? Is there a way to use the old functionality to add text below the percentage instead of using an older version?

When i pass the data-type="half" parameter to the plugin , behind the scenes the following math is performed:

if ($(this).data('type') !== undefined) {
type = $(this).data('type');

            if (type == 'half') {
                startAngle = 2.0 * Math.PI;
                endAngle = 3.13;
                circ = Math.PI;
                quart = Math.PI / 0.996;
            }
        }

My question is about this line here quart = Math.PI / 0.996;

Now why is that line not:

quart = Math.PI;

or

quart = Math.PI / 1;

Which would be more logical ? or have you done that intentinally so that the drawing lines starts slightly before where it actually should ? i mean why devide by 0.996 ?

Line of code can be found HERE https://github.com/pguso/jquery-plugin-circliful/blob/master/js/jquery.circliful.js#L144

Just wondering if you had any plans to add this to bower

How to destroy Circleful progress bar.

Hi,
it amazing plugin...
i was facing some minor issue on setting the attribute values to data-total

some time data-total maximum values will be less than the 100 ?
in this scenario, data-total attribute is setting minimum = 100

let say example :

As per my scenario some time data-total will be less than 100...so how can i handle this situation...

I bundle circliful with other JavaScript files that declare "use strict". The circliful script fails to load because it fails strict validation

I've attempted to set animationstep="0" in the div tag, but it still animates. It also appears to animate the same speed, regardless of the animationstep setting.

Hi,

I had used this great chart in few of my projects for dashboard chart purpose, however in one of my projects I want this to be re-draw based on AJAX response is this possible?

your help is much appreciated.

Hi,

What´s the browser compatibility list ?
Does it work in IE ?

Thanks

Hey, neat plugin.

After using 0.1.4 on a project last year, I upgraded to 0.1.5 and noticed pixelation (jagged edges) on the foreground circle.

For the life of me, I cannot see what has changed from a canvas/drawing perspective.

I noticed there is now a bgrCircle() function which causes the undesirable rendering (compared to the previous version when all the drawing was inside animate()).

Any ideas?

0.1.4

0.1.5

remove the console.log @line 150 to prevent undetermined lines on console with text undefined.

Is it possible to delay the animation until the charts are scrolled into view?

Hi must do app with circliful on IE8 added excanvas so i don't have any error in console but plugin don't drawing circles so how this look on IE8

and how look on modern browsers

Please, add callback function when animation stoped (in param options). Thank you.

I've got the plugin implemented in a simple phonegap application, and it doesn't work for some reason. No errors that I can see in the debug panel, just doesn't render.

I have web version for development and that works perfectly, but for some reason, not in the app. The main container shows up on the first load of the given page, but doesn't draw the ring. Then if I switch pages, then switch back, nothing appears at all.

The app is built with Backbone.js which includes the following:

jquery.js (2.1.0)
underscore.js (1.5.2)
backbone.js (1.1.0)
pageslider.js (no version reference)
moment.js (2.6.0)

Then of course all my backbone models and views.

Any thoughts or suggestions would be greatly appreciated.

-Vince

The graphs look a little bit blurry on retina displays. Is there anyway we can add retina support?

Thank you for an awesome plugin!

this is a very good plugin and I had used in many of my projects.

some of my clients asked me that these charts are not working in Safari browser. So I would like to ask you that if any fixes for this are available.

Thanks for a good plugin.

I will be waiting for this.

Project Link is broken http://ladensia.com/circliful

I cannot get this to work at all in CS6.

I have added link and scripts to head
I have added scripts to the end
I have added all example elements the main page
only a couple numbers and names show up and no circles/colors

I've uploaded the file to my server and it does not work on my existing page
I also uploaded the circliful index to my server and that seems to render everything just fine.

The only thing I did not do is replace the font-awesome.min file because I have version 4.3 and the one it comes with is 4.1.

Help??
Thanks,

Would be handy to be able to let the circles go backward.

First of all thanks for the great work....

I am using AnglularJS and with the following example ( lots of attributes omitted for brevity)

<div id="myStat" ...... data-text="{{scope_text_variable}}" 
    data-total="{{scope_total_variable}}" 
    data-part="{{scope_value_variable}}"></div>

The chart does not display the values as the chart is drawn before the scope variables are resolved.

Do you know a simple/elegant way to convert your pure jQuery library to a more AngularJS friendly one?

Thank you in advance for the help

For some reason, my circles are always at 100%. This used to work, but is broken since the latest release (0.1.5)

<div class="circliful" data-dimension="90" data-text="vCPUs" data-width="5" data-bordersize="3" data-fontsize="14" data-total="200" data-part="82" data-fgcolor="#5fbeaa" data-bgcolor="#ebeff2" style="width: 90px;"></div>

$('.circliful').circliful();

Am I missing something?

Is there a way to update the percentage and the circle without re doing the circle?

I just want to update the circle every time the user performs certain action.

Thank you.

I'm trying to use circliful to create a bunch of graphs within an ng repeat. However it isn't working . Will circliful not work when used within an ng repeat.

<div ng-repeat="type in types">
    <div>
        <div id="myStat" data-dimension="300" data-text="{{type.value}}" data-info="" data-type="half"    data-width="40" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#fff" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>
    </div>
</div>

This is what my markup looks like. Any help or suggestions would be appreciated.

I have a scenario where I want the circle to display multiple percentage segments each with a different color while the percentage text displayed would be the first percentage segment. Consider a scenario that presents the percentage success, warning and failure of something. The combination of these would add up to 100% or if they don't, the existing gray would be the remaining segment.

Any thoughts on whether this is worthwhile supporting in this component? If not, perhaps some extensibility points could be added such that circliful could be extended to provide this support.

When I try to set the circles' fill colour in my script, e.g. .circliful({fill: "#FFF"}), this has no effect. Using data-fill="#FFF" does work, however. I am able to set all other options without using data- attributes except for this one.