rendro / easy-pie-chart Goto Github PK

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,

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,

• Adam

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 ?

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.

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.

Why not add a function to create a gradient color from 0 to 100?

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?

Apologies if this has been brought up before, but is it possible to add easing effects to the line animation?

Cheers!

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();
...

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

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

Is it possible to update so pie charts look crisp on higher density mobile devices?

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: $('span', $('.chart')).text('>img src="images/ajax-loader.gif" /<');

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 ?

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

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>

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

The README.md needs updated with the changes of 2.0.3 and 2.0.4.

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?

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:

http://jsfiddle.net/Tropicalista/yAv4f/14/

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);
}
});
});

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?

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

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

Is there any way to animate only when it appears on screen on computers also support for mobile devices, thanks

Running the old-ie.html demo, the chart didn't render in IE8 "standards mode". Seems to work fine in IE7 and IE8 compatibility mode. Hoping to get this solved. I noticed the problem in my app and tried it on the demo app with the same results.

Result:

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

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,

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

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.

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);

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 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 ?

Hi, how can i change the size of the chart?

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

Could you please make this plugin that also allows you too give your chart a color for your inner circle.

Enhancement suggestion: Would like to be able to show current percentage (e.g. 40%) with a target/goal of 60%. When the current value = goal, change the color of the bar (to be green), otherwise the bar is red. Something like the below...

Hi there

Can you add AMD support? For RequireJS ...

Thx!

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);
    });
});

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

How can I move the value for the pie into the Circle like on the screenshot?

It would be awesome to load the script only if the div is in full viewport, or at least half way through.

Please add Easy-Pie-Chart
https://github.com/rendro/easy-pie-chart

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,

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

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"]);

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 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!!!

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.

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

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.