Animations can be a good way to make your chart more interactive, and fortunately, Google's Chart API
allows us to add animations to charts
in Visualizer.
There are two ways of adding animations to your charts:
First, you can use the options provided by
the plugin.
And the second one is by using custom code.
For each type of chart that supports animations, you can find the options needed in Advanced
> General Settings > Animation.
There you can enable the animation by checking
"animate on startup", add a Duration in milliseconds
for the animation and the way of easing.
A constant speed, start slowly and speed up,
start fast and slow down, start slow, speed
up, then slow down.
Add animations to a chart by adding a JSON
object to your chart from the Manual Configuration
panel in Chart Settings.
You can pass the following code to add a simple
easing out animation to your chart, for example.
Please find the code in the documentation.
I put a link in the description for you.
The object accepts three parameters, which are:
The duration of the animation, in milliseconds.
The easing function applied to the animation
comes with the following options: 'linear'
which makes the animation to get a constant
speed.
Ease in to start slowly and then speed up.
Ease out to start fast and then slow down.
Ease in and out to start slowly, speed up,
and then slow down again.
Startup: Determines if the chart will animate on the initial draw.
If true, the chart will start at the baseline
and animate to its final state.
If you choose any of the parameters mentioned
you will end up with a chart that looks like this.
Nice!
Sometimes it happens that we need to emphasize
a specific bar on a chart and it looks like
we don’t have the ability to do it via chart
settings…
It’s true, but only from one side.
From another side, we can use a small trick which will help us to achieve what we need.
The first thing which we have to do is to
prepare our data.
Let's assume we have a chart with one series,
and its data could look like this.
For example, we want to highlight a value
for the year 2006.
In this case, we need to add one more column
with the same title and type as the first
series, but with empty values.
And move selected value from the first series
to the second one.
After doing, save your file and that’s all
for data modifications.
The second step is to set up the chart settings.
To do it create new chart or edit existing
one, upload prepared CSV file and go to the
chart settings screen.
Here we need to set “Is Stacked” option
to “Yes” and remove the second series
from legend by setting “Visible In Legend”
option to “No” in the appropriate series
settings under “Series Settings” group.
That’s all.
Save the chart, embed it into a page and then check it out.
Awesome, right?
That's it for now.
I hope you will try some animations and visual tricks on your charts.
If you do, let me know in the comments which one is your favorite.
Next, you will see how to allow users to change chart data in Visualizer.
See you there!
