Can i update the size?

[dajy]

Hello rendo,

I am trying to make this plugin responsive.
Is there a way that i can update the size ?

$('.pieanimation').on('click', function(e) {
    $('.chart').size('easyPieChart').update($xsize);
}); 

[fredDesign]

Envoyé de mon iPad

Le 9 sept. 2014 à 15:59, dajy [email protected] a écrit :

Hello rendo,

I am trying to make this plugin responsive.
Is there a way that i can update the size ?

$('.pieanimation').on('click', function(e) {
$('.chart').size('easyPieChart').update($xsize);
});

—
Reply to this email directly or view it on GitHub.

[ruudbwai]

second this, is there a way to update the bar colour as well?

[ruudbwai]

Rewind<<<< dug through the issues and found this -

var pie_options = { ...., barColor : "#bbb" }; $(selector).easyPieChart(pie_options); var api = $(selector).data('easyPieChart'); $(selector).on("mouseover", function() { var value = $(selector).data('percent'); api.options.barColor = '#123456'; api.update(value); });

That worked for me!

[rendro]

@ruudbwai you can pass a function as barColor that takes the percentage as a parameter and returns a CSS color string (see documentation).

$('.chart').easyPieChart({
    barColor: function(percent) {
        if (percent > 50) {
            return 'red';
        } else {
            return 'green';
        }
    }
})

[rendro]

@dajy currently there is no chance to update the size, but this feature is on our list

[dilotec-2015]

now we have 2017... is this feature now implemented?

[rendro]

@dilotec-2015 its 2017 and you still have not sent me a pull request. Open source means participation not demanding features. Comments like yours are the reason why people like me who dedicated some of their time to build free and open software struggle to support it.

[Gohanova]

hey everyone - you just need to target the Canvas element via CSS in a media-query:

@media screen and (max-width: 767px) {
.cs-wrap canvas[width="150"] {
width: 120px;
}​
.cs-wrap canvas[height="150"] {
height: 120px;
}​
}

you will need to restyle the font-sizes etc. - but its actually pretty easy - just a little extra typing (thanks for providing :-))

[mattprice09]

The fix that I used was that I added the easy-pie-canvas class to the canvas element, see THIS pull request I just submitted.

If you have this class name, you can simply do the following in your stylesheet:

.easy-pie-canvas {
  height: 50px;
  width: 50px;
}

But make sure you first remove the default widths/heights from the canvases:

$(".easy-pie-canvas").css("width", "");
$(".easy-pie-canvas").css("height", "");

Thanks for the package @rendro!

[evolross]

Ran into this too. You can remove the canvases of your easy pie charts. Then destroy the data context. Then simply rebuild them. Works good for me.

Here's an example:

//  Note: This pattern is used to throttle window resize callbacks
let performResizeCallback;

$(window).resize(function() {

    clearTimeout(performResizeCallback);

    performResizeCallback = setTimeout(function() {

      //  Remove the pie charts canvases
      $('.pie-chart canvas').remove();

      let $pieCharts = $('.pie-chart');

      //  Remove the pie chart data contexts so it knows to rebuild them. 
      //  It won't work without this
      $pieCharts.removeData('easyPieChart');

      //  Add logic here based on window size

      //  Adjust pie chart size dynamically
      $pieCharts.data("size", 75);

      //  Rebuild the pie charts
      $pieCharts.easyPieChart()
   }, 250);
});