WebDataRocks

https://www.webdatarocks.com/doc/
Admin
WebDataRocks is a JavaScript pivot table component that provides interactive data analysis,...
Tokens:222,976
Snippets:3,486
Trust Score:8.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Clone Sample Project

Source: https://www.webdatarocks.com/doc/angular/integration-with-flutter

Clone the WebDataRocks sample project from GitHub to get started. Navigate into the cloned directory.

```bash
git clone https://github.com/WebDataRocks/pivot-flutter
cd pivot-flutter
```

--------------------------------

### Start Custom Theme Builder

Source: https://www.webdatarocks.com/doc/angular/custom-report-themes-angular

Run the theme builder using npm start after installing packages and customizing the Less variables in `webdatarocks.less`. This command generates the CSS files for your custom theme.

```bash
npm start
```

--------------------------------

### Full HTML Integration Example

Source: https://www.webdatarocks.com/doc/js/integration-with-any-charting-library

A complete HTML document demonstrating the inclusion of WebDataRocks and Chart.js libraries, container setup, and the initialization script.

```html
<html>
  <head>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <div id="pivotContainer"></div>
    <div style="width: 700px;">
      <canvas id="chartContainer"></canvas>
    </div>

    <script>
    const pivot = new WebDataRocks({
      container: "#pivotContainer",
      toolbar: true,
      report: {
        dataSource: {
          filename: "https://cdn.webdatarocks.com/data/data.csv",
        },
        slice: {
          rows: [
            {
              uniqueName: "Country",
            },
          ],
          columns: [
            {
              uniqueName: "Measures",
            },
          ],
          measures: [
            {
              uniqueName: "Price",
              aggregation: "sum",
            },
          ],
        },
      },
      reportcomplete: function() {
        pivot.off("reportcomplete");
        createChart();
      },
    });

    let chart;

    function createChart() {
      pivot.getData(
        {},
        drawChart,
        updateChart
      );
    };

    function drawChart(rawData) {
      let chartData = prepareData(rawData);

      const config = {
        type: "polarArea",
        data: {
          labels: chartData.labels,
          datasets: [{
            data: chartData.values,
          }],
        },
      }

    chart = new Chart(
        document.getElementById("chartContainer"),
        config,
      );
    }

    function updateChart(rawData) {
      chart.destroy();
      drawChart(rawData);
    };

    function prepareData(rawData) {
      let labels = rawData.data.filter(rec => rec.r0 && rec.v0).map(rec => rec.r0);
      let values = rawData.data.filter(rec => rec.r0 && rec.v0).map(rec => rec.v0);

      return {
        labels: labels,
        values: values
      };
    };
    </script>
  </body>
</html>
```

--------------------------------

### Install project dependencies

Source: https://www.webdatarocks.com/doc/angular/sample-project-angular

Run this command to install all required npm packages defined in the package.json file.

```bash
npm install
```

--------------------------------

### Install Google Charts wrapper

Source: https://www.webdatarocks.com/doc/angular/integration-with-google-charts-react

Install the react-google-charts package via npm.

```bash
npm install react-google-charts
```

--------------------------------

### Live Example Components

Source: https://www.webdatarocks.com/doc/js/integration-with-any-charting-library

Modular components for the live integration example, including HTML structure, CSS styling, and JavaScript logic.

```html
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div id="pivot-container"></div>
<div style="width: 600px;">
  <canvas id="chart-container"></canvas>
</div>
```

```css
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
```

```javascript
const pivot = new WebDataRocks({
  container: "#pivot-container",
  toolbar: true,
  report: {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [{
        uniqueName: "Country",
      }, ],
      columns: [{
        uniqueName: "Measures",
      }, ],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum",
      }, ],
    },
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createChart();
  },
});

let chart;

function createChart() {
  pivot.getData({},
    drawChart,
    updateChart
  );
};

function drawChart(rawData) {
  let chartData = prepareData(rawData);

  const config = {
    type: 'polarArea',
    data: {
      labels: chartData.labels,
      datasets: [{
        data: chartData.values,
      }],
    },
  }

  chart = new Chart(
    document.getElementById('chart-container'),
    config,
  );
}

function updateChart(rawData) {
  chart.destroy();
  drawChart(rawData);
};

function prepareData(rawData) {
  let labels = rawData.data.filter(rec => rec.r0 && rec.v0).map(rec => rec.r0);
  let values = rawData.data.filter(rec => rec.r0 && rec.v0).map(rec => rec.v0);

  return {
    labels: labels,
    values: values
  };
};
```

--------------------------------

### Install Project Dependencies

Source: https://www.webdatarocks.com/doc/angular/integration-with-vue

Commands to navigate to the project directory and install required npm packages.

```bash
cd <project-name>
npm install
```

--------------------------------

### Start Django development server

Source: https://www.webdatarocks.com/doc/angular/integration-with-django

Launches the local development server.

```bash
py manage.py runserver
```

```bash
python3 manage.py runserver
```

--------------------------------

### Install WebDataRocks React Wrapper

Source: https://www.webdatarocks.com/doc/angular/integration-with-react

Install the WebDataRocks React wrapper from npm to use it in your project.

```bash
npm install @webdatarocks/react-webdatarocks
```

--------------------------------

### Angular Component Setup for Default Configs

Source: https://www.webdatarocks.com/doc/angular/saving-the-report-angular

Example of an Angular component defining a report with specific options.

```typescript
import { Component, viewChild } from "@angular/core";
import { WebdatarocksPivotModule, WebdatarocksComponent } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  readonly pivotRef = viewChild.required<WebdatarocksComponent>("pivot");

  reportJson = {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.json"
    },
    options: {
      grid: {
        type: "flat",
        showHeaders: false
      },
      configuratorActive: true
    }
  };
}
```

```html
<app-wbr-pivot #pivot
 [toolbar]="true"
 [report]="reportJson">
</app-wbr-pivot>
```

--------------------------------

### Install Dependencies

Source: https://www.webdatarocks.com/doc/angular/integration-with-flutter

Install project dependencies using the dart pub get command. Ensure your Flutter SDK is in the PATH if you encounter errors.

```bash
dart pub get
```

--------------------------------

### Install WebDataRocks Core

Source: https://www.webdatarocks.com/doc/angular/integration-with-vue

Command to install the core WebDataRocks package for Vue 3 integration.

```bash
npm install @webdatarocks/webdatarocks
```

--------------------------------

### Start Django Development Server (Windows)

Source: https://www.webdatarocks.com/doc/angular/integration-with-django

Start the Django development server locally on Windows. Access the application via http://localhost:8000/.

```bash
py manage.py runserver
```

--------------------------------

### Full Component Implementation in React + ES6

Source: https://www.webdatarocks.com/doc/angular/integration-with-fusioncharts-react

This example demonstrates a complete React component integrating WebDataRocks and FusionCharts. It includes setup for the pivot table, chart properties, and event handlers for data retrieval and rendering.

```javascript
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import { useState, useRef } from "react";
import "@webdatarocks/webdatarocks/webdatarocks.fusioncharts.js";

import ReactFC from "react-fusioncharts";
import FusionCharts from "fusioncharts";
import Column2D from "fusioncharts/fusioncharts.charts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);

function App() {
  const pivotRef = useRef(null);
  const [chartProps, setChartProps] = useState({
    type: "mscolumn2d",
    width: "100%",
    height: 450,
    dataFormat: "json",
    dataSource: {},
  });

  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  const onReportComplete = () => {
    pivotRef.current.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {
    pivotRef.current.webdatarocks.fusioncharts.getData(
      {
        type: "mscolumn2d",
      },
      drawColumnChart,
      drawColumnChart
    );
  };

  const drawColumnChart = (chartConfig) => {
    chartConfig.chart.theme = "fusion";
    setChartProps({
      ...chartProps,
      dataSource: chartConfig,
    });
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
        ref={pivotRef}
        toolbar={true}
        report={report}
        reportcomplete={onReportComplete}
      />
      <ReactFC {...chartProps} />
    </div>
  );
}

export default App;
```

--------------------------------

### Start Django Development Server (macOS/Linux)

Source: https://www.webdatarocks.com/doc/angular/integration-with-django

Start the Django development server locally on macOS or Linux. Access the application via http://localhost:8000/.

```bash
python3 manage.py runserver
```

--------------------------------

### Install Google Charts Wrapper

Source: https://www.webdatarocks.com/doc/angular/integration-with-google-charts-vue-2

Install the required npm package for Google Charts integration in Vue.

```bash
npm install vue-google-charts
```

--------------------------------

### Install WebDataRocks Vue Wrapper

Source: https://www.webdatarocks.com/doc/angular/integration-with-vue

Command to add the WebDataRocks Vue wrapper package to the project.

```bash
npm install @webdatarocks/vue-webdatarocks
```

--------------------------------

### Define report configuration

Source: https://www.webdatarocks.com/doc/js/saving-the-report

Example of initializing a WebDataRocks instance with specific data source and grid options.

```javascript
const pivot = new WebDataRocks({
  container: "#pivotContainer",
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.json"
    },
    options: {
      grid: {
        type: "flat",
        showHeaders: false
      },
      configuratorActive: true
    }
  },
});
```

--------------------------------

### Get Instance Reference

Source: https://www.webdatarocks.com/doc/react/integration-with-jquery

Example of how to get a reference to the WebDataRocks component instance after it has been embedded using jQuery.

```APIDOC
## Get Instance Reference

### Description
Get a reference to the instance of the component by using the jQuery selector and the `.data()` method.

### Method
jQuery

### Endpoint
N/A (Client-side integration)

### Parameters
N/A

### Request Example
```javascript
var pivot = $("#wdr-component").data("webdatarocks");
```

### Response
#### Success Response (200)
- **pivot** (Object) - A reference to the instance of the embedded pivot table component.
```

--------------------------------

### Clone and start the custom theme builder

Source: https://www.webdatarocks.com/doc/angular/custom-report-themes

Commands to download the theme builder repository and initiate the build process.

```bash
git clone https://github.com/WebDataRocks/custom-theme-builder
cd custom-theme-builder
```

```bash
npm start
```

--------------------------------

### Create a Vue 3 Project

Source: https://www.webdatarocks.com/doc/angular/integration-with-vue

Command to initialize a new Vue 3 application.

```bash
npm create vue@3
```

--------------------------------

### Angular Component Setup for Global Configs

Source: https://www.webdatarocks.com/doc/angular/saving-the-report-angular

Example of an Angular component defining both a report and global configurations.

```typescript
import { Component, viewChild } from "@angular/core";
import { WebdatarocksPivotModule, WebdatarocksComponent } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  readonly pivotRef = viewChild.required<WebdatarocksComponent>("pivot");

  reportJson = {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.json"
    },
    options: {
      grid: {
        type: "classic"
      },
      configuratorActive: false
    }
  };
  globalReportJson = {
    options: {
      grid: {
        type: "flat",
        showHeaders: false
      },
      configuratorActive: true
    }
  };
}
```

```html
<app-wbr-pivot #pivot
 [toolbar]="true"
 [report]="reportJson"
 [global]="globalReportJson">
</app-wbr-pivot>
```

--------------------------------

### Create a Vue 2 Project

Source: https://www.webdatarocks.com/doc/angular/integration-with-vue

Command to initialize a new Vue 2 application.

```bash
npm create vue@2
```

--------------------------------

### Clone the WebDataRocks Vue sample project

Source: https://www.webdatarocks.com/doc/angular/sample-project-vue-2

Use these commands to download the repository and navigate into the project directory.

```bash
git clone https://github.com/WebDataRocks/pivot-vue
cd pivot-vue
```

--------------------------------

### Create React + ES6 Project

Source: https://www.webdatarocks.com/doc/js/integration-with-react

Commands to initialize a new React project using Vite.

```bash
npm create vite@latest my-app -- --template react
cd my-app
npm install
```

```bash
npm create vite@latest my-app --template react
cd my-app
npm install
```

--------------------------------

### Define report configuration in Vue

Source: https://www.webdatarocks.com/doc/js/saving-the-report-vue

Example of setting up a pivot component with a specific report configuration in a Vue 3 setup script.

```html
<script setup>
  import { Pivot } from "@webdatarocks/vue-webdatarocks";
  import "@webdatarocks/webdatarocks/webdatarocks.css";

  const reportJson = {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.json"
    },
    options: {
      grid: {
        type: "flat",
        showHeaders: false
      },
      configuratorActive: true
    }
  };
</script>

<template>
  <div>
    <Pivot
      ref="pivotRef"
      v-bind:report="reportJson"
      toolbar
    />
  </div>
</template>
```

--------------------------------

### Clone the WebDataRocks Angular sample project

Source: https://www.webdatarocks.com/doc/angular/sample-project-angular

Use these commands to download the repository and navigate into the project directory.

```bash
git clone https://github.com/WebDataRocks/pivot-angular
cd pivot-angular
```

--------------------------------

### Clone Custom Theme Builder

Source: https://www.webdatarocks.com/doc/angular/custom-report-themes-angular

Clone the custom theme builder repository from GitHub to start creating custom themes. Navigate into the cloned directory to proceed with installation.

```bash
git clone https://github.com/WebDataRocks/custom-theme-builder
cd custom-theme-builder
```

--------------------------------

### Get Canvas Element Reference in Angular

Source: https://www.webdatarocks.com/doc/angular/integration-with-any-charting-library

Use `viewChild` to get a reference to the `<canvas>` element, similar to how you get the WebDataRocks component reference. This allows you to interact with the canvas in your TypeScript code.

```typescript
import { Component, viewChild, ElementRef } from "@angular/core";
// ...

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  readonly pivotRef = viewChild.required<WebdatarocksComponent>("pivot");
  readonly chartCanvasRef = viewChild.required<ElementRef>("chartCanvas");

  // ...
}
```

--------------------------------

### wbr-pivot Directive Example

Source: https://www.webdatarocks.com/doc/vue/js/integration-with-angularjs

Example of integrating the wbr-pivot directive in an AngularJS application.

```APIDOC
## Example Usage

```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></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>

<div ng-app="App">
  <div wbr-pivot
       wbr-toolbar="true"
       wbr-report="{
    dataSource: {
      filename: 'https://cdn.webdatarocks.com/data/data.csv'
    }
  }">
  </div>
</div>
```

```javascript
angular.module("App", ["webdatarocks"]);
```
```

--------------------------------

### Clone React Sample Projects

Source: https://www.webdatarocks.com/doc/angular/sample-project-react

Commands to clone the repository and navigate to the specific React project directory.

```bash
git clone https://github.com/WebDataRocks/pivot-react
cd pivot-react/ES6
```

```bash
git clone https://github.com/WebDataRocks/pivot-react
cd pivot-react/typescript
```

--------------------------------

### Install FusionCharts Dependencies

Source: https://www.webdatarocks.com/doc/angular/integration-with-fusioncharts-react

Install the necessary FusionCharts packages via npm.

```bash
npm install fusioncharts react-fusioncharts
```

--------------------------------

### Install Highcharts and Wrapper

Source: https://www.webdatarocks.com/doc/angular/integration-with-highcharts-react

Install the necessary npm packages for Highcharts and its React integration.

```bash
npm install highcharts highcharts-react-official
```

--------------------------------

### Clone React + ES6 Sample Project

Source: https://www.webdatarocks.com/doc/react/sample-project-react

Use this command to clone the React + ES6 sample project from GitHub. Navigate into the ES6 directory after cloning.

```bash
git clone https://github.com/WebDataRocks/pivot-react
cd pivot-react/ES6
```

--------------------------------

### Applying a theme and initializing the pivot table

Source: https://www.webdatarocks.com/doc/angular/changing-report-themes-react

Include the theme stylesheet in your HTML and initialize the WebDataRocks instance with your configuration.

```html
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<link href="https://cdn.webdatarocks.com/latest/theme/lightblue/webdatarocks.min.css" rel="stylesheet"/>

<div id="wdr-container"></div>
```

```javascript
var pivot = new WebDataRocks({
  container: "#wdr-container",
  report: {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv"
    },
    slice: {
      rows: [{
          uniqueName: "Category"
        },
        {
          uniqueName: "Business Type"
        }
      ],
      columns: [{
        uniqueName: "Measures"
      }],
      measures: [{
          uniqueName: "Price",
          aggregation: "sum",
          format: "currency"
        },
        {
          uniqueName: "Quantity",
          aggregation: "sum"
        },
        {
          uniqueName: "Price * Quantity",
          formula: "sum(\"Price\") * sum(\"Quantity\") ",
          individual: true,
          caption: "Overall Price (Price x Quantity)",
          format: "currency"
        }
      ],
      expands: {
        rows: [{
          tuple: [
            "Category.Accessories"
          ]
        }]
      }
    },
    formats: [{
      name: "currency",
      currencySymbol: "$",
      currencySymbolAlign: "left",
      thousandsSeparator: ",",
      decimalPlaces: 2
    }]
  },
  width: "100%",
  height: 430,
  toolbar: true
});
```

--------------------------------

### Create React + TypeScript Project

Source: https://www.webdatarocks.com/doc/js/integration-with-react

Commands to initialize a new React project with TypeScript support using Vite.

```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
```

```bash
npm create vite@latest my-app --template react-ts
cd my-app
npm install
```

--------------------------------

### Install amCharts 4 npm package

Source: https://www.webdatarocks.com/doc/angular/integration-with-amcharts-vue

Install the amCharts 4 npm package using npm.

```bash
npm install @amcharts/amcharts4
```

--------------------------------

### Install Chart.js

Source: https://www.webdatarocks.com/doc/angular/integration-with-any-charting-library

Install the Chart.js library using npm. This command is required before you can use Chart.js in your Angular project.

```bash
npm install chart.js
```

--------------------------------

### Run database migrations

Source: https://www.webdatarocks.com/doc/angular/js/integration-with-django

Execute database migrations to set up default Django application tables.

```bash
py manage.py migrate
```

```bash
python3 manage.py migrate
```

--------------------------------

### Install Chart.js npm package

Source: https://www.webdatarocks.com/doc/angular/integration-with-any-charting-library-vue

Install the Chart.js npm package using npm. This is a prerequisite for using Chart.js in your project.

```bash
npm install vue-chartjs
```

--------------------------------

### Clone React + TypeScript Sample Project

Source: https://www.webdatarocks.com/doc/react/sample-project-react

Use this command to clone the React + TypeScript sample project from GitHub. Navigate into the typescript directory after cloning.

```bash
git clone https://github.com/WebDataRocks/pivot-react
cd pivot-react/typescript
```

--------------------------------

### Install Highcharts Angular Wrapper

Source: https://www.webdatarocks.com/doc/angular/integration-with-highcharts

Install the Highcharts Angular wrapper using npm to integrate Highcharts charts into your Angular application.

```bash
npm install highcharts-angular
```

--------------------------------

### Example rawData.data structure from getData()

Source: https://www.webdatarocks.com/doc/angular/integration-with-any-charting-library-vue

This is an example of the data structure returned by the WebDataRocks getData() API. It includes aggregated data and row/column information.

```json
data: [
  { v0: 6221870 }, // Grand total
  { r0: "Australia", v0: 1372281 },
  { r0: "France", v0: 1117794 },
  { r0: "Germany", v0: 1070453 },
  { r0: "Canada", v0: 1034112 },
  { r0: "United States", v0: 847331 },
  { r0: "United Kingdom", v0: 779899 }
]
```

--------------------------------

### Run the Project

Source: https://www.webdatarocks.com/doc/angular/integration-with-amcharts-vue

Run your project using the npm run dev command and access the application at http://localhost:5173/ to view the integrated dashboard.

```bash
npm run dev
```

--------------------------------

### Clone sample project

Source: https://www.webdatarocks.com/doc/angular/integration-with-jupyter-notebook

Downloads the official WebDataRocks Jupyter sample project from GitHub.

```bash
git clone https://github.com/WebDataRocks/pivot-jupyter-notebook/
```

--------------------------------

### Initialize WebDataRocks Reporting Tool

Source: https://www.webdatarocks.com/doc/js/init-api-call

Instantiate the WebDataRocks reporting tool by calling `new WebDataRocks()` and specifying the container element and toolbar option. This code should be placed after the library scripts are loaded.

```javascript
var pivot = new WebDataRocks({
  container: "#pivot-container",
  toolbar: true,
});
```

--------------------------------

### Install Chart.js npm package

Source: https://www.webdatarocks.com/doc/angular/integration-with-any-charting-library-react

Install the necessary npm packages for Chart.js and its React wrapper. This step is crucial for enabling charting capabilities in your application.

```bash
npm i react-chartjs-2 chart.js
```
Tokens:
Raw