AngularJS is a popular MVW framework provided by Google. Our tutorial explains how to integrate WebDataRocks reporting tool with the AngularJS framework in your application.

Please follow simple steps:

  1. Include Angular
  2. Add WebDataRocks dependencies
  3. Initialize pivot grid

Step 1: Include Angular

Open your HTML file and add a simple AngularJS app inside.

<!DOCTYPE html>
<html>
<head>
    <title>WebDataRocks and AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script type="text/javascript">angular.module("App", [ ]);</script>
</head>
<body>
	<div ng-app="App"></div>
</body>
</html>

Step 2: Add WebDataRocks dependencies

Add WebDataRocks dependencies to the <head> section of your HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>WebDataRocks and AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script type="text/javascript">angular.module("App", [ ]);</script>
    <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>
</head>
<body>
	<div ng-app="App"></div>
</body>
</html>

Step 3: Initialize the pivot grid

Add webdatarocks module to App and use wbr-pivot directive to add pivot table to the HTML file. Please pay attention to attributes for wbr-pivot directive: wbr-toolbar is used to add the Toolbar, wbr-report — to specify the report.

<!DOCTYPE html>
<html>
<head>
    <title>WebDataRocks and AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script type="text/javascript">angular.module("App", ["webdatarocks"]);</script>
    <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>
</head>
<body>
	<div ng-app="App">
		<div wbr-pivot 
	     wbr-toolbar="true" 
	     wbr-report="{
			dataSource: {
				filename: 'https://cdn.webdatarocks.com/data/data.csv'
			}
	     }">
		</div>
	</div>
</body>
</html>

Now your AngularJS application is successfully integrated with WebDataRocks reporting tool. Open live demo.

Attributes for wbr-pivot directive

Each attribute can be either a string or an AngularJS variable. Here is the list of available attributes:

  • wbr-toolbar – adds the Toolbar when set as "true".
  • wbr-report – specifies a path to your report file. Also, can be used to set JSON object containing the report.
  • wbr-width – sets width of the component (in pixels or percent). The default value is 100%.
  • wbr-height – sets height of the component (in pixels or percent). The default value is 500.
  • wbr-global – presets options for all reports, for example, you can predefine one data source for all reports.
  • wbr-customize-cell – allows cells customization. Should be used the following way: wbr-customize-cell="customizeCellFunction(cell, data)". customizeCellFunction is your custom function, which receives cell representation on the grid (cell) and information about the cell (data).
  • wbr-report-complete – handles the reportcomplete event. This event is fired when the report is successfully loaded into WebDataRocks. Should be used the following way: wbr-report-complete="onReportComplete()". onReportComplete is your custom function, which performs necessary actions.

Examples