lugolabs / circles Goto Github PK
View Code? Open in Web Editor NEWA lightweight JavaScript library that generates circular graphs in SVG.
Home Page: https://www.lugolabs.com/circles
License: Other
A lightweight JavaScript library that generates circular graphs in SVG.
Home Page: https://www.lugolabs.com/circles
License: Other
Can we have the option for animation to start only when in screen view or scrolled too with an offset value?
Great plugin. More of an enhancement but would it possible to pass values as data attributes on the div instead of in the js?
<div class="circle" id="circles-1" data-value="10"></div>
Wouldn't it be convenient if we can change the background color of the inner circle? Now it is transparent, which is great because in most cases the background of a webpage will be white-ish. But for those times when using it in a dark theme for example, I think it would be a nice extra if you could parameterise the background and font color. I'd be happy to take a look at it if you're interested. Unless this feature already exists and I dumbly overlooked it?
It would be nice if we could use easing on the animation.
Is there a way to update values?
I'm trying that when the user performs certain action, i.e. press a button, the circle updates with a bigger percentage value.
Can I do that?
Thank you.
Could you update the animation to happen when the circle appears on the screen on scroll?
Hey,
Pretty nice plugin, I am currently facing only one issue.
Can you please tell me how to stop animation by calling a javascript function. I was using it for file upload function where the upload percent value I get through ajax but the speed of getting values is so high the sometime last update command overwrites the new one.
now, need inside circls radius less than outside circls radius,help
Would be great to be able to download the plugin directly to my project.
Is it possible to show the real value of percentage if greater than 100%?
Maybe with an option for different color of path if greater than 100%?
Thanks in advance,
\m
Hi,
Can you add the minified js file ?
thanks
Please, add viewbox svg for image svg can responsive all screen
I am trying to override the font size of the text inside the circle by passing in a class name for textClass property in the constructor. But it seems the default font size gets priority
Hi, is it possible to chose the movement of filling of the circle (clockwise / counterclockwise)? How? Thanks
Hi,
Is there a way to make second color linear-gradient in options, like this ?
Circles.create({
id : "circle",
radius : 45,
value : 60,
maxValue : 100,
width : 7,
text : 5,
colors : ["#f1f1f1", "linear-gradient(#e66465, #9198e5)"],
duration : 400,
wrpClass : 'circles-wrp',
textClasss : 'circles-text',
styleWrapper : true,
styleText : true
});
And give something similar to this (not necessary the same colors and shape) :
Hi,
The issue that I'm having is when I set the 'text' as a non numeric value like in the following, I get the value of 'Nan' as default before the animation starts:
Circles.create({
id: 'circles-1',
percentage: 78,
radius: 60,
width: 10,
text: 'Text',
colors: ['#eee', '#d48425'],
duration: 400
})
Here is a preview: http://imgur.com/LThJfth
Is there any way to fix this?
Hello,
I can't show only the text.
I don't want the circle and I don't want to use the default style for the text. I put false for these parameters :
styleWrapper,
styleText:
But the default style is still be used for the text.
How can I show only the text without the default style?
Is there a way to show multiple values in the SAME circle at the same time?
Is there a way to get it not to animate until it is visible on the page?
I have the element a ways down my page but it animates right away not when the user gets to it.
One type of sample loading objects:
http://widgets.better2web.com/loader/
With various types of animations with multiple values being.
:D
Thank you for plugin but I found some bug in FF.
When I set:
duration: 1500
animation takes around 3 seconds. Also when I change duration to 5000 nothing changes...
Do you know where can be problem? Other browsers are fine...
is there a way that the circles also display negative values and they would still fill up
Hi,
Is there a way to display more data by mouse hover on circle or create a popup when click on the circle?
hi, I'm from cdnjs. Recently we want to add your lib to https://cdnjs.com, could you please consider adding git tags for v0.0.6 and each released version in the future because we use git auto-update to add each released version to cdnjs automatically, it can help us maintain your lib the latest version to your lib users.
thank you very much!
Are there any event handlers?
For example I need to change colors on every value updating. Is it possible now?
Do you have a suggestion on how to make the start be the 06:00 position (bottom of circle) and then rotate clockwise from there?
This property is really in need.
Add UMD Wrapper, so Circles can be used directly from npm.
Is there a way to make larger text size smaller to fit into the circle?
I have multiple circles and need to keep circle size the same. But some of the circles have large number and it will overflow (see picture). Would like to find out is there a way to auto adjust the text to fit into the circle or something that need to be done manually.
Thanks for your help.
I am looking to make circles work within my React.js app as my UX Designer has used in in her code. I am familiar with Highcharts and am assuming since you explain Circles is based on that approach, I can incorporate it into React the same way. But I do have some feedback on your documentation:
From the Documentation:
Install with grunt
Get the library
Install all the dependencies, run npm install
Once you have the dependencies installed, run grunt from the project directory. This will run the default grunt task which will minify circles.js to circles.min.js
I couldn't find a reference to it in the PR records either, though there is a trail of when it was added back in 2015
In the chances this 'issue' gets a response soon, I would appreciate someone sharing the exact npm package to use and if anyone has used Circles in a React app please share your approach as well.
Thanks!
We're having trouble using this with ES6 imports?
We've tried:
import 'circles';
import 'angular-circles'; // <-this works
and also
import Circles from 'circles';
i want to update the value and the maxvalue at the same time
Everything works great so far , i just can't figure out how to remove the decimals that will be displayed when the Value counts up..thanks a lot 👍
Hi,
Love this project. However, is there someway to make the circles responsive? As in, adjust the radius of the circles to adapt to the size of their containers so that when the browser re-sizes the circles do not overflow the containers.
Thanks.
I love the project, but would like to be able to show both positive and negative percentages. It would be really nice if a plus sign (+) or a minus sign (-) could be added to the number in the center. (+75.25%) or (-75.25%) That way I can show percentage of increase or decrease.
Thanks!
If you find/replace all instance of "class" with "className" in the circles.js files, it works just fine. However, you run into issues whenever someone npm/yarn installs because the registered module doesn't contain those changes.
I don't see any difference when I set duration 1 or 1000.
Is there a way to make animation faster?
Is there a data-attribute for making the animation work counter-clockwise as apposed to clockwise?
Thanks,
-B.
I've not been able to achieve this via CSS, was wondering if there was some support in the library itself?
I would be very happy, if a bower package would be available
Hello,
Can i have the percentage and number (and other values for that matter) defined in html ?
Take the example below:
<div class="circle" id="circles-1" data-percentage="10" data-number="10"></div>
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.