easy-pie-chart icon indicating copy to clipboard operation
easy-pie-chart copied to clipboard

Can I "scale" the percentages? Also, auto-refresh

Open gforster opened this issue 10 years ago • 4 comments

Hello,

Love the plugin. Two quick questions:

  1. Can I scale the percantage? For example, instead of the pie chart showing 0-100 %, I would like to show 99-100% with decimal places and have the chart reflect that. For example, in my particular use, the current difference between 99.965% and 99.974% looks the same visually & I would like to visualize a greater difference.
  2. Given my configuration below, I would like to auto-refresh the chart. What's the best approach?
function setup_easypie(){
        if ($('.percentage').length) { 
            $.percentage_easy_pie = $('.percentage');   
            $.percentage_easy_pie.easyPieChart({
                animate: 2000,
                trackColor: "#515151",
                scaleColor: "#818181",
                lineCap: 'butt',
                lineWidth: 10,
                barColor: function(percent) {
                    percent /= 100;
                    return "rgb(" + Math.round(255 * (1-percent)) + ", " + Math.round(255 * percent) + ", 0)";
                },
                size: 150
            });
        }
    }

gforster avatar Jan 30 '14 18:01 gforster

In this case, you should implement your own update method that transforms your values into new percentage values and use that to call the update method of the plugin. And then change the label in the center to your real percentage.

This is a highly customized behavior which requires changing the implementation.

rendro avatar Feb 23 '14 15:02 rendro

@gforster, did you ever get around to this? I am looking for a similar implementation. In my case, the circle should reflect 0-40 as 0 to 100% respectively.

edit: I see @rendro is working on a V3. :-)

bondt avatar Sep 06 '17 15:09 bondt

Didn't mean to close it 😃

As of now you can use the update method to set you value and apply your own transform:

function transformMyValue(inputValue) {
    return inputValue / 40 * 100;
}

$('.chart').data('easyPieChart').update(transformMyValue(35));

rendro avatar Sep 07 '17 02:09 rendro

Updating its value will update the canvas as well. For now I'm just updating the innerHTML 40ms after the rendering.

bondt avatar Sep 13 '17 19:09 bondt