1. API reference
  2. Welcome
    1. Component overview
    2. Quick start
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Compressor
      3. Data types in CSV
    3. Database
      1. Connecting to SQL databases
      2. Connecting to other databases
      3. Connecting to database with Node.js
      4. Connecting to database with .NET
      5. Connecting to database with .NET Core
      6. Connecting to database with Java
      7. Connecting to database with PHP
    4. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Accelerator
      3. Installing Accelerator as a Windows Service
      4. Referring Accelerator as a DLL
      5. Accelerator security
      6. Configuring authentication process
      7. Configuring secure HTTPS connection
      8. Troubleshooting
    5. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with Accelerator
      3. Configuring Mondrian roles
      4. Сonfiguring username/password protection
      5. Сonfiguring secure HTTPS connection
      6. Troubleshooting
    6. icCube
  4. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Number formatting
    6. Conditional formatting
    7. Set report to the component
    8. Get report from the component
    9. Date and time formatting
    10. Configuring global options
    11. Export and print
    12. Calculated values
    13. Custom sorting
  5. Integration with frameworks
    1. Available tutorials
    2. Integration with AngularJS (v1.x)
    3. Integration with Angular
    4. Integration with React
    5. Integration with Webpack
    6. Integration with ASP.NET
    7. Integration with jQuery
    8. Integration with JSP
    9. Integration with TypeScript
    10. Integration with RequireJS
    11. Integration with PhoneGap
  6. Integration with charts
    1. Integration with Highcharts
    2. Integration with Google Charts
    3. Integration with FusionCharts
    4. Integration with any charting library
  7. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Customizing context menu
    4. Localizing component
  8. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.5 to 2.6
    4. Migration guide from 2.4 to 2.5
    5. Migration guide from 2.3 to 2.4
    6. Migration guide from 2.2 to 2.3
    7. 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 (for example using Microsoft Analysis Services or Mondrian), you can display these formatted values without applying any additional number formatting in the component. More information about this option below:

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. Should be unique as it identifies the format in the report. Default value: "". 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.
  • thousandsSeparator – String. Default value: " " (space)
  • decimalSeparator – String. Default value: "."
  • decimalPlaces – Number. The exact number of decimals to show after the decimal separator. Default value: -1 means that the entire number will be shown
  • maxDecimalPlaces – Number. The maximum number of decimals to show after the decimal separator. Default value: -1 means that the entire number will be shown
  • maxSymbols – Number. The maximum number of symbols in a cell. Default value: 20
  • currencySymbol – String. The symbol which is shown to the left or the right of the value (e.g. currency symbol, hours, percent, etc.). Default value: ""
  • currencySymbolAlign – String. The alignment of the currency symbol. It can be either "left" or "right". Default value: "left"
  • isPercent – Boolean. When set to true, data is formatted as 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 be either "right" or "left". Default value: "right".

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:

{
	dataSource: {
		filename: "data.csv"
	},
	formats: [
		{
			name: "",
			thousandsSeparator: " ",
			decimalSeparator: ".",
			decimalPlaces: -1,
			maxDecimalPlaces: -1,
			maxSymbols: 20,
			currencySymbol: "",
			currencySymbolAlign: "left",
			isPercent: "false",
			nullValue: "",
			infinityValue: "Infinity",
			divideByZeroValue: "Infinity",
			textAlign: "right"
		}
	],
	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:

  • Name a format
  • 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:

{
	dataSource: {
		filename: "http://www.flexmonster.com/download/data.csv"
	},
	formats: [
		{
			name: "",
			thousandsSeparator: ","
		},
		{
			name: "currency",
			currencySymbol: "$"
		},
		{
			name: "amount",
			decimalPlaces: 0,
			currencySymbol: " pcs.",
			currencySymbolAlign: "right"
		}
	],
	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.

Note: 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.

Number formatting via API

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:

{
	dataSource: {
		dataSourceType: "microsoft analysis services",
		proxyUrl: "http://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.

Note: 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 and for icCube.