Blog Post

Discover
1 MIN READ

Storyline 360: Interactive Circle Graph

NicoleLegault1's avatar
NicoleLegault1
Community Member
7 years ago

Bring your numbers and data to life with this interactive circle graph created with Storyline 360. Click on the graph to reveal more information displayed on layers. Edit the graph itself, as well as the text and the colors to make it match with your color scheme. Download the font (Abel) if you want to create the exact look. 

View this project in action!

Published 7 years ago
Version 1.0
  • ChrisHudson's avatar
    ChrisHudson
    Community Member
    Forgive me if this is a dumb question, but when I open the project to see it working, it doesn't have the usual player 'surround'.

    Is that an option?

    I've been looking for a way to make learning content feel more like it;s part of the page rather than sitting inside the player.
  • Can this graph be simulated in Storyline 2?
    If so, do you have some tips?
    Thanks
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Hi Bonita!

      Yes you could recreate this exact interaction in Storyline 2. There's nothing in this interaction that is unique to Storyline 360. I used the "Pie" shape (available under Shapes, from the Insert tab of the Storyline ribbon) to create the actual graph itself. I also created a layer for each segment of the pie. Each piece of the pie has a trigger on it that makes it's corresponding layer appear when you click on it. The layer simply has another Pie shape that is slightly bigger. That's how I created this :)
  • MaryNunaley's avatar
    MaryNunaley
    Community Member
    Is it possible to program in such a way that users can enter different data points and see the PIE change?
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Hi Mary!

      It IS possible but would require a ton of variables and states. Would take quite awhile to set it up and make it work but it is possible.

      Nicole
  • Thanks! I like how you set this up. I added a hover state (just changes color) and kept the larger pie piece for each of the selections.