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

Prerequisites

You need to have your copy of WebDataRocks. If you have not requested yet, get it now.

After that, 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 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 references to your HTML file. Please note, here we include sample links which do not work. In your project use references from the email we have sent you.

<!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/your-personal-code/webdatarocks.min.css" rel="stylesheet"/>
    <script src="https://cdn.webdatarocks.com/your-personal-code/webdatarocks.toolbar.min.js"></script>
    <script src="https://cdn.webdatarocks.com/your-personal-code/webdatarocks.js"></script>
</head>
<body>
	<div ng-app="App"></div>
</body>
</html>

Step 3: Initialize 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/your-personal-code/webdatarocks.min.css" rel="stylesheet"/>
    <script src="https://cdn.webdatarocks.com/your-personal-code/webdatarocks.toolbar.min.js"></script>
    <script src="https://cdn.webdatarocks.com/your-personal-code/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