Back to homepage

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

Our pivot table can easily be translated into different languages. This article describes the process of language localization for WebDataRocks reporting component.

Available localizations

Localization files for new languages can be added by creating a new pull request on GitHub. Our team highly appreciates any help.

Create a custom localization file

Follow the steps below to create your own localization file based on our template:

Step 1. Download template JSON file. It contains all labels that are used in WebDataRocks and English values for them.

Step 2. Translate values into the language you want.

For example, you want a Spanish localization. You start from replacing the first label-value pair from the template ("flatHierarchyBox": "Select and arrange columns") with its Spanish equivalent ("flatHierarchyBox": "Seleccionar y organizar columnas") and keep on the same way with the whole file (e.g., check Spanish translated sample).

Localize a specific report

To set a specific language for a report, add a report.localization property with the necessary localization:

Set the localization as a URL to the file

report: {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace this file with your own localization file
  localization: "https://cdn.webdatarocks.com/loc/es.json"
}

Set the localization as an inline JSON object

report: {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace the translation below with your own labels
  localization: {
    toolbar: {
      connect: "Conectar",
      open: "Abierto",
      save: "Salvar",
      export: "Exportar",
      // Other labels
    }
  }
}

Set localization for all reports

If you want to set one language for all reports, add a global object with localization when initializing WebDataRocks:

Set the localization as a URL to the file

let pivot = new WebDataRocks({
  container: "#pivotContainer",
  report: {
    // Your report
  },
  global: {
    // Replace this file with own localization file
    localization: "https://cdn.webdatarocks.com/loc/es.json"
  }
});

Set the localization as an inline JSON object

let pivot = new WebDataRocks({
  container: "#pivotContainer",
  report: {
    // Your report
  },
  global: {
    // Replace the translation below with your own labels
    localization: {
      toolbar: {
        connect: "Conectar",
        open: "Abierto",
        save: "Salvar",
        export: "Exportar",
        // Other labels
      }
    }
  }
});

Open a live demo.

Learn more about the Global Object.

Our reporting tool comes with the Toolbar, which gives you access to the most useful features. This article explains how to use the Toolbar.

Show the Toolbar

By default, the Toolbar is hidden in WebDataRocks.

To show the Toolbar, follow the steps below:

Step 1. Include the webdatarocks.toolbar.min.js file to the webpage:

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>

Step 2. Specify the toolbar: true parameter when creating a WebDataRocks instance:

let pivot = new WebDataRocks({
    container: "#pivotContainer",
    toolbar: true
});

Hide the Toolbar

If you want to display the component without the Toolbar, you can remove toolbar: true from your code or set the toolbar parameter to false:

let pivot = new WebDataRocks({
  container: "#pivotContainer",
  toolbar: false
});

Available functionality

The Toolbar contains the following tabs:

menu_connect
Connect		Allows connecting to your JSON or CSV data source.
Has a drop-down menu with the following tabs: To local CSV, To local JSON, To remote CSV, and To remote JSON.
menu_open
Open		Allows opening locally or remotely saved reports.
Has a drop-down menu with the following tabs: Local report and Remote report.
menu_save
Save		Saves your current report configuration into a local JSON file.
menu_export
Export		Allows printing the current report or exporting it into various formats.
Has a drop-down menu with the following tabs: Print, To HTML, To Excel, and To PDF.
menu_format
Format		Allows printing the current report or exporting it into various formats.
Has a drop-down menu with the following tabs: Format cells and Conditional formatting.
menu_options
Options		Opens the Layout options pop-up window, where you can show/hide totals or switch between the classic, compact, and flat forms.
menu_fields
Fields		Opens the Field List, where you can select which data is shown in rows, columns, measures, and report filters.
menu_fullscreen_open
Fullscreen		Switches WebDataRocks between the fullscreen and windowed mode. You can also exit fullscreen by pressing Esc.

Specifics of the Toolbar on mobile devices

If you are using WebDataRocks on a mobile device, the mobile version of the Toolbar with a different set of tabs will be shown. For example, instead of the Connect tab, you will see CSV and JSON tabs.

To switch to the desktop Toolbar version on your mobile device, you can request the desktop site in the browser settings.

Adjust the Toolbar to your needs

You can customize the standard view and functionality of the Toolbar (e.g., add new tabs or remove the ones you don’t need). If you are interested in such an option, follow this tutorial: Customize the Toolbar.

See also

This tutorial shows how to create your first JavaScript project with the WebDataRocks reporting tool.

Step 1. Get WebDataRocks

You can get WebDataRocks in one of the following ways:

npm

Install WebDataRocks by running the following command in the console:

npm install @webdatarocks/webdatarocks

CDN

Include the following files in your HTML page to use the latest version of WebDataRocks:

<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>

ZIP package

Download the ZIP containing all compiled and minified files and add them to your project.

Download

Step 2. Create a WebDataRocks pivot table

Step 2.1. Depending on how you have downloaded WebDataRocks, import it into your project:

npm

Import WebDataRocks using the method supported by your module bundler. For example:

import WebDataRocks from "@webdatarocks/webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.min.css";

CDN

WebDataRocks was imported in Step 1.

ZIP package

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

Step 2.2. In your HTML file, add a container for WebDataRocks:

<div id="pivotContainer"></div>

Step 2.3. Create a WebDataRocks instance:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  toolbar: true,
});

Step 3. See the result

Open the created webpage in the browser — WebDataRocks is embedded and ready to be used.

You can see how code from this guide works in our live demo on CodePen.

See also

What is WebDataRocks

WebDataRocks is a free web reporting tool for data analysis and visualization.

It is written in JavaScript and is not constrained by any external framework. This simple but enterprise-featured web-based pivot grid can be added to your website, application, or project web page within minutes.

What does it offer

WebDataRocks easily displays your CSV or JSON data in an interactive pivot table, offers a number of data analysis features, and provides a reporting experience. You get real-time reporting of your data on any device you prefer (PC, tablet, mobile, etc.)

Who can use WebDataRocks

Our reporting tool would be a perfect fit if you:

  • Want to analyze data quickly.
  • Are looking for an online reporting tool.
  • Need a lightweight web pivot table.
  • Don’t know how to code or don’t want to.

Why is it cool

  • WebDataRocks easily embeds in your web page not requiring much programming skills.
  • You can save your time and expenses on integration as it’s already configured and ready to use.
  • Our tool has enterprise features for a real business, despite being costless.
  • It’s a powerful analytic tool with a well-designed ready-to-use modern UI.

The main benefit is that WebDataRocks is an absolutely free tool created by passionate data lovers from Flexmonster.

How can I get WebDataRocks and add it to my project

To make it simple for you we’ve prepared an integration tutorial that provides you with easy instructions on how to download WebDataRocks and add it to your website or application.

How can I use more advanced options

For those of our users who want to further explore WebDataRocks functionality, we prepared guides on the following topics:

Some thoughts from creators

We truly hope that you will enjoy all this experience with WebDataRocks. It’s created to help solve data analysis needs for different kinds of projects: start-ups, nonprofit, or commercial. So, if it will work for you, please share your success with others. Let data rock this world!

License

By downloading, installing, and/or using WebDataRocks, you agree with the terms of WebDataRocks End User License Agreement.

Move up