Forum Discussion

ChrisHodgson's avatar
ChrisHodgson
Community Member
2 years ago

New Tutorial! Build Dynamic Animated Bar Charts In Storyline Using JavaScript

Hi Heroes,

I’m excited to share the latest episode of my Storyline Magic Series with you all!

In this episode, I'll be showing you how to create dynamic animated bar charts in Articulate Storyline 360, using standard Storyline shapes, variables, and a touch of JavaScript magic. 📊✨

One of the highlights of this technique is that your chart animations are controlled using Storyline number variables, and bar shapes will adjust their height beautifully across all screen sizes, ensuring consistent results for all users.

By the end of the tutorial, you’ll have a reusable template that you can apply to any bar chart designs you want to bring to life in Storyline!

Check out the full tutorial below, along with a link to all previous episodes in the series:


Watch the full series here - https://lnkd.in/dNvyD7wv

---

My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/

Discover eLearning
JavaScript
storyline 360
Tutorial

2 Replies

  • RCope's avatar
    RCope
    Community Member
    10 days ago

    Hi - 

    I've tried this, however I just can't seem to get it working! - I've copied exactly the naming etc so the JavaScript is - should be -  exactly the same - when I use the inspect tool I get the following - 

    The script I'm using is below - any advice gratefully received!!

    var adventure = getVar("adventure");
    var safety = getVar("safety");
    var treasure = getVar("treasure");
    var maxvalue =  getVar("maxvalue");

    var adventurebar = document.querySelector('[data-acc-text*="Adventure"]');
    var safetybar = document.querySelector('[data-acc-text*="Safety"]');
    var treasurebar = document.querySelector('[data-acc-text*="Treasure"]');

    //Calculate percentages
    var adventurepercent = (adventure / maxvalue) * 100;
    var safetypercent = (safety / maxvalue) * 100;
    var treasurepercent = (treasure / maxvalue) * 100;

    //Function to animate the bar
    function animateBar(barElement, percentage) {
        //Calculate the scaleY value
        var scaleYValue = percentage / 100;

        //Get the existing transform value
        var computedStyle = getComputedStyle(barElement);
        var existingTransform = computedStyle.transform; 

        consol.log(existingTransform);
        
        //Apply an initial scaleY value on load
        barElement.style.transform = existingTransform + 'scaleY(0)';
        barElement.style.transformOrigin = 'bottom';
        
        //Forece reflow to ensure the transistion starts from the initial state
        barElement.offsetHeight;
        
        //Set up a transition for a smooth animation
        BarElement.style.transitionProperty = 'transform';
        BarElement.style.transitionDuration = '1s';
        BarElement.style.transitionTimingFunction = 'ease-out';
        
        //Apply the final transform with the calculated scaleYValue
        barElement.style.transform = existingTransform + 'scaleY(' + scaleYValue + ')';

        //Return inner text to normal height
        var text = barElement.querySelector('text');
        var inverseScaleY = 1 /scaleYValue;
        text.style.transform = 'scaleY(' + inverseScaleY + ')';
    }

    animateBar(adventurebar, adventurepercent);
    animateBar(safetybar, safetypercent);
    animateBar(treasurebar, treasurepercent);

    • Nedim's avatar
      Nedim
      Community Member
      8 days ago

      Here is the corrected code:

      var adventure = getVar("adventure");

      var safety = getVar("safety");

      var treasure = getVar("treasure");

      var maxvalue = getVar("maxvalue");

       

      var adventurebar = document.querySelector('[data-acc-text*="Adventure"]');

      var safetybar = document.querySelector('[data-acc-text*="Safety"]');

      var treasurebar = document.querySelector('[data-acc-text*="Treasure"]');

       

      // Calculate percentages

      var adventurepercent = (adventure / maxvalue) * 100;

      var safetypercent = (safety / maxvalue) * 100;

      var treasurepercent = (treasure / maxvalue) * 100;

       

      // Function to animate the bar

      function animateBar(barElement, percentage) {

          // Calculate the scaleY value

          var scaleYValue = percentage / 100;

       

          // Get the existing transform value

          var computedStyle = getComputedStyle(barElement);

          var existingTransform = computedStyle.transform;

       

          console.log(existingTransform);

       

          // Apply an initial scaleY value on load

          barElement.style.transform = existingTransform + ' scaleY(0)';

          barElement.style.transformOrigin = 'bottom';

       

          // Force reflow to ensure the transition starts from the initial state

          barElement.offsetHeight;

       

          // Set up a transition for a smooth animation

          barElement.style.transitionProperty = 'transform';

          barElement.style.transitionDuration = '1s';

          barElement.style.transitionTimingFunction = 'ease-out';

       

          // Apply the final transform with the calculated scaleYValue

          barElement.style.transform = existingTransform + ' scaleY(' + scaleYValue + ')';

       

          // Return inner text to normal height

          var text = barElement.querySelector('text');

          var inverseScaleY = 1 / scaleYValue;

          text.style.transform = 'scaleY(' + inverseScaleY + ')';

      }

       

      animateBar(adventurebar, adventurepercent);

      animateBar(safetybar, safetypercent);

      animateBar(treasurebar, treasurepercent);