Get Free Trial
  1. API reference
  2. Welcome
    1. Getting started
    2. Get Flexmonster
    3. Quick start
    4. System requirements
    5. Troubleshooting
    6. Managing license keys
    7. Migrating from WebDataRocks to Flexmonster
  3. Integration with frameworks
    1. Available tutorials
    2. Integration with Angular
    3. Integration with React
    4. Integration with Vue
    5. Other integrations
      1. Integration with Python
        1. Integration with Django
        2. Integration with Jupyter Notebook
      2. Integration with React Native
      3. Integration with Blazor
      4. Integration with AngularJS (v1.x)
      5. Integration with TypeScript
      6. Integration with R Shiny
      7. Integration with jQuery
      8. Integration with Ionic
      9. Integration with Electron.js
      10. Integration with Webpack
      11. Integration with RequireJS
  4. Connecting to Data Source
    1. Supported data sources
    2. JSON
      1. Connecting to JSON
      2. Connecting to JSON using Flexmonster Data Server
      3. Data types in JSON
    3. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Data types in CSV
    4. Database
      1. Connecting to SQL databases
      2. Connecting to a MySQL database
      3. Connecting to a Microsoft SQL Server database
      4. Connecting to a PostgreSQL database
      5. Connecting to an Oracle database
    5. Flexmonster Data Server
      1. Introduction to Flexmonster Data Server
      2. Getting started with Flexmonster Data Server
      3. Flexmonster Admin Panel Guide
      4. Data sources guide
      5. Security and authorization guide
      6. The Data Server as a DLL
        1. Getting started with the Data Server as a DLL
        2. Referencing the Data Server as a DLL
        3. Implementing the API controller
        4. Implementing the server filter
        5. Implementing the custom parser
        6. DLL configurations reference
        7. The controller's methods for request handling
      7. The Data Server as a console application
        1. Installing the Data Server as a console application
        2. Configurations reference
        3. Data sources guide
        4. Security and authorization guide
      8. Troubleshooting the Data Server
    6. MongoDB
      1. Introduction to Flexmonster MongoDB Connector
      2. Getting started with the MongoDB Connector
      3. Embedding the MongoDB Connector into the server
      4. Configuring the MongoDB Connector
    7. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Flexmonster Accelerator
      3. Referencing the Accelerator as a DLL
      4. Configuring the authentication process
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    8. Custom data source API
      1. Introduction to the custom data source API
      2. A quick overview of a sample Node.js server
      3. A quick overview of a sample .NET Core server
      4. Implement your own server
        1. Implementing the custom data source API server
        2. Implementing filters
        3. Supporting more aggregation functions
        4. Supporting multilevel hierarchies
        5. Returning data for the drill-through view
        6. Testing your custom data source API server
    9. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
    10. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with the Accelerator
      3. Configuring Mondrian roles
      4. Configuring username/password protection
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    11. Connecting to other data sources
  5. Accessibility
    1. Accessibility overview
    2. Keyboard navigation
  6. Configuring the component
    1. Available tutorials
    2. Getting started with the report
    3. Configure the data source
      1. Data source
      2. Mapping
    4. Define which data to show
      1. Slice
      2. Custom sorting
      3. Calculated values
    5. Manage Flexmonster’s functionality
      1. Options
      2. Configuring global options
    6. Format fields
      1. Number formatting
      2. Date and time formatting
      3. Conditional formatting
    7. Save component configs
      1. Get the report from the component
      2. Set the report for the component
      3. Share the report
      4. Export and print
  7. Charts
    1. Available tutorials
    2. Flexmonster Pivot Charts
    3. Integration with Highcharts
    4. Integration with amCharts
    5. Integration with Google Charts
    6. Integration with FusionCharts
    7. Integration with any charting library
  8. Customizing
    1. Available tutorials
    2. Customizing the Toolbar
    3. Customizing appearance
    4. Customizing the context menu
    5. Customizing the grid
    6. Customizing the pivot charts
    7. Localizing the component
  9. Security
    1. Security in Flexmonster
    2. Security aspects of connecting to an OLAP cube
      1. Ways of connecting to an OLAP cube
      2. The data transfer process
      3. Data security
      4. Data access management
  10. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.8 to 2.9
    4. Migration guide from 2.7 to 2.8
    5. Migration guide from 2.6 to 2.7
    6. Migration guide from 2.5 to 2.6
    7. Migration guide from 2.4 to 2.5
    8. Migration guide from 2.3 to 2.4
    9. Migration guide from 2.2 to 2.3
  11. Flexmonster CLI Reference
    1. Overview
    2. Troubleshooting the CLI
    3. flexmonster create
    4. flexmonster add
    5. flexmonster update
    6. flexmonster version
    7. flexmonster help
  12. Documentation for older versions
Table of contents

Number formatting

The way numeric values are formatted in the component can be defined in a report.

The default format is applied to all measures. In addition to this default format, specific number formats can be defined for certain measures. More details can be found in the following sections:

If the component is connected to an OLAP cube wherein you have already formatted numbers, you can display these formatted values without applying any additional number formatting in the component. More information about this option below:

To see live examples on how to format numbers, refer to our Examples page.

Number format properties

With number formatting you can define the following:

  • Separators for thousands and for decimals.
  • The number of decimals to show after the decimal separator.
  • The display of null and infinity values.
  • The format for currencies specifying both the currency symbol and its position – right or left of the number.

Below is a list of all available properties:

  • name – String. It should be unique as it identifies the format in the report. Note: the format with the name property set to "" defines a default number format and it is applied to all the measures without a specific number format. Default value: "".
  • thousandsSeparator – String. Default value: " " (space).
  • decimalSeparator – String. Default value: ".".
  • decimalPlaces – Number. The exact number of decimals to show after the decimal separator. When set to -1, the entire number is shown. Note that for e-notation numbers (e.g., 5.8e+23), at least one decimal is always shown after the decimal separator, even if decimalPlaces is set to 0. Default value: -1.
  • maxDecimalPlaces – Number. The maximum number of decimals to show after the decimal separator. When set to -1, the entire number is shown. Note that for e-notation numbers (e.g., 5.8e+23), at least one decimal is always shown after the decimal separator, even if maxDecimalPlaces is set to 0. Default value: -1.
  • maxSymbols – Number. The maximum number of symbols in a cell. Default value: 20.
  • negativeNumberFormat – String. The format of the negative numbers. It can be one of the following values: "-1", "- 1", "1-", "1 -", and "(1)". Default value: "-1".
  • currencySymbol – String. The symbol which is shown to the left or the right of the value (e.g. currency symbol, hours, percent, etc.). Learn more about the ways to set the property. Default value: "".
  • positiveCurrencyFormat – String. The format of the currency symbol. It can be either "$1" or "1$". Default value: "$1".
  • negativeCurrencyFormat – String. The format of the currency symbol to display negative amounts. It can be one of the following values: "-$1", "-1$", "$-1", "$1-", "1-$", "1$-", "($1)", and "(1$)". Default value: "-$1".
  • isPercent – Boolean. When set to true, data is formatted as a percentage. The behavior is the same as in Excel. Setting isPercent to true will result in numbers being multiplied by 100 and shown with a % symbol. For example, 0.56 gets changed to 56%. Note: if % is set as currencySymbol, setting isPercent to true will not multiply numbers by 100. Default value: false.
  • nullValue – String. Defines how to show null values in the grid. Default value: "".
  • infinityValue – String. Defines how to show infinity values in the grid. Default value: "Infinity".
  • divideByZeroValue – String. Defines how to show divided by zero values in the grid. Default value: "Infinity".
  • textAlign – String. The alignment of formatted values in cells on the grid. It can have the following values: "right", "left", and "center". Default value: "right".
  • beautifyFloatingPoint – Boolean. In JavaScript the output of console.log(.1 + .2);is 0.30000000000000004. Check https://0.30000000000000004.com for more details about the problem. When the beautifyFloatingPoint property is set to true, numbers such as 0.30000000000000004 are formatted as 0.3. Setting beautifyFloatingPoint to false means that the full number will be shown. Default value: true.

Setting a currency symbol

The currencySymbol property can be set in two ways: by adding the symbol itself or adding a numeric or named HTML code of the symbol. For example, setting "&", "&" or "&" will result in displaying ampersand as a currency symbol.

Both approaches can be used interchangeably unless you are planning to export the report.

If you are going to export the report to PDF, Excel, or CSV, it’s better to add symbols by copy and paste. Otherwise, the symbols will be displayed as code. If you are going to export the report to HTML, you can use both variants as equal.

Default number format

The component has a built-in default number format that is applied to all measures by default. It is composed of the default values of the number format properties. The default format can be overridden in a report.

To override the default number format for a report, define a number format with an empty string name property in a report, as follows:

report: {
    dataSource: {
        filename: "data.csv" 
    }, 
    formats: [ 
        { 
            name: "", 
            thousandsSeparator: " ", 
            decimalSeparator: ".", 
            decimalPlaces: -1, 
            maxDecimalPlaces: -1, 
            maxSymbols: 20,
            negativeNumberFormat: "-1",
            currencySymbol: "", 
            negativeCurrencyFormat: "-$1", 
            positiveCurrencyFormat: "$1", 
            isPercent: false, 
            nullValue: "", 
            infinityValue: "Infinity", 
            divideByZeroValue: "Infinity", 
            textAlign: "right", 
            beautifyFloatingPoint: true 
        } 
    ], 
    slice: { 
        rows: [  
            { uniqueName: "Country" } 
        ],  
        columns: [ 
            { uniqueName: "[Measures]" } 
        ], 
        measures: [ 
            { 
                uniqueName: "Price",
                aggregation: "sum",
                active: true
            }, 
            {
                uniqueName: "Quantity",
                aggregation: "sum", 
                active: true
            } 
        ] 
    }
} 

See the example on JSFiddle.

Number format for a specific measure

A number format can be applied to a specific measure or measures. Each measure can have only one format, but a format can be applied to multiple measures.

For example, if you are visualizing financial data, you may want to apply currency formatting to some of the measures in addition to the default format. To apply a format to a specific measure:

  1. Name a format.
  2. Define the format name for the measure(s) in a default slice.

Properties defined in the default format get applied to all other formats. In the following example each measure with number formats "currency" and "amount" will have thousandsSeparator: ",", since it was defined in the default format:

report: {
    dataSource: {
        filename: "https://www.flexmonster.com/download/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"
            }
        ]
    }
} 

Open the example on JSFiddle.

A format can be defined for measure(s) even if they are not active (active property is false) in a default slice.

Change number formatting using the Toolbar

Use Format > Format cells in the Toolbar to change/define number formatting for measures at runtime.

number formatting

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

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

Number formatting via API

The API calls setFormat() and getFormat() can be used to manipulate number formatting at runtime.

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, set the useOlapFormatting report 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"
    },
    slice: {
        rows: [ 
            {uniqueName: "[Product].[Category]"},
            {uniqueName: "[Reseller].[Business Type]"}
        ],
        columns: [{uniqueName: "[Measures]"}], 
        measures: [ {uniqueName: "[Measures].[Reseller Order Count]"}]
    },
    options: {
        useOlapFormatting: true
    }
} 

Check out on JSFiddle.

useOlapFormatting is supported for Microsoft Analysis Services via both Flexmonster Accelerator and XMLA, and for Mondrian via Flexmonster Accelerator. It is not available for Mondrian via XMLA.