WordPress Charts
[resolved] Restart the animation? (4 posts)

  1. Pixelbits
    Posted 1 year ago #

    I use these charts in a post slider. I see the chart-animation for the first post, but (in the background) all other charts-animations in other (hidden) posts also execute.

    I would like the chart-animation to (re-)start when the post-slide comes into view(after a click on a next-post-arrow).

    How do I restart the animation(s)?
    Any help appreciated.


  2. jfleeroy
    Posted 1 year ago #

    There is a way to do it.

    First, open the plugin's wordpress_charts_js.php in the plugin's folder.

    The first function is to register scripts.

    It should look like this:
    // Register plugin Scripts
    wp_register_script( 'wp-chart-functions', plugins_url('/js/waypoint.js', __FILE__),'jquery','', true );
    wp_register_script( 'charts-js', plugins_url('/js/Chart.min.js', __FILE__) );
    wp_register_script( 'wp-chart-functions', plugins_url('/js/functions.js', __FILE__),'jquery','', true );

    // Enqeue those suckers
    wp_enqueue_script( 'waypoint' );
    wp_enqueue_script( 'charts-js' );
    wp_enqueue_script( 'wp-chart-functions' );

    Basically, what we did is add a reference to a library called "Waypoint" Obviously, you'll need to place waypoint.js in the wp-charts/js for this to work.

    Then, you'll need to judge where you need to insert the "hack" but for my situation, i needed to animate the graphs once they were in view.

    So I did this:

    function wp_charts_shortcode( $atts ) {

    $currentchart .= '$(".wp_charts_canvas").waypoint({
    offset: "bottom-in-view",
    triggerOnce: true,
    handler : function(direction){
    var wpChart'.$title.$type.' = new Chart(document.getElementById("'.$title.'").getContext("2d")).'.$type.'('.$title.'Data,'.$title.'Ops);



    Basically, instead of creating the graph directly, I return the JS that will initialize the graph using waypoint.

    good luck.

  3. jfleeroy
    Posted 1 year ago #

  4. Paul van Zyl
    Plugin Author

    Posted 1 year ago #

    nice, I look into creating some options around something like this in a future build.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WordPress Charts
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic