Documentation

Introduction

As per the flot documentation, this documentation assumes the initialization of a flot chart like in the code following:

var data = [];
var options = {};
var plot = $.plot(placeholder, data, options)

This gives us a reference starting point to minimize misleads and misunderstandings.

Plot Options

var default_options = {
    series: {
        grow: {
            active: false,
            duration: 1000,
            reanimate: true,
            valueIndex: 1
        }
    }
};

// minimum options to enable growraf
var options = {
    series: {
        grow: {
            active: true
        }
    }
};

A detailed explanation follows:

grow.active (default: false)
Type: Boolean
Enables or Disables growraf for the specified plot.
Note: this is the minimum option you should enable to get growraf working.

grow.duration (default: 1000)
Type: Integer
The desired default duration for the animations.

grow.reanimate (default: true)
Type: Boolean
Enables or Disables animations for subsequent setData() & draw()’s on the plot.

grow.valueIndex (default: 1)
Type: Integer
The default value for the valueIndex property of each serie. The default index, that each serie, holds the values to be plotted.

Data Format

The data format that should be used, is the one with the series objects:

var data = [
    { label: "serie #1", data: [[0,0], [1,1], [2,2]] },
    { label: "serie #2", data: [[0,2], [1,1], [2,0]] },
    ...
];

The format of a single series object is as follows:

var serie1 = {
    label: "serie #1",
    data: [ ... ],
    grow: {
        duration: 1000,
        growings: [{
            reanimate: "continue",
            stepDirection: "up",
            stepMode: "linear",
            valueIndex: 1
        }]
    }
};

var data = [ serie1, serie2, ... ];

A detailed explanation follows:

grow.duration (default: 1000)
Type: Integer
The desired duration for the animation of each serie.

grow.growings (default: [])
Type: Array<Object> An array with one or more objects, defining one or more animations (and its properties) to be applied to the serie.
When multiple growings are specified, they are applied in the provided order for each animation frame.

grow.growings[#].reanimate (default: ‘continue’)
Type: String/Function
The type of animation for replotting through setData() & draw(). Can be ‘continue’, ‘reinit’, ‘none’ or a custom animation generated by a provided function.

grow.growings[#].stepDirection (default: ‘up’)
Type: String
Defines the direction of the animation. Can be set to ‘up’ or ‘down’.
Note: for series that have data-points both above and below the horizontal axis, ‘up’ makes the serie animate away from it.

grow.growings[#].stepMode (default: ‘linear’)
Type: String/Function
Defines the animation style. Can be set to ‘linear’, ‘maximum’, ‘delay’, ‘none’ or a custom animation generated by a provided function.

grow.growings[#].valueIndex (default: 1)
Type: Integer
The index, that each serie, holds the values to be plotted.

Custom Animation Function

function( Object dataj, Integer timePassed, Object growing, Integer growPhase )

/** @enum {number} */
GrowPhase = {
    NOT_PLOTTED_YET: 0,
    PLOTTED_SOME_FRAMES: 1,
    PLOTTED_LAST_FRAME: 2
};