[tonisamaParticipant]

Hi,

I found a nifty little JS donut chart plugin here: http://www.jqueryscript.net/chart-graph/Create-Pretty-Animated-Donut-Charts-with-jQuery-Chart-js.html

They provide the code and the necessary instructions to install it. What I can’t figure out is in the context of the optional custom JS code section in Cornerstone how to get the charts to properly render. I paste the JS code in the custom JS section, add the container to my page, but I can’t get the charts to display. There are some script tags that also go somewhere. I assume I paste those in the JS section, but not sure. Any help would be appreciated.

Thanks,
Anthony

[Rue NelModerator]

Hello There,

Thanks for writing in!

Based from the example found in your link, you can skip to load jQuery since it is loaded automatically by wordpress. What you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Steps 1&2] Once your child theme is ready, you can insert this code in your child theme’s functions.php file

function load_chart_scripts(){
   wp_enqueue_script( 'pretty-doughtnut', get_template_directory_uri() . '/js/pretty-doughtnut.js', array(), '1.0.0', false );
   wp_enqueue_script( 'chart', 'http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js', array(), '1.0.0', false );
}
add_action( 'wp_enqueue_scripts', 'load_chart_scripts' );

Step 3] You can insert the code <div id="container"></div> inside a raw content element.

Step 4] Please go to Settings tab > Custom JS in Cornerstone and insert the code just like the example.

$(window).load(function() {
  doughnutWidget.options = {
    container: $('#container'),
    width: 100,
    height: 100,
    class: 'myClass',
    cutout: 50
  };

  doughnutWidget.render(data());

  setInterval(init, 2000);
});

function init() {
  doughnutWidget.render(data());
}

function data() {
  var data = {
  pending: {
    val: Math.round(Math.random() * 100),
    color: '#57B4F2',
    click: function(e) {
    console.log('hi');
    }
  },
  delivered: {
    val: Math.round(Math.random() * 100),
    color: '#6DED5C'
  },
  delayed: {
    val: Math.round(Math.random() * 100),
    color: '#E63329',
    link: 'http://www.google.com'
  }
  };

  return data;
}

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thanks for understanding.

[tonisamaParticipant]

Thanks for the quick response!

[Rue NelModerator]

You’re always welcome.

[Author]

Posts