Documentation menu
JS logo
Current framework logo
JS logo React logo Angular logo Vue logo

Integration with AngularJS

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

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 the 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.
  • wbr-report-change – handles the reportchange event. This event is fired when the report of the pivot table is changed. Should be used the following way: wbr-report-change="onReportChange()". Define the scenario of actions after the report is changed in the onReportChange function.
  • wbr-update – handles the update event. This event is fired when the data is loaded into the component and the data in the slice is updated, filtered or sorted. Should be used the following way: wbr-update="onUpdate()". Define the scenario of actions after the report is changed in the onUpdate function.
  • wbr-cell-click – handles the cellclick event. This event is fired when the cell on the grid is clicked. Should be used the following way: wbr-cell-click="onCellClick(cell)". Define the necessary actions after the one-click interaction with cell in the onCellClick(cell) function.
  • wbr-cell-double-click – handles the celldoubleclick event. This event is fired when the cell on the grid is double-clicked. Should be used the following way: wbr-cell-double-click="onCellDoubleClick(cell)". Define the necessary actions after the double-click interaction with cell in the onCellDoubleClick(cell) function.

Examples