How to use Google Chart Formatters

Google Chart Formatters

As part of the Google Visualization API there are a series of predefined formatters:

Formatter Name	Description
ArrowFormat	Adds an up or down arrow, indicating whether the cell value is above or below a specified value.
BarFormat	Adds a colored bar, the direction and color of which indicates whether the cell value is above or below a specified value.
ColorFormat	Colors a cell according to whether the values fall within a specified range.
DateFormat	Formats a Date or DateTime value in several different ways, including "January 1, 2009," "1/1/09" and "Jan 1, 2009."
NumberFormat	Formats various aspects of numeric values.
PatternFormat	Concatenates cell values on the same row into a specified cell, along with arbitrary text.

Check out the Google Visualization API Reference for more information about specific Formatter.

Using provided formatter

The chart object passed to the directive accept a formatters attribute.

This attribute is composed as in the following example:

// Standard chart object
var chart = {
    data: data,
    type: 'Table',
    formatters: formatters
};

// Formatters
var formatters = {
    date: [{
        columnNum: 1,
        pattern: "HH:mm:ss dd:MM:yy"
    }]
};

Add too the formatters object with the descriptive part of the formatter name. This key is case insensitive.

The list of the shortened names:

arrow
bar
color
date
number
pattern

The value of this attribute is an array containing the object representing the column to format and the formatter options.

For each column that has to be formatted there must be an element in the array of the specific formatter.