Report Object

A report object contains all configurations for a pivot table. This includes:

  • which data to show
  • how to show it
  • conditional formatting rules
  • number formatting
  • localization

Properties

Report object has the following properties:

Name Type Description
dataSource Data Source Object Сontains the information about the data source of the report
slice Slice Object optional Defines which fields should be placed into the rows, columns, and measures. Besides, it contains information about the filtering, sorting, expands, drills and report filtering features.
options Options Object optional Defines the view and functionality available for users.
conditions Array of Conditional Format Objects optional Used for defining conditional formatting rules.
formats Array of Format Objects optional Used for defining number formatting in the component.
localization String|Object optional Sets a localization. For more details, refer to language localization tutorial.

Example of a report

{
    "dataSource": {
        "dataSourceType": "csv",
        "filename": "https://cdn.webdatarocks.com/data/data.csv"
    },
    "slice": {
        "rows": [
            {
                "uniqueName": "Country"
            }
        ],
        "columns": [
            {
                "uniqueName": "Color"
            },
            {
                "uniqueName": "Measures"
            }
        ],
        "measures": [
            {
                "uniqueName": "Price",
                "aggregation": "sum",
                "format": "currency"
            },
            {
                "uniqueName": "Discount",
                "aggregation": "sum",
                "format": "currency"
            }
        ]
    },
    "options": {
        "grid": {
            "showGrandTotals": "off"
        }
    },
    "conditions": [
        {
            "formula": "#value > 350000",
            "format": {
                "backgroundColor": "#0598df",
                "color": "#FFFFFF"
            }
        },
        {
            "formula": "AND(#value > 1000, #value < 3000)",
            "format": {
                "backgroundColor": "#f45328",
                "color": "#FFFFFF"
            }
        }
    ],
    "formats": [
        {
            "name": "currency",
            "thousandsSeparator": ",",
            "decimalPlaces": 2,
            "currencySymbol": "$",
            "currencySymbolAlign": "left"
        }
    ],
    "localization": "https://cdn.webdatarocks.com/loc/es.json"
}

A dataSource object contains the information about the data source of the report.

Properties

Name Type Description
filename String optional The URL to JSON or CSV file. Also can be the URL to the server-side script generating the data.
fieldSeparator String optional Specific field delimiter for CSV data. By default, WebDataRocks can parse comma-separated values or semicolon-separated values. For all other cases, fieldSeparator should be specified.
data String optional Property to specify JSON data. WebDataRocks supports a certain kind of JSON data – array of objects, where each object is an unordered collection of KEY/VALUE pairs.

Example

Connect to a CSV file in WebDataRocks reporting tool:

var pivot = new WebDataRocks({
	container: "#wdr-component",
	toolbar: true,
	height: 395,
	report: {
		dataSource: {
			filename: "https://cdn.webdatarocks.com/data/data.csv"
		}
	}
});

Try it out on CodePen.

CSV is considered to be an industry standard for data analysis. The most common ways of producing CSV data are:

  • export from Excel
  • export from databases

CSV stands for comma-separated values so a simple CSV file looks the following way:

Product,Price
Apple,2.50
Cherry,5.25

For getting the data from the file, specify the URL to this file:

<html>
<head></head>
<body>
<div id="wdr-component"></div>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script>
var pivot = new WebDataRocks({
	container: "#wdr-component",
	toolbar: true,
	report: {
		dataSource: {
			filename: "URL-to-your-CSV-file"
		}
	}
});
</script>
</body>
</html>

In most cases, a comma (,) is used as a separator between different fields, such as Product and Price. WebDataRocks also supports other separators.

If fields in your data are separated by a semicolon (;) such data source can be used without any additional configurations. If fields in your data are separated by some other symbol, e.g. a colon (:), you need to specify fieldSeparator as in the example:

<html>
<head></head>
<body>
<div id="wdr-component"></div>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script>
var pivot = new WebDataRocks({
	container: "#wdr-component",
	toolbar: true,
	report: {
		dataSource: {
			filename: "URL-to-your-CSV-file",
			fieldSeparator: ":"
		}
	}
});
</script>
</body>
</html>

Learn more

The JSON data source is very popular because such format is easily understandable for users. WebDataRocks supports a certain kind of JSON data – an array of objects, where each object is an unordered collection of key-value pairs. Here is a sample of valid JSON data for WebDataRocks:

[
	{
		"Product": "Apple",
		"Price": 2.50
	},
	{
		"Product": "Cherry",
		"Price": 5.25
	}
]

If JSON data is already on the page (for example, in yourJSONData variable), specify it in the report:

<html>
<head></head>
<body>
<div id="wdr-component"></div>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script>
var pivot = new WebDataRocks({
	container: "#wdr-component",
	toolbar: true,
	report: {
		dataSource: {
			data: yourJSONData
		}
	}
});
</script>
</body>
</html>

For getting the data from the file, specify the URL to this file:

<html>
<head></head>
<body>
<div id="wdr-component"></div>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script>
var pivot = new WebDataRocks({
	container: "#wdr-component",
	toolbar: true,
	report: {
		dataSource: {
			filename: "URL-to-your-JSON-file"
		}
	}
});
</script>
</body>
</html>

Learn more

Number format object is used for defining number formatting in the component.

Properties

Name Type Description
name String Should be unique because each format is identified by name. The default value is "". The default number format is applied to the measures for which no specific number format exists.
thousandsSeparator String Symbol used as a thousand separator. The default value is
" " (space).
decimalSeparator String Symbol used as a decimal separator. The default value is ".".
decimalPlaces Number Defines the number of decimals to appear after decimal separator in the fractional part of the number. The default value is -1, it means the number will not be changed and it will be shown in its original form.
maxDecimalPlaces Number Defines the maximum number of decimals to appear after decimal separator in the fractional part of the number. The default value is -1, it means the number will not be changed and it will be shown in the original form.
maxSymbols Number Defines the maximum amount of symbols that can be displayed in a cell. The default value is 20.
currencySymbol String Symbol which appears near the value (hours, percent, currency symbol etc.). The default value is "".
currencySymbolAlign String Defines the positioning of a currency symbol. It could be either "left" or "right". The default value is "left".
isPercent Boolean Enables formatting data in percentage form. The behavior is similar to MS Excel. The default value is false. When setting isPercent to true, the numbers will be multiplied by 100 and % symbol will be appended to the result. For example, 0.42 will be converted to 42%. An important thing to note is if currencySymbol is set as % then setting the value of isPercent to true will not multiply the result by 100.
nullValue String Specifies the format of null values on the grid. The default value is "".
infinityValue String Specifies the format of infinity values on the grid. The default value is "Infinity".
divideByZeroValue String Specifies the format of values divided by zero. The default value is "Infinity".
textAlign String Defines the positioning of formatted values in cells on the grid. The alignments are "right" or "left". The default value is "right".

Example

Set default number formatting:

Conditional format object is used for defining conditional formatting rules.

Properties

Name Type Description
formula String Condition rule. Can include AND, OR, ==, !=, >, >=, <,<=, -, +, *, /, isNaN(), !isNaN(). #value is used for referring to the value of the cell in the condition. Example: '#value > 3'.
format Object Style object applied if the cell value meets the condition. Set color value as hex color codes. This is important for exports to PDF and Excel.
id Number optional Identifier in the conditional formatting rule. If id is not specified, the id for the rule is set inside the component automatically.
row Number optional Row index where the condition is applied.
column Number optional Column index where the condition is applied.
measure String optional Measure name to which the condition will be applied.
isTotal Boolean optional If undefined, the condition will affect all cells. If true, the condition affects subtotals and totals cells alone. If false it affects only the regular cells.

Example

Add conditional formatting rule:

Download WebDataRocks to get the JavaScript and CSS locally, refer from CDN, or include it with npm package manager.

ZIP package

Download ZIP containing all compiled and minified files and simply include them into your project:

<link href="webdatarocks.min.css" rel="stylesheet"/>
<script src="webdatarocks.toolbar.min.js"></script>
<script src="webdatarocks.js"></script>

Download

WebDataRocks CDN

Skip downloading and include the files directly from WebDataRocks CDN.

Refer to the latest version available:

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

Also, it is possible to specify the exact version, e.g. 1.0.0:

<link href="https://cdn.webdatarocks.com/1.0.0/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/1.0.0/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/1.0.0/webdatarocks.js"></script>

npm package manager

npm i webdatarocks --save

Then, include the CSS and JS files:

<link href="node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
<script src="node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
<script src="node_modules/webdatarocks/webdatarocks.js"></script>

Next steps

exportTo(exportType:String, parameters:Object, callback:Function|String)

Exports the content from the grid to Excel, PDF or HTML. Such an export file can be saved both locally and to a server.

Parameters

Name Type Description
exportType String One of the following export types: "excel", "pdf" or "html".
parameters Object optional Describes export parameters. Can have the following properties:
  • filename
String optional The name of the export file. The default name is pivot.
  • destinationType
String optional Destination for the download. By default, destinationType is set to "file", which means the export file is saved locally. Set destinationType as "server" to save the export file to the server.
  • url
String optional The URL to the server script saving the export file. It is required when saving the export file to the server (the export file is passed as a POST parameter).
  • excelSheetName
String optional Property to set custom sheet name when exporting to Excel.
  • showFilters
Boolean optional If true, shows the filters in exported Excel file.
  • header
String optional Only for PDF and HTML export. HTML string added to the export file as a header.
For example, "<div>##CURRENT-DATE##</div>".
  • footer
String optional Only for PDF and HTML export. HTML string added to the export file as a footer.
For example, "<div>##CURRENT-DATE##</div>".
  • pageOrientation
String optional Page orientation for PDF file. By default, pageOrientation is set to "portrait", which means the export file is saved in portrait mode. Set pageOrientation as "landscape" to save the export file in landscape mode.
callback Function | String optional Callback handler, which is called after the export process is finished.

Examples

1) Export content to Excel or PDF:

2) Export content to PDF with a custom header, save it to a server and add a callback:

webdatarocks.exportTo(
	"pdf",
	{
		header:"<div>##CURRENT-DATE##</div>",
		destinationType: "server",
		url: "URL to server script saving the file"
	},
	function () {
		console.log("Export process is finished");
	}
);