O'Reilly logo

Learning jqPlot by Scott Gottreu

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Animating bar charts with varying speeds

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:

  1. We start by setting the animate option to true:
        title:'Quarterly Revenue by Product',
        animate: true,
        axesDefaults: {
    ...
  2. 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 rendererOptions object within each series ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required