JQuery easypiechart

Support
#1

Hello, trying to use easypiechart with no luck. I’ve added this to my custom JS:

$(function() {
$(’.chart’).easyPieChart({
size: 160,
barColor: “#17d3e6”,
scaleLength: 0,
lineWidth: 15,
trackColor: “#373737”,
lineCap: “circle”,
animate: 2000,
});
});

Which I got from https://codepen.io/FrankieDoodie/pen/aRBZLq and used the HTML and CSS there as well, with some modifications. However, nothing shows up. Did I set this up wrong?

I’ll put the site and details in a secure note.

Thank you for any assistance!

#2

Hello @OCcreates,

Thanks for writing in!

You may have resolved the issue already because I am now seeing the pie chart:

Screen Shot 2021-04-16 at 1.43.26 PM
Screen Shot 2021-04-16 at 1.43.26 PM1750×640 70.2 KB

After doing the updates or site changes, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Best Regards.

#3

Sorry, that’s the old site and I’m trying to recreate that exact chart on the new site. which is in development here: https://briano41.sg-host.com/

It seems to use the JQuery plugin easypiechart. I put the code in the custom JS area, but it does not work. Does Pro not call JQuery?

#4

Hello @OCcreates,

Your custom JS code is broken. The correct JS code should be in this format:

(function( $ ){
  $('.chart').easyPieChart({
    size: 160,
    barColor: "#17d3e6",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#373737",
    lineCap: "circle",
    animate: 2000,
  }); 
})( jQuery );

And please make sure that you have loaded the Pie chart JS into the page so that the JS code will work.

Hope this helps.

#5

Ah, thank you for the code correction! Can you tell me how to load the pie chart JS into the page? Thank you!

#6

Hello @OCcreates,

You may get started from here:

Be advised that the Pie Chart JS is a 3rd party JS and that the custom coding is beyond the scope of our support. We are unable to provide support for customizations under our Support Policy.

Thank you for your understanding.

#7

Ok, thank you! I figured it’s out of scope, just hoping for direction on how to make it work with Pro. I have a child theme, so hopefully I can get it worked out.

#8

Hi @OCcreates,

Adding that script on the Page > JS is only one step. You need to download and upload the easy-pie-chart files on your site, you can put it on your child theme.

Then you need to enqueue the jquery.easy-pie-chart.js file on the site. On the documentation, it is this line is for:
<script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script>

Then you need to insert this on your page wherever you want the Pie chart to show up, you can paste it on a RAW Content element.

<div class="chart" data-percent="73">73%</div>

This will be the extent guide we can provide you with this 3rd party widget/script. Hope you’ll able to make it work.

Cheers,

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.