Number formatting

Use number formatting to configure the appearance of the value cells in your report. A number format is described by the FormatObject.

To see different examples of using number formatting, visit our Examples page.

Number format properties

See the full list of available FormatObject properties.

When formatting values, you can define the following:

Separators for thousands and decimals.
The number of decimals to show after the decimal separator.
How null and infinity values are displayed.
The currency symbol and its position – right or left of the number.
How negative values are formatted.
Text alignment.

Default number format

The component has a built-in default number format applied to all measures. It is composed of the default values of the FormatObject properties.

You can override the default number format in the following ways:

Via UI
In the report
Using API calls

Via UI

Step 1. Select Format > Format cells on the Toolbar. As a result, the Format cells pop-up window will appear.

Step 2. In the pop-up window, choose Default value from the CHOOSE VALUE dropdown menu.

Step 3. Configure the number format. For example:

Step 4. Click APPLY to save your configuration.

The number format will be applied to all measures and will be saved within the report.

In the report

Define the format and set its name property to an empty string (""):

report: {
  formats: [
    {
      name: "",
      // Other configs
    }
  ],
}

See the example on JSFiddle.

Using API calls

Step 1. Create a FormatObject and set its name property to an empty string ("").

Step 2. Apply the created object using setFormat(). Skip the measureName and aggregation parameters.

Step 3. Redraw the component using the refresh() API call.

For example:

let format = {
  name: "",
  currencySymbol: "$",
  thousandsSeparator: ","
};

flexmonster.setFormat(format);
flexmonster.refresh();

See the example on JSFiddle.

Number format for a specific measure

A number format can be applied to one or several measures. However, a measure can have only one format.

You can apply a number format to a specific measure in the following ways:

Via UI
In the report
Using API calls

Via UI

Step 1. Select Format > Format cells on the Toolbar. As a result, the Format cells pop-up window will appear.

Step 2. In the pop-up window, choose a measure from the CHOOSE VALUE dropdown menu and configure its number format.

Note Starting from version 2.8.22, you can choose several values in the corresponding dropdown menu to apply formatting to several measures simultaneously.

See an example

Here we show how to set a number format for multiple measures simultaneously

Step 3. Configure the number format. For example:

Step 4. Click APPLY to save your configuration.

The number format will be applied to the measure and will be saved within the report.

In the report

Step 1. Define the format and specify its name property.

Step 2. Specify the format's name in the measure’s format property in the slice.

For example:

report: {
  formats: [
    {
      name: "currency",
      currencySymbol: "$"
    },
    // Other formats
  ],
  slice: {
    measures: [
      {
        uniqueName: "Price",
        aggregation: "sum",
        format: "currency"
      },
    ],
    // Other slice properties
  },
  // Other configs
}

See the full code on JSFiddle.

Using API calls

Step 1. Create a FormatObject and specify its name property.

Step 2. Apply the created object to the measure using setFormat().

Step 3. Redraw the component using the refresh() API call.

For example:

let format = {
  name: "PriceFormat",
  currencySymbol: "$",
  thousandsSeparator: ","
};

flexmonster.setFormat(format, "Price", "sum");
flexmonster.refresh();

See the example on JSFiddle.

Note A format can be applied to a measure that is not active in the slice (the active property is false).

Inheriting properties from the default format

If some properties are not defined in a format for a specific measure, their values are inherited from the default format. In the following example, each measure with the number format "currency" or "amount" will also have thousandsSeparator: "," since it was defined in the default format:

report: {
  dataSource: {
    filename: "https://cdn.flexmonster.com/data/data.csv"
  },
  formats: [
    { 
      name: "",
      thousandsSeparator: ","
    },
    {
      name: "currency",
      currencySymbol: "$"
    },
    {
      name: "amount",
      decimalPlaces: 0,
      currencySymbol: " pcs.",
      positiveCurrencyFormat: "1$"
    }
  ],
  slice: {
    rows: [ { uniqueName: "Category" } ], 
    measures: [ 
      { 
        uniqueName: "Price",
        aggregation: "sum",
        active: true,
        format: "currency"
      }, 
      {
        uniqueName: "Discount",
        aggregation: "sum",
        active: false,
        format: "currency"
      },
      {
        uniqueName: "Quantity",
        aggregation: "sum",
        active: true,
        format: "amount"
      }
    ]
  }
}

See the example on JSFiddle.

Setting a currency symbol

The currencySymbol property can be specified in three ways:

As the symbol itself (e.g., currencySymbol: "€").
As a numeric HTML code of the symbol (e.g., currencySymbol: "").
As a named HTML code of the symbol (e.g., currencySymbol: "€").

All the approaches are interchangeable unless you are planning to:

Use Flexmonster Pivot Charts or export them to any format.
Export the grid to PDF, Excel, or CSV.

In these cases, specify the currencySymbol as the symbol itself, e.g., by copy and paste. Otherwise, it will be displayed as code.

If exporting the grid to HTML or image, you can use all available approaches to set the currencySymbol.

Number formatting from an OLAP cube

If you have already defined formats for measures in an OLAP cube and you want to use those formatted values in Flexmonster, set the options.useOlapFormatting property to true (it is turned off by default), as follows:

report: {
  dataSource: {
    type: "microsoft analysis services",
    proxyUrl: "https://olap.flexmonster.com/olap/msmdpump.dll",
    cube: "Adventure Works",
    catalog: "Adventure Works DW Standard Edition"
  },
  options: {
    useOlapFormatting: true
  }
}

Check out this example on JSFiddle.

Note The useOlapFormatting option is supported for Microsoft Analysis Services via both Flexmonster Accelerator and XMLA.

What’s next?

You may be interested in the following articles: