We can use the animation option with bar charts as well. With bar charts, the lines will load from the bottom and move upward. We pull our chart, Quarterly Revenue by Product, from Chapter 3, Bar Charts and Digging into Data, found in 1168_03_03.html:
- We start by setting the
animateoption totrue:title:'Quarterly Revenue by Product', animate: true, axesDefaults: { ... - We can also set the speed for how fast each bar or line is animated. By default, each bar will start at the same speed, but we want the taller bars to move faster so that it gives the appearance that each bar finishes around the same time. To set the speed for each bar individually, we need to create a
rendererOptionsobject within each series object. Next, we create ananimationobject, and then we setspeed. For DVDs/Blu-ray and Computers, we vary the speed so that these bars load faster than the other two:... series: [ { label: 'DVDs/Blu-ray', rendererOptions: { animation: { speed: 1800 } } }, { label: 'Music CDs', rendererOptions: { animation: { speed: 2200 } } }, { label: 'TVs', rendererOptions: { animation: { speed: 2200 } } }, { label: 'Computers', rendererOptions: { animation: { speed: 1800 } } } ], ...
When we load the chart in our browser, we see how the animation plays out; instead of each bar starting at the same height, they represent their different heights throughout the animation.
We finish this and notice we missed lunch. We e-mail Calvin to tell him we're going to lunch, and we'd like Sara to take a look and get her feedback.
When we get back from lunch, Sara and Calvin are waiting in our office. "I'm excited to see what you two have come up with," Sara says. We start with the cursor plugin. "I like these, especially the one that shows the values in the legend. Is it just me or are the numbers not completely accurate?" We confirm her suspicion. Even when the cursor is over a data point, it does not highlight the data point. Therefore, two users can get different numbers for the same data point, depending on where the cursor is positioned.
We move on to the highlighter plugin. "Yeah, I think this will be more useful for us. Can you make the background of the tooltip less transparent? This might make it easier to use. Also, I love the tooltips on the bar chart and the way the legend is highlighted."
We finish by showing her the animations. "These are cool. They might not be very useful, but they're fun, so leave them in."
Sara leans back in her chair. "I would love for you two to sit in on our meeting tomorrow. We have a new initiative related to the stock market, and I think you can help us present all the data in a different way."
Sara stands to leave. "I'm serious when I say this, you two are blowing peoples' minds with all this. I'll see you at 10 tomorrow morning." She and Calvin walk out and leave us to ponder the nature of this new "initiative".