rendro / easy-pie-chart Goto Github PK
View Code? Open in Web Editor NEWeasy pie chart is a lightweight plugin to draw simple, animated pie charts for single values
Home Page: http://rendro.github.io/easy-pie-chart
License: MIT License
easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values
Home Page: http://rendro.github.io/easy-pie-chart
License: MIT License
I've had a problem with making your plugin work with IE8 and then realized that your example doesn't work either. The code fails at date.now() on line 131. I've tried a few different ways to fix it but when I use Date().getTime() for example then the percentages seem to go in all directions. It's like there is slight flicker at the end of the animation and then a change in percentages that doesn't seem to make sense. FF and Chrome are fine displaying the right values.
Sam
I was using easy-pie-chart in a website template, when I noticed that on my iphone 4 (safari), the charts were coming up with random values - sometimes in the negatives, and 4 digits long. Both the charts and the numbers were random. I disabled all other js (other than jquery) and they were still all over the show. At a guess, I disabled animation and they acted fine.
This is what was in my initilization code and html if you want to try and replicate it. I would try and help solve it, but I have no idea what I'm doing with javascript
$(function() {
$('.chart').easyPieChart({
barColor: '#60899a',
trackColor: false,
scaleColor: false,
lineCap: 'round',
rotate: 180,
lineWidth: 10,
size: 150,
//animate: 1000,
onStep: function(value) {
this.$el.find('span').text(~~value);
}
});
});
Hi,
It seems that you have to wait for approximately 5 seconds before trying updating the graph or the graph will enter an infinite rotating loop, apparently clearInterval does not stop the animate when I need it to. Do you have a solution for that??
Brian
I would like to add some simple interactivity to the chart, for example a simple hover, that would change the barColor...
so I did ...
var pie_options = {
....,
barColor : "#bbb"
}
$(selector).easyPieChart(pie_options);
$(selector).on("mouseover", function(){
pieOptions.barColor: "#666";
$(selector).easyPieChart(pie_options);
});
but nothing happens
Hi,
I'd like the content of my 'chart' div to be two line, rather than just one 'percent' or 'total' line. When I put in a
or any other HTML that would cause a line break, the second line is displayed outside the graphic below it. Am I doing something wrong? Is there a way to do this?
Thanks,
Hi there
I'm trying to use this in an application but have a problem in that the HTML is generated via an XSL transformation, I can get a number value into the div but can't seem to get the value into the data-percentage attribute. So I'm trying to find a way of updating the data-percentage attribute with the value of another element - am guessing this is done somehow using this.$el. but can't find an example of this anywhere. Would i need to give the data attribute a starting value like 0 and update on window load?
Many thanks in advance for any help
Hi Guys great plugin, I want to use these charts in a responsive template and wondered if the canvas can be set in % rather than pixels?
Many thanks
Matt
Hey,
Thank you so much for taking care of that little bug with firefox. Here's a another question or possibly a request. I guess when you create a pie chart there's always a border gap reserved for scale in canvas. Is it possible to remove that gap and let the pie chart take the whole space of canvas when the scaleColor is set to false? Once again, thanks for the great work here.
Brian
Why not add a function to create a gradient color from 0 to 100?
Would it be possible to display numbers with decimal places in the center? They are all rounded at the moment. 58,7% makes 59% in the chart. Perhaps there could be an option to configure this.
Is the Chart Responsive?
I tried setting the width & height of the canvas element as well as it's div container to smaller sizes as resolutions decrease. It works fine in Chrome, but if I open it up on my iPhone the size doesn't change.
Any suggestions?
Hi, how can i change the size of the chart?
The README.md needs updated with the changes of 2.0.3 and 2.0.4.
Hi Guys great plugin, I want to use these charts in a responsive template and wondered if the canvas can be set in % rather than pixels?
Many thanks
Matt
If I call another tab in my chrome window, the easy pie chart seems not to work properly. I created a fiddle: if I update the value and suddenly click on another tab of my chrome browser the pie chart run till the end instead of stops to 90.
Try:
I think we should add tests for all features and implementations to guarantee a better and more stable development process.
My suggestion is to add Jasmine tests and integrate them with the grunt workflow for fast and automated testing.
Ideas, insights, comments or thoughts are welcome.
Is it possible to update so pie charts look crisp on higher density mobile devices?
I keep on getting Uncaught TypeError: Cannot read property 'fn' of undefined
which means PieChart is trying to execute before jQuery is loaded.
My RequireJS looks good though..
requirejs.config({
"baseUrl": "/theme/Ias/js/lib",
"paths": {
"app":"../app",
"jquery":"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min",
"jquery-ui":'jquery-ui-1.10.3.effects.min',
"EasyPieChart":"jquery.easypiechart.min",
"typekit":"//use.typekit.net/knu6zcf",
},
});
requirejs(["app/common"]);
It would be awesome to load the script only if the div is in full viewport, or at least half way through.
Is it possible to change options dynamically, and chart redraw automatically ? I have tried and with no success.
Something like this:
var app = angular.module('app', ['easypiechart']);
app.controller('chartCtrl', ['$scope', function ($scope,frameworkFactory) {
...
$scope.start = function(){
var data = frameworkFactory.getData();
data.$get().then(function(v){
$scope.percent = data[$scope.data].percent;
$scope.options = data[$scope.data].options;
});
}
$scope.start();
...
How can I move the value for the pie into the Circle like on the screenshot?
Apologies if this has been brought up before, but is it possible to add easing effects to the line animation?
Cheers!
We should provide the options format for the angular module as JSON format in a separated attribute to be more conventional. That also will solve issues like referencing to variables (#44).
Example for easy-pie-chart:
<div
easypiehcart
ng-options="{ barColor: '#ef1e25', trackColor': '#f2f2f2', 'scaleColor': '#dfe0e0', 'scaleLength': 5 }"
ng-percent="percent"
></div>
A way better:
<div easypiechart ng-options="options" ng-percent="percent"></div>
var app = angular.module('app', ['easypiechart']);
app.controller('chartCtrl', ['$scope', function ($scope) {
$scope.percent = 65;
$scope.options = {
barColor: '#ef1e25',
trackColor: '#f2f2f2',
scaleColor: '#dfe0e0',
scaleLength: 5
};
}]);
What do you think about it ?
Hi Robert,
We are using your code in a site where we have jQuery and Mootools side by side and unfortunately your script failed to work in this environment.
Here is an example:
http://jsfiddle.net/6ZdNZ/
Error is:
TypeError: this.renderer.draw is not a function
At:
// initial draw
this.renderer.draw(currentValue);
I noted today, testing that on retina display ( such as iPad4 ) the canvas shrinks. I have read some articles on setting the retina display ( hidef ) within the script, just wondered if a implemented fix has been made or if indeed others have similar issues
There is an javscript error. 'undefined' is not a function.
It seem it is only a problem with an old safari version
Implemented it:
jQuery(document).ready(function($) {
$('.chart').easyPieChart({
size: '200',
lineWidth: '6',
lineCap: 'square',
scaleColor: '#d5d5d5',
trackColor: '#eeeeee',
barColor: '#0099cc',
easing: 'easeOutBounce',
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
var chart = window.chart = $('.chart').data('easyPieChart');
$('.js_update').on('click', function() {
chart.update(Math.random()*100);
});
});
Using angular version the animate options seems not working.
If I try to update the value the animation does not fire: http://plnkr.co/edit/7yQ1SiIPHFh62yxwnW9e?p=preview
Hello,
it seems like using a trackColor with value of false makes the piechart not use the lineWidth, rendering the chart with 1px.
Is this to be expected?
I mean, having a different lineWidth and no trackColor is an "extension request" or an "issue report"?
thank You.
Hi, Is it possible to add a inset shadow to the track so the graph will pop more? I know I can only send a color hex value through for now.
Hi there
Can you add AMD support? For RequireJS ...
Thx!
I try to use EASY PIE CHART but i have some problems to use the chart because I would like to use a numb instead a percentage. is it possible?
In my JS I put this:
var chart = x
$(function() {
$('.chart').data('easyPieChart').update(chart);
});
and into my php:
the problem is when my chart variable change i don't see my chart!!!
I was using easy-pie-chart in a website template, when I noticed that on my iphone 4 (safari), the charts were coming up with random values - sometimes in the negatives, and 4 digits long. Both the charts and the numbers were random. I disabled all other js (other than jquery) and they were still all over the show. At a guess, I disabled animation and they acted fine.
This is what was in my initilization code and html if you want to try and replicate it. I would try and help solve it, but I have no idea what I'm doing with javascript
<script>
$(function() {
$('.chart').easyPieChart({
barColor: '#60899a',
trackColor: false,
scaleColor: false,
lineCap: 'round',
rotate: 180,
lineWidth: 10,
size: 150,
//animate: 1000,
onStep: function(value) {
this.$el.find('span').text(~~value);
}
});
});
</script>
<div class="chart" data-percent="50"><span>50</span></div>
Hi great plugin and great work. just noticed that in your example page and in my page as well, if I put 100 in the data attribute then it shows always 99% on the bar. am i doing something wrong ?
Hello, Thank you for this work.
I was trying a way to reload the chart "onmouseover" and I did that by adding it here --> jQuery ('.updateEasyPieChart').on('mouseover', function(e) {...}. But I dont know how to update it, but keep the same percentage value(ex:80%). There is anyway to do that?
Thank you
hi! At first thx for the great plugin and the angular support :) From the examples I have seen that the options for the chart are passed as strings. Is it possible to configure the chart instance using scope variables in the controller? As a result the configuration would be reusable and very flexible.
Please you should add some example or a better documentation for the use of angularJs.
I'm trying to migrate to angularJs, but cannot make change to barcolor according to percent.
This was done with:
barColor: function(percent) {
percent /= 100;
return "rgb(" + Math.round(255 * (1-percent)) + ", " + Math.round(255 * percent) + ", 0)";
},
But how can I made the same with angularJs?
Check this plunker: http://plnkr.co/edit/7yQ1SiIPHFh62yxwnW9e?p=preview
Thanks
Hi there,
It seems that in IE8 any chart at 0% shows a full pie chart, but if you go up just by 1% it shows correctly. It also shows 100% as full bar. Is there a simple workaround for this?
Hi
It would be great to add support for drawing arrow (or other shapes) at the end of the chart. I guess there are 2 ways to do it, either place an image at the end or draw it directly on canvas. I am struggling with this currently, is there anyone with some ideas how to achieve this?
Thanks
Please add Easy-Pie-Chart
https://github.com/rendro/easy-pie-chart
Hi Rendro,
thank's a lot for your free plugin for Wordpress!
Actually at the moment even the example on the website http://rendro.github.io/easy-pie-chart/ does not show up on Safari, Version 6.1.1 (8537.73.11).
Do you know what's wrong with the code?
Best, ixtract
Is there any way to animate only when it appears on screen on computers also support for mobile devices, thanks
Hello.
I am using your plugin to show a countdown until a webrequest gets started. Thsi webrequest takes about 3 seconds. During that time I would like to show a preloader-gif inside the piechart.
I have tried this:
I have reversed the < > because github would try to parse it.
Instead of the image it prints just the raw text.
Any idea how I could do that ?
I think that with this plugin, if canvas support is not detected in the browser the easyPieChart function should be mapped to an empty closure. Thoughts?
If trackColor
or scaleColor
are set without the preceding # then the plugin fails to color the chart on FF (it works fine in chrome).
I would add a simple check to add the # to the beginning of the color if it's not there.
Hi there,
When the scaleColor is set to false, the chart will not be render on firefox I don't know why. I look up the Error Console and it shows:
uncaught exception: [Exception... "Could not convert Javascript argument arg 0 [[email protected]]" nsresult: "0x80570009(NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: ... :: <TOP_LEVEL> :: line 70" data: no];
Can someone look into the issue? Thanks
Since the plugin can be initialized from data-percent
via this.$el.data('percent)
the update()
method should update the data parameter to the new percent.
this.update = function(percent) {
percent = parseFloat(percent) || 0;
_this.$el.data('percent', percent);
// ... continue
I don't know coffee script or I would make a pull request.
edit: formatting with backticks
Greetings,
Excellent work with this plugin, just for the record, I got some negative values (or imcoplete ones) after a webpage reload (Ctrl + R or F5), for example, I tell to the plugin draw 35% sometimes it draws 29% or so, in a worse scenario it give me negative percents, also the negative percents appear after a long time stay on the page.
This is my code:
$('.percentage-light').easyPieChart({
barColor: function(percent) {
percent /= 100;
return "rgb(" + Math.round(255 * (1-percent)) + ", " + Math.round(255 * percent) + ", 0)";
},
trackColor: '#666',
scaleColor: false,
lineCap: 'butt',
rotate: -90,
lineWidth: 15,
animate: 1000,
onStep: function(value) {
this.$el.find('span').text(~~value);
}
});
Thanks for your help.
Andrés.
Could you please make this plugin that also allows you too give your chart a color for your inner circle.
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.