Documentation menu
JS React Angular Vue
JS React Angular Vue

Integrating WebDataRocks

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

If you’re working with a module bundler, import WebDataRocks using the method supported by your bundler. For example:

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

You can also import WebDataRocks in your HTML:

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

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="pivot-container"></div>

Step 2.3. Create a WebDataRocks instance:

const pivot = new WebDataRocks({
  container: "#pivot-container",
  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