Using Ceros to create animated, interactive charts is an easy way to incorporate digestible data into your content in an engaging way. For this lesson, you can work off a blank canvas, a template, or an experience that you already have built, we are going to create an interactive bar graph.
- Draw out a rectangle on your canvas to act as a bar in your graph and choose a color. Duplicate this bar a few times to create multiple bars for the graph, resize the heights or them however you need, and align and distribute them nicely to the canvas and each other.
- Select all of the bars at once and apply an animation of scale up with a .4 second delay. To create a cascading in effect, hold down shift and deselect each bar one at a time, slightly increasing the delay applied to each so that they animate in one after another.
- Now, mock up a popup to show when a user hovers over each bar draw a text box over the first bar and fill in some information. On the text box you can apply some basic animations that say on view, fade in down, and on hide, fade out up. Now, turn off the visibility of those popups.
- To set up your interactions, start by drawing out a hotspot over the first bar object. On this hotspot, apply an interaction that says On Hover – Show – and choose the text box popup you just created.
- On your preview, you’ll see that now when you hover over each bar the text box will appear, and if you move the cursor away it will disappear.
Looking at the preview you can see how these simple animations and interactions give the bar chart a much more grown-up feel.
If you have any questions on creating interactive charts like this, or would like to explore some of our other chart making options, please feel free to reach out in the chat widget, and we’ll be happy to help.