Book Image

Learning jqPlot

By : Scott Gottreu
Book Image

Learning jqPlot

By: Scott Gottreu

Overview of this book

Table of Contents (19 chapters)
Learning jqPlot
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 object. Next, we create an animation object, and then we set speed. 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...