Sample project

Get the sample project to try WebDataRocks.

See the Integrate WebDataRocks tutorial to integrate WebDataRocks into your existing project.

Note that our sample project uses Options API.

Step 1. Download or clone our sample project from GitHub:

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

Step 2. Install the npm packages described in the package.json file:

npm install

Step 3. Run your application:

npm run dev

The sample project will be available at http://localhost:5173/.

You can shut down the app with Ctrl + C.

React + ES6

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

React + TypeScript

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

Step 2. Install the npm packages described in the package.json file:

npm install

Step 3. Run your application:

npm start

The application will be available at http://localhost:3000/.

You can shut down the app with Ctrl + C.

Supported chart types

WebDataRocks supports the following chart types:

Area (demo)
Bar (demo)
Column (demo)
Line (demo)
Pie (demo)
Sankey (demo)

If you need a chart that is not on the list, you can implement a custom logic of data processing in the options.prepareDataFunction parameter of googlecharts.getData().

To start a new Angular visualization project with WebDataRocks Pivot Table and Google Charts, follow the steps below.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the integration guide. Your code of the component with WebDatarocks should look similar to the following:

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
}

<app-wbr-pivot
 [toolbar]="true">
</app-wbr-pivot>

Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };
}

<app-wbr-pivot
 [toolbar]="true"
 [report]="report">
</app-wbr-pivot>

The fields you’ve specified in the report will be shown on the chart.

Step 2. Get a reference to the WebDataRocks instance

Some of WebDataRocks methods and events are needed to create a chart. Using a reference to the WebDataRocks instance, we can access WebDataRocks API.

Import WebdatarocksComponent and get a reference to the <app-wbr-pivot> instance using a template variable and the @ViewChild decorator:

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 {
  @ViewChild("pivot") pivotRef!: WebdatarocksComponent;

  // ...
}

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

Now it’s possible to interact with the component through this.pivotRef.webdatarocks.

Note. If you are using the legacy @webdatarocks/ng-webdatarocks wrapper, import WebdatarocksComponent from it.

Step 3. Add Google Charts

Step 3.1. Include Google Charts in src/index.html:

<!-- Loading Google Charts -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

The loader.js file provides a global google variable, which we will use to work with Google Charts.

Step 3.2. In our Angular component, we now need to tell the TypeScript compiler that the google variable we will be using is declared in another file. It can be done with the declare keyword:

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

declare let google: any;

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  // ...
}

Step 3.3. Create a flag variable to know when the Google Charts library is ready to be used:

googleChartsLoaded: boolean = false;

Step 3.4. In the ngOnInit() hook, load the Google Visualization API and the corechart package:

ngOnInit(): void {
  google.charts.load("current", {
    packages: ["corechart", "bar"],
  });
}

Step 3.5. Add a callback to run when the Google Visualization API is loaded. In the callback handler, set the googleChartsLoaded flag to true:

ngOnInit(): void {
  google.charts.load("current", {
    packages: ["corechart", "bar"],
  });
  google.charts.setOnLoadCallback(() => this.onGoogleChartsLoaded());
}

onGoogleChartsLoaded() {
  this.googleChartsLoaded = true;
}

Step 3.6. In the HTML template of the component, create a <div> container for Google Charts with an id (e.g., googlechartContainer):

<div id="googlechartContainer"></div>

If you run the project now, the chart won’t show any data because WebDataRocks is not integrated with Google Charts yet. We will connect them in the next step.

Step 4. Show the data from the pivot table on the chart

Step 4.1. Create a variable to store data for the chart (e.g., chartData):

chartData: any = [];

The chartData variable is now empty, but soon we’ll fill it with data from our component.

Step 4.2. Import the WebDataRocks Connector for Google Charts:

import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

The Connector provides the googlecharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.

Step 4.3. If we call the googlecharts.getData() method before WebDataRocks is fully loaded, it will return an empty result. To know when WebDataRocks is ready to provide data for the chart, handle the reportcomplete event:

googleChartsLoaded: boolean = false;
// Add a flag variable to keep the state of the report
pivotTableReportComplete: boolean = false;

// ...

onReportComplete() {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks
  this.pivotRef.webDataRocks.off("reportComplete");
  this.pivotTableReportComplete = true;
}

<app-wbr-pivot #pivotRef
 [toolbar]="true"
 [report]="report"
 (reportcomplete)="onReportComplete()">
</app-wbr-pivot>
<div id="googlechartContainer"></div>

Now we know when the data is loaded and the report is ready.

Step 4.4. Let’s start creating a chart. A function to create a chart should be called only when the following conditions are met:

The Google Charts library is loaded (the googleChartsLoaded flag is true).
The WebDataRocks report is ready (the pivotTableReportComplete flag is true).

Since we don’t know which will happen first, we have to handle both cases. Modify onGoogleChartsLoaded() and onReportComplete() functions as follows:

onGoogleChartsLoaded() {
  this.googleChartsLoaded = true;
  // Handle the case when the report is complete before Google Charts is loaded 
  if (this.pivotTableReportComplete) {
    this.createChart();
  }
}

onReportComplete() {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks
  this.pivotRef.webDataRocks.off("reportComplete");
  this.pivotTableReportComplete = true;
  // Handle the case when Google Charts is loaded before the report is complete
  if (this.googleChartsLoaded) {
    this.createChart();
  }
}

Step 4.5. Now it’s time to implement the createChart() function. It will use the googlecharts.getData() method from the Connector:

createChart() {
  this.pivotRef.webDataRocks.googlecharts?.getData(
    {
      type: "column",
    },
    // Function called when data for the chart is ready
    this.drawColumnChart.bind(this),
    // Function called on report changes (filtering, sorting, etc.)
    this.drawColumnChart.bind(this)
  );
}

Step 4.6. Finally, implement the drawColumnChart() function:

drawColumnChart(_data: any) {
  let data = google.visualization.arrayToDataTable(_data.data);
  const columnChartContainer = document.getElementById("googlechartContainer");
  const chart = new google.visualization.ColumnChart(columnChartContainer);
  chart.draw(data);
}

Notice the id of the columnChartContainer — it must match the id of a <div> created in step 3.6 (in our case, it is googlechartContainer).

Step 5. Run the project

Run your project with the following command:

ng serve --open

If the page with WebDataRocks is not opened automatically, go to http://localhost:4200/ in the browser to see how the pivot table looks in combination with Google Charts.

To see what a real-time interaction is, try experimenting: filter the data, change the measures and the aggregation functions — the results are reflected on the chart at once.

To learn more about chart customization, please refer to the Google Charts Documentation.

Check out the full code

After completing this tutorial, the full code of the integration should look as follows:

import { Component, ViewChild } from "@angular/core";
import { WebdatarocksPivotModule, WebdatarocksComponent } from "@webdatarocks/ngx-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

declare let google: any;

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

  googleChartsLoaded: boolean = false;
  pivotTableReportComplete: boolean = false;

  chartData: any = [];

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

  ngOnInit(): void {
    google.charts.load("current", {
      packages: ["corechart", "bar"],
    });
    google.charts.setOnLoadCallback(() => this.onGoogleChartsLoaded());
  }

  onGoogleChartsLoaded() {
    this.googleChartsLoaded = true;
    // Handle the case when the report is complete before Google Charts is loaded
    if (this.pivotTableReportComplete) {
      this.createChart();
    }
  }

  onReportComplete() {
    // Unsubscribing from reportcomplete
    // We need it only to track the initialization of WebDataRocks
    this.pivotRef.webDataRocks.off("reportComplete");
    this.pivotTableReportComplete = true;
    // Handle the case when Google Charts is loaded before the report is complete
    if (this.googleChartsLoaded) {
      this.createChart();
    }
  }

  createChart() {
    this.pivotRef.webDataRocks.googlecharts?.getData(
      {
        type: "column",
      },
      // Function called when data for the chart is ready
      this.drawColumnChart.bind(this),
      // Function called on report changes (filtering, sorting, etc.)
      this.drawColumnChart.bind(this)
    );
  }

  drawColumnChart(_data: any) {
    let data = google.visualization.arrayToDataTable(_data.data);
    const columnChartContainer = document.getElementById("googlechartContainer");
    const chart = new google.visualization.ColumnChart(columnChartContainer);
    chart.draw(data);
  }
}

<app-wbr-pivot #pivot
 [toolbar]="true"
 [report]="report"
 (reportcomplete)="onReportComplete()">
</app-wbr-pivot>
<div id="googlechartContainer"></div>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>WebDataRocks and Google Charts</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Loading Google Charts -->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Supported chart types

WebDataRocks supports the following chart types:

Area (demo)
Bar (demo)
Column (demo)
Line (demo)
Pie (demo)
Sankey (demo)

If you need a chart that is not on the list, you can implement a custom logic of data processing in the options.prepareDataFunction parameter of googlecharts.getData().

To start a new Vue data visualization project with WebDataRocks Pivot Table and Google Charts, follow the steps below.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the integration guide. Your code of the component with WebDatarocks should look similar to the following:

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

<template>
  <div>
    <Pivot
     toolbar
    />
  </div>
</template>

Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:

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

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

<template>
  <div>
    <Pivot
     toolbar
     v-bind:report="report"
    />
  </div>
</template>

The fields you’ve specified in the report will be shown on the chart.

Step 2. Get a reference to the WebDataRocks instance

Some of WebDataRocks methods and events are needed to create a chart. Using a reference to the WebDataRocks instance, we can access WebDataRocks API.

Get the reference as follows:

<script setup>
  // ...
  import { ref } from "vue";
  
  const pivotRef = ref(null);

  // ...
</script>

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

Now it’s possible to interact with the component through pivotRef.value.webdatarocks.

Step 3. Add Google Charts

Step 3.1. Download the Google Charts wrapper for Vue:

npm install vue-google-charts

Step 3.2. Import Google Charts for Vue 2:

import { GChart } from "vue-google-charts/legacy";

Step 3.3. Now you can add a chart to your component. Let’s create a column chart:

<template>
  <div>
    <Pivot
      ref="pivotRef"
      toolbar
      v-bind:report="report"
    />
    <GChart
      type="ColumnChart"
    />
  </div>
</template>

If you run the project now, the chart won’t show any data because WebDataRocks is not integrated with Google Charts yet. We will connect them in the next step.

Step 4. Show the data from the pivot table on the chart

Step 4.1. Create a reactive variable to store data for the chart (e.g., chartData):

const chartData = ref([]);

The chartData variable is now empty, but soon we’ll fill it with data from our component.

Step 4.2. Import the WebDataRocks Connector for Google Charts:

import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

The Connector provides the googlecharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.

<script setup>
  // ...

  function onReportComplete() {
    // Unsubscribing from reportcomplete
    // We need it only to track the initialization of WebDataRocks
    pivotRef.value.webdatarocks.off("reportComplete");
    createChart();
  }
</script>

<template>
  <div>
    <Pivot
      ref="pivotRef"
      toolbar
      v-bind:report="report"
      v-bind:reportcomplete="onReportComplete"
    />
    <GChart
      type="ColumnChart"
    />
  </div>
</template>

Now the chart will be created only when the data is loaded and the report is ready.

Step 4.4. Implement the createChart() function. It will use the googlecharts.getData() method from the Connector:

function createChart() {
  pivotRef.value.webdatarocks.googlecharts.getData(
    {
      type: "column",
    },
    // Function called when data for the chart is ready
    (chartConfig) => chartData.value = chartConfig.data,
    // Function called on report changes (filtering, sorting, etc.)
    (chartConfig) => chartData.value = chartConfig.data
  );
}

Notice the type configuration — it must correspond to the chart type specified in step 3.3 (in our case, it is "column").

Step 4.5. Finally, pass the data to the chart:

<GChart
 type="ColumnChart"
 v-bind:data="chartData"
/>

Since the chartData is reactive and is assigned using the v-bind directive, the chart will be re-rendered each time the chartData’s value is updated. As a result, all your changes to the WebDataRocks report will be reflected on the chart.

Step 5. Run the project

Run your project with the following command:

npm run dev

Open http://localhost:5173/ in the browser to see how the pivot table looks in combination with Google Charts.

Now try experimenting: filter the data, change the measures and the aggregation functions, and see how the results are reflected on the chart.

To learn more about configurations available for Google Charts, please refer to the Google Charts documentation.

Check out the full code

After completing this tutorial, the full code of the component should look as follows:

<script setup>
  import { Pivot } from "@webdatarocks/vue-webdatarocks";
  import "@webdatarocks/webdatarocks/webdatarocks.css";
  import { ref } from "vue";
  import { GChart } from "vue-google-charts/legacy";
  import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

  let pivotRef = ref(null);

  const chartData = ref([]);

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

  function onReportComplete() {
    // Unsubscribing from reportcomplete
    // We need it only to track the initialization of WebDataRocks
    pivotRef.value.webdatarocks.off("reportComplete");
    createChart();
  }

  function createChart() {
    pivotRef.value.webdatarocks.googlecharts.getData(
      {
        type: "column",
      },
      // Function called when data for the chart is ready
      (chartConfig) => chartData.value = chartConfig.data,
      // Function called on report changes (filtering, sorting, etc.)
      (chartConfig) => chartData.value = chartConfig.data
    );
  }
</script>

<template>
  <div>
    <Pivot
      ref="pivotRef"
      toolbar
      v-bind:report="report"
      v-bind:reportcomplete="onReportComplete"
    />
    <GChart
      type="ColumnChart"
      v-bind:data="chartData"
    />
  </div>
</template>

Supported chart types

WebDataRocks supports the following chart types:

Area (demo)
Bar (demo)
Column (demo)
Line (demo)
Pie (demo)
Sankey (demo)

If you need a chart that is not on the list, you can implement a custom logic of data processing in the options.prepareDataFunction parameter of googlecharts.getData().

To start a new React data visualization project with WebDataRocks Pivot Table and Google Charts, follow the steps below.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the integration guide. Your code of the component with WebDatarocks should look similar to the following:

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

function App() {
  return (
    <div> 
      <WebDataRocksReact.Pivot
       toolbar={true}
      />
    </div>
  );
}

export default App;

Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:

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

  return (
    <div> 
      <WebDataRocksReact.Pivot
       toolbar={true}
       report={report}
      />
    </div>
  );
}

The fields you’ve specified in the report will be shown on the chart.

Step 2. Get a reference to the WebDataRocks instance

Some of WebDataRocks methods and events are needed to create a chart. Using a reference to the WebDataRocks instance, we can access WebDataRocks API.

Get the reference with the useRef hook:

React + ES6

// ...
import { useRef } from "react";

function App() {
  const pivotRef = useRef(null);

  // ...

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

export default App;

React + TypeScript

// ...
import { RefObject, useRef} from "react";

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot | null> = useRef<WebDataRocksReact.Pivot>(null);

  // ...

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

export default App;

Now it’s possible to interact with the component through pivotRef.current.webdatarocks.

Step 3. Add Google Charts

Step 3.1. Download the Google Charts wrapper for React:

npm install react-google-charts

Step 3.2. Import Google Charts into your component:

import { Chart } from "react-google-charts";

Step 3.3. Now you can add a chart to your component. Let’s create a column chart:

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
    />
    <Chart
     chartType="ColumnChart"
    />
  </div>
);

If you run the project now, the chart won’t show any data because WebDataRocks is not integrated with Google Charts yet. We will connect them in the next step.

Step 4. Show the data from the pivot table on the chart

Step 4.1. Create a state variable to store data for the chart (e.g., chartData):

import { useState, /* Other imports */ } from "react";

function App() {
  // ...
  const [chartData, setChartData] = useState([]);
  // ...
}

The chartData variable is now empty, but soon we’ll fill it with data from our component.

Step 4.2. Import the WebDataRocks Connector for Google Charts:

import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

The Connector provides the googlecharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.

React + ES6

const onReportComplete = () => {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks 
  pivotRef.current.webdatarocks.off("reportComplete");
  createChart();
};

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
     reportcomplete={onReportComplete}
    />
    <Chart
     chartType="ColumnChart"
    />
  </div>
);

React + TypeScript

const onReportComplete = () => {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks 
  pivotRef.current?.webdatarocks.off("reportComplete");
  createChart();
};

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
     reportcomplete={onReportComplete}
    />
    <Chart
     chartType="ColumnChart"
    />
  </div>
);

Now the chart will be created only when the data is loaded and the report is ready.

Step 4.4. Implement the createChart() function. It will use the googlecharts.getData() method from the Connector:

React + ES6

const createChart = () => {  
  pivotRef.current.webdatarocks.googlecharts.getData(
    {
      type: "column",
    },
    // Function called when data for the chart is ready
    (chartConfig) => setChartData(chartConfig.data),
    // Function called on report changes (filtering, sorting, etc.) 
    (chartConfig) => setChartData(chartConfig.data),
  );
};

React + TypeScript

const createChart = () => {  
  pivotRef.current?.webdatarocks.googlecharts.getData(
    {
      type: "column",
    },
    // Function called when data for the chart is ready
    (chartConfig: any) => setChartData(chartConfig.data),
    // Function called on report changes (filtering, sorting, etc.) 
    (chartConfig: any) => setChartData(chartConfig.data),
  );
};

Notice the type configuration — it must correspond to the chartType specified in step 3.3 (in our case, the type value is "column").

As you can see, here we are using the chartData’s setter setChartData(). Each time the chartData’s value is updated, the chart will be re-rendered. As a result, all your changes to the WebDataRocks report will be reflected on the chart.

Step 4.5. Finally, pass the data to the chart:

<Chart
 chartType="ColumnChart"
 data={chartData}
/>

Step 5. Run the project

Run your project with the following command:

npm run dev

Open http://localhost:5173/ in the browser to see how the pivot table looks in combination with Google Charts.

Now try experimenting: filter the data, change the measures and the aggregation functions, and see how the results are reflected on the chart.

To learn more about configurations available for Google Charts, please refer to the Google Charts documentation.

Check out the full code

After completing this tutorial, the full code of the component should look as follows:

React + ES6

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import { useRef, useState } from "react";
import { Chart } from "react-google-charts";
import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

function App() {
  const pivotRef = useRef(null);
  const [chartData, setChartData] = useState([]);

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

  const onReportComplete = () => {
    // Unsubscribing from reportcomplete
    // We need it only to track the initialization of WebDataRocks
    pivotRef.current.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {
    pivotRef.current.webdatarocks.googlecharts.getData(
      {
        type: "column",
      },
      // Function called when data for the chart is ready
      (chartConfig) => setChartData(chartConfig.data),
      // Function called on report changes (filtering, sorting, etc.)
      (chartConfig) => setChartData(chartConfig.data),
    );
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
       ref={pivotRef} 
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <Chart
       chartType="ColumnChart"
       data={chartData}
      />
    </div>
  );
}

export default App;

React + TypeScript

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import { RefObject, useRef, useState } from "react";
import { Chart } from "react-google-charts";
import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot> = useRef<WebDataRocksReact.Pivot>(null);
  const [chartData, setChartData] = useState([]);

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

  const onReportComplete = () => {
    // Unsubscribing from reportcomplete
    // We need it only to track the initialization of WebDataRocks 
    pivotRef.current?.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {  
    pivotRef.current?.webdatarocks.googlecharts.getData(
      {
        type: "column",
      },
      // Function called when data for the chart is ready
      (chartConfig: any) => setChartData(chartConfig.data),
      // Function called on report changes (filtering, sorting, etc.) 
      (chartConfig: any) => setChartData(chartConfig.data),
    );
  };
  
  return (
    <div>
      <WebDataRocksReact.Pivot 
       ref={pivotRef}
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <Chart
       chartType="ColumnChart"
       data={chartData}
      />
    </div>
  );
}

export default App;

No data size limit

WebDataRocks works with JSON and CSV datasets no larger than 1 MB, which should satisfy the majority of use cases.

Flexmonster doesn’t set limits on the dataset’s size, so the maximum size depends only on the browser’s capabilities. Moreover, Flexmonster can connect to server-side data storage and load only the necessary data subsets into the browser, allowing you to work with much larger datasets.

More data source options

In addition to having no strict limit on the data size, Flexmonster offers a wider selection of data sources.

The following data sources are supported out of the box:

JSON
CSV
Microsoft Analyses Services
SQL databases
Elasticsearch
MongoDB

You can also connect Flexmonster Pivot to any data source using the custom data source API — Flexmonster’s communication protocol that helps you build a custom data source using your server.

See the full list of the data sources supported by Flexmonster.

Built-in pivot charts

Flexmonster offers one more exclusive feature — built-in pivot charts. This allows you to visualize data using the charts out of the box without integrating with third-party charting libraries.

Check out the video that shows how to work with Flexmonster Pivot Charts:

Advanced customer support

Another important aspect of Flexmonster is Rockstar Support — a team of technical specialists who are always ready to answer your questions or help you resolve issues. You can also check out the collection of resolved support tickets to find a solution for your case.

Other benefits

In addition to everything listed, Flexmonster provides other benefits:

Where do I start with Flexmonster?

Flexmonster offers a 30-day free trial requiring no payment details, so you can test Flexmonster’s functionality and decide whether it fits your project. Moreover, you can get a special discount as a WebDataRocks user if you decide to buy the product license.

To smoothly move from WebDataRocks to Flexmonster, check out our migration guide.

If you want to see Flexmonster in action, watch this video for a detailed overview of Flexmonster Pivot and then try out the live demo:

Data type prefixes are added to field names in the first data record. Use the prefixes to set field data types.

Available prefixes

Name	Description
`-`	The field will be of the number type.
`+`	The field will be of the string type.
`d+`	The field will be a date divided into 3 subfields: Year, Month, Day.
`D+`	The field will be a date represented as a multilevel hierarchy with the following levels: Year > Month > Day.
`D4+`	The field will be a date represented as a multilevel hierarchy with the following levels: Year > Quarter > Month > Day.
`ds+`	The field will be a date displayed in the `"dd/MM/yyyy"` format.
`dt+`	The field will be a date displayed in the `"dd/MM/yyyy HH:mm:ss"` format.
`t+`	The field will be a time interval displayed in the `"HH:mm:ss"` format.
`m+`	The field will be of the month type. Natural sorting is applied to field members.
`w+`	The field will be of the weekday type. Natural sorting is applied to field members.

Examples

1) Here is a sample CSV data where the ds+ and w+ prefixes are added to the field names:

ds+Invoice Date, Quantity, Country, w+Week Day
2018-05-15, 3, France, Tuesday
2018-05-16, 4, Italy, Wednesday
2018-05-17, 2, Spain, Thursday
2018-05-12, 2, Japan, Saturday

After loading the CSV data and selecting fields in the Field List, you can see that the Invoice Date is displayed as a string in the "dd/MM/yyyy" format, and the Week Day is interpreted as a day of the week:

2) You can represent a date as a multilevel hierarchy using the D+ or the D4+ prefix.

Here is an example with the D+ prefix:

D+Invoice Date, -Quantity, -Price, +Country
2018-05-15, 3, 329, France
2018-05-16, 4, 139, Italy
2018-05-17, 2, 429, Spain
2018-05-12, 2, 559, Japan

See how the Invoice Date is displayed in the pivot table when the CSV file is loaded to WebDataRocks:

This demo is also available on our CodePen.

To create multilevel hierarchies from fields of other types, refer to the Creating multilevel hierarchies guide.

CSV format

WebDataRocks supports the following CSV format:

The first data record contains field names and optional data type prefixes.
Each data record is on a separate line.
Field names and values are separated by the same character: comma ,, semicolon ;, or a custom field separator.

Here is an example of a valid CSV file:

Invoice Date, Quantity, Country, Week Day
2018-05-15, 3, France, Tuesday
2018-05-16, 4, Italy, Wednesday
2018-05-17, 2, Spain, Thursday
2018-05-12, 2, Japan, Saturday

Input value formats

Number field format

Number values can contain digits, -, and + characters. Point . must be used as a decimal separator. Numbers in exponential notation are also supported. Examples of valid values: -20, 2.50, 1.0E+2.

String field format

String values can be enclosed in double quotation marks or specified without them. If a field value contains line breaks or a field separator, it must be enclosed in double quotation marks. If a field is quoted, it must be escaped with double quotation marks. Examples of valid values: Apple, "A-Z" section, "1, 2, 3", "The ""A, B, C"" magazine".

Date field format

Date values must be specified in the ISO 8601 format. Examples: "2018-01-10" (date), "2018-01-10T08:14:00" (date and time), "2018-01-10T06:14:00Z" (date and time in UTC).

Time field format

Time values must be specified as a number of seconds. The component displays values in the "HH:mm:ss" format. Examples of valid values: 5400 (displayed as "01:30:00" in the component).

To ensure the detection of time values, set the field data type prefix to +t. Otherwise, they will be processed as numbers.

Month field format

Month values must start with a capital letter. Full names and 3-letter abbreviations of months are supported. Examples of valid values: "October", "Dec", "May".

To ensure the detection of month values, set the field data type prefix to +m. Otherwise, they will be processed as strings.

Weekday field format

Weekday values must start with a capital letter. Full names and 3-letter abbreviations of the days of the week are supported. Examples of valid values: "Monday", "Sun", "Friday".

To ensure the detection of weekday values, set the field data type prefix to +w. Otherwise, they will be processed as strings.

Properties

Name	Type	Description
`type`	String	optional The field’s data type. Possible values: `"number"` `"string"` `"date"` `"date string"` `"year/month/day"` `"year/quarter/month/day"` `"datetime"` `"time"` `"month"` `"weekday"` `"level"` `"hidden"` Read more about available data types.
`caption`	String	optional The field’s caption.
`hierarchy`	String	optional The name of the hierarchy. Used for multilevel hierarchies. Set this property to make the field a level of the specified hierarchy. In this case, the `type` must be set to `"level"`.
`parent`	String	optional The caption of the parent hierarchy level. Used for multilevel hierarchies. In this case, the `type` must be set to `"level"`.
`level`	String	optional The caption of the hierarchy level. Used for multilevel hierarchies. In this case, the `type` must be set to `"level"`.

Examples

1) Setting the metadata object in a JSON array of objects:

[
  {
    "Product": {
      "type": "string"
    },
    "Price": {
      "type": "number"
    }
  },
  {
    "Product": "Apple",
    "Price": 2.50
  },
  {
    "Product": "Cherry",
    "Price": 5.25
  }
]

See the full example on CodePen.

2) Setting the metadata object in a JSON array of arrays:

[
  {
    "Product": {
      "type": "string"
    },
    "Price": {
      "type": "number"
    },
  },
  ["Apple", 2.50],
  ["Cherry", 5.25]
]

Try a live demo on CodePen.

Sample project

See also

React + ES6

React + TypeScript

See also

See also

Supported chart types

Step 1. Add WebDataRocks to your project

Step 2. Get a reference to the WebDataRocks instance

Step 3. Add Google Charts

Step 4. Show the data from the pivot table on the chart

Step 5. Run the project

Check out the full code

See also

Supported chart types

Step 1. Add WebDataRocks to your project

Step 2. Get a reference to the WebDataRocks instance

Step 3. Add Google Charts

Step 4. Show the data from the pivot table on the chart

Step 5. Run the project

Check out the full code

See also

Supported chart types

Step 1. Add WebDataRocks to your project

Step 2. Get a reference to the WebDataRocks instance

React + ES6

React + TypeScript

Step 3. Add Google Charts

Step 4. Show the data from the pivot table on the chart

React + ES6

React + TypeScript

React + ES6

React + TypeScript

Step 5. Run the project

Check out the full code

React + ES6

React + TypeScript

See also

No data size limit

More data source options

Built-in pivot charts

Advanced customer support

Other benefits

Where do I start with Flexmonster?

Available prefixes

Examples

See also

CSV format

Input value formats

Number field format

String field format

Date field format

Time field format

Month field format

Weekday field format

See also

Properties

Examples

See also