Expand and collapse

Use the expand and collapse operations to analyze the data on different levels of detail.

Example

Expand the Category hierarchy to display the members of the next (Business Type) hierarchy.

In a classic form:

Expand and collapse to the successive hierarchies (classic view)

In a compact form:

Expand and collapse to the successive hierarchies (compact view)

In this tutorial, you will learn how to integrate WebDataRocks with jQuery.

jQuery is a JavaScript library which purpose is to simplify using JavaScript on your website. It helps to handle HTML/DOM/CSS manipulation, HTML event methods, AJAX calls, and more.

Step 1. Create a new project

Step 1.1. Create a new folder for the project, e.g. my-jquery-project/.

Step 1.2. Create an index.html file inside my-jquery-project/ and include jQuery from the Google CDN to the <head> section:

<!DOCTYPE html>
<html>
<head>
    <title>My WebDataRocks & jQuery project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>

Step 2. Add WebDataRocks dependencies

Step 2.1. Create a <div> container for a pivot table component:

<!DOCTYPE html>
<html>
<head>
    <title>My WebDataRocks & jQuery project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="wdr-component">The pivot table control will appear here</div>
</body>
</html>

Step 2.2. Add the WebDataRocks scripts and styles to the <head> section:

<!DOCTYPE html>
<html>
<head>
    <title>My WebDataRocks & jQuery project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.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>
</head>
<body>
    <div id="wdr-component">The pivot table control will appear here</div>
</body>
</html>

Step 3. Initialize the pivot table component on the page

<!DOCTYPE html>
<html>
<head>
    <title>My WebDataRocks & jQuery project</title>
    <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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="wdr-component">The pivot table control will appear here</div>
    <script>
        var pivot = $("#wdr-component").webdatarocks({
            toolbar: true
       });
    </script>
</body>
</html>

Step 4. Load the report

To display the data on the grid, add a report attribute and specify a URL to the report (or define an inline report):

<!DOCTYPE html>
<html>
<head>
    <title>My WebDataRocks & jQuery project</title>
    <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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="wdr-component">The pivot table control will appear here</div>
    <script>
        var pivot = $("#wdr-component").webdatarocks({
            toolbar: true,
            report: "https://cdn.webdatarocks.com/reports/report.json"
       });
   </script>
</body>
</html>

Find out more in the CodePen demo.

Init jQuery call

An initial jQuery call for embedding of the component has the following structure:

$("#wdr-component").webdatarocks({
  container: String,
  toolbar: Boolean,
  report: ReportObject | String,
  width: Number,
  height: Number,
  customizeCell: Function,
  global: ReportObject,
  reportcomplete: Function | String
})

This jQuery call embeds the pivot table component into the HTML page and takes as a parameter the id attribute of a container element (i.e., #wdr-component in this example).

Use this method to add the component to the HTML page with all the necessary parameters for the initialization.

Parameters

The list of parameters is the same as for an Init API call.

You can set event handlers as the properties of the initial jQuery call. See the list of events here.

All these parameters are optional. You can run $("#wdr-component").webdatarocks() and the component with an empty grid, the default width and height, and without the Toolbar will be added to the page.

Returns

A reference to the object of the embedded pivot table. You can create multiple instances and work with them on the same web page.

Example

Get a reference to the instance of the component by using the jQuery selector:

var pivot = $("#wdr-component").data("webdatarocks");

WebDataRocks Pivot Table is compatible with modern technologies for web development. The whole process of integration is clear and smooth.

The pivot table component integrates well with React, Angular, Vue, and other popular frameworks.

Check out the following tutorials on integration with frameworks and libraries:

After formatting your CSV data and setting data types for fields, you can start connecting to the data.

Connect to CSV via UI

Step 1. Go to the Connect tab () on the Toolbar.

Step 2. Choose the CSV you want to connect to:

Local CSV. Use this option to load a file from your local file system.
Remote CSV. Use this option to load a remote file by its URL or data returned by a server-side script.

Here’s an example of connecting to a remote CSV file:

Connect to CSV programmatically

To load your remote CSV data (a remote CSV file or data returned by a server-side script), specify the URL in the dataSource.filename property:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  report: {
    dataSource: {
      filename: "URL-to-your-CSV-file"
    }
  }
});

Specify a custom field separator

By default, WebDataRocks supports a comma , or a semicolon ; as a field separator. If fields in your data are separated by another character, e.g., a colon :, you need to specify this character in the dataSource.fieldSeparator property. For example:

report: {
  dataSource: {
    filename: "URL-to-your-CSV-file",
    fieldSeparator: ":"
  }
 }
});

Set a CSV data source for all reports

To set a CSV data source for all reports, specify it in the Global Object:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  // Other parameters
  global: {
    dataSource: {
      type: "csv",
      filename: "URL-to-your-CSV-file"
    },
  },
  report: {
    // Your report
  }
});

See an example on CodePen.

Connect to JSON via UI

Step 1. Go to the Connect tab () on the Toolbar.

Step 2. Choose the JSON you want to connect to:

Local JSON. Use this option to load a file from your local file system.
Remote JSON. Use this option to load a remote JSON file by its URL or data returned by a server-side script.

Connect to JSON programmatically

There are two ways to connect to JSON programmatically:

1) If JSON data is already defined on the page (e.g., in the jsonData variable), specify it in the dataSource.data property:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  toolbar: true,
  report: {
    dataSource: {
      data: jsonData
    }
  }
});
 
const jsonData = [
  {
    "Product": "Apple",
    "Price": 2.50
  },
  {
    "Product": "Cherry",
    "Price": 5.25
  }
];

2) If your JSON data is in a file or is returned by a server-side script, specify the URL in the dataSource.filename property:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  toolbar: true,
  report: {
    dataSource: {
      filename: "URL-to-your-JSON-file"
    }
  }
});

Set a JSON data source for all reports

To set a JSON data source for all reports, specify it in the Global Object:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  // Other parameters
  global: {
    dataSource: {
      type: "json",
      filename: "URL-to-your-JSON-file"
    },
  },
  report: {
    // Your report
  }
});

See an example on CodePen.

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 {
  globalReportJson = {
    dataSource: {
      type: "json",
      filename: "URL-to-your-JSON-file"
    }
  };

  reportJson = {
    // Your report
  };
}

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

Supported chart types

WebDataRocks supports the following chart types of the Highcharts library:

Area range (demo)
Area-spline (demo)
Area spline range (demo)
Basic area (demo)
Basic bar (demo)
Basic column (demo)
Bubble chart (demo)
Column range (demo)
Error bar (demo)
Line chart (demo)
Funnel chart (demo)
Pie chart (demo)
Polygon (demo)
Pyramid (demo)
Scatter plot (demo)
Spline (demo)
Waterfall (demo)

Follow the steps below to start creating interactive data visualizations.

Step 1. Add WebDataRocks to your project

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

<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"/>
  </head>

  <body>
    <div id="pivotContainer"></div> 
    <script>
      const pivot = new WebDataRocks({
        container: "#pivotContainer",
        toolbar: true,
      });
    </script>
  </body>
</html>

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:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  toolbar: true,
  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",
        },
      ],
    },
  },
});

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

Step 2. Add Highcharts

Step 2.1. Include the scripts for Highcharts into your web page:

<script src="https://code.highcharts.com/4.2.2/highcharts.js"></script>
<script src="https://code.highcharts.com/4.2.2/highcharts-more.js"></script>

Step 2.2. Add a container where the chart should be rendered into your web page:

<div id="highchartsContainer"></div>

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

Step 3.1. Import the WebDataRocks Connector for Highcharts:

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

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

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

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  toolbar: true,
  report: report,
  reportcomplete: () => {
    pivot.off("reportcomplete");
    createChart();
  }
});

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

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

function createChart() {
  pivot.highcharts.getData({
    type: "spline"
  },
  // Function called when data for the chart is ready
  (data) => {
    Highcharts.chart("highchartsContainer", data);
  },
  // Function called on report changes (filtering, sorting, etc.)
  (data) => {
    Highcharts.chart("highchartsContainer", data);
  });
}

Step 4. See the result

Open your web page in the browser to see how the pivot table looks in combination with Highcharts.

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.

Check out the full code

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

<html>
  <head>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <script src="https://code.highcharts.com/4.2.2/highcharts.js"></script>
    <script src="https://code.highcharts.com/4.2.2/highcharts-more.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.highcharts.js"></script>
  </head>
  <body>
    <div id="pivotContainer"></div>
    <div id="highchartsContainer"></div>

    <script>
      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 pivot = new WebDataRocks({
        container: "#pivotContainer",
        toolbar: true,
        report: report,
        reportcomplete: () => {
          pivot.off("reportcomplete");
          createChart();
        }
      });

      function createChart() {
        pivot.highcharts.getData({
          type: "spline"
        },
        // Function called when data for the chart is ready
        (data) => {
          Highcharts.chart("highchartsContainer", data);
        },
        // Function called on report changes (filtering, sorting, etc.)
        (data) => {
          Highcharts.chart("highchartsContainer", data);
        });
      }
    </script>
  </body>
</html>

Live example

Interact with the following sample where WebDataRocks Pivot Table is integrated with Highcharts to see how they work together:

See the Pen <a href="https://codepen.io/webdatarocks/pen/ZMreyL/" target="_blank" rel="noopener">Integration with Highcharts</a> by WebDataRocks (<a href="https://codepen.io/webdatarocks" target="_blank" rel="noopener">@webdatarocks</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

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 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 web page with WebDatarocks should look similar to the following:

<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"/>
  </head>

  <body>
    <div id="pivotContainer"></div> 
    <script>
      const pivot = new WebDataRocks({
        container: "#pivotContainer",
        toolbar: true,
      });
    </script>
  </body>
</html>

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:

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",
        },
      ],
    },
  },
});

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

Step 2. Add Google Charts

Step 2.1. Include the script for Google Charts into your web page:

<script src="https://www.gstatic.com/charts/loader.js"></script>

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

let googleChartsLoaded = false;

Step 2.3. Load the Google Visualization API and the corechart package:

google.charts.load('current', {'packages':['corechart']});

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

google.charts.setOnLoadCallback(onGoogleChartsLoaded);

function onGoogleChartsLoaded() {
  googleChartsLoaded = true;
}

Step 2.5. Create a <div> container for Google Charts with an id (e.g., googlechartContainer):

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

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

Step 3.1. Include the WebDataRocks Connector for Google Charts:

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

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 3.2. 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:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  toolbar: true,
  report: {
    // ...
  },
  reportcomplete: onReportComplete,
});

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

// ...

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

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

Step 3.3. 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:

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

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

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

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

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

function drawColumnChart(chartConfig) {
  let data = google.visualization.arrayToDataTable(chartConfig.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 2.5 (in our case, it is googlechartContainer).

Step 4. See the result

Open your web page 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 web page should look as follows:

<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://www.gstatic.com/charts/loader.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
  </head>

  <body>
    <div id="pivotContainer"></div>
    <div id="googlechartContainer"></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: onReportComplete,
      });

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

      google.charts.load("current", { packages: ["corechart"] });
      google.charts.setOnLoadCallback(onGoogleChartsLoaded);

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

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

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

      function drawColumnChart(chartConfig) {
        let data = google.visualization.arrayToDataTable(chartConfig.data);
        const columnChartContainer = document.getElementById("googlechartContainer");
        const chart = new google.visualization.ColumnChart(columnChartContainer);
        chart.draw(data);
      }
    </script>
  </body>
</html>

Live example

Interact with the following sample where WebDataRocks Pivot Table is integrated with Google Charts to see how they work together:

See the Pen <a href="https://codepen.io/webdatarocks/pen/yQvBOV/" target="_blank" rel="noopener">Interactive dashboard with WebDataRocks & Google Charts</a> by WebDataRocks (<a href="https://codepen.io/webdatarocks" target="_blank" rel="noopener">@webdatarocks</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br>

How to remove tabs

Step 1. Assign a handler (e.g., customizeToolbar) to the beforetoolbarcreated event. The handler function has the toolbar as a parameter that contains information about the Toolbar.

Step 2. Inside the handler (e.g., customizeToolbar), retrieve all the tabs using the toolbar.getTabs() method. It returns an array of objects that describe tabs’ properties.

Step 3. To remove a tab, delete a corresponding object from the array of tabs.

Your code should look similar to the following example:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  beforetoolbarcreated: customizeToolbar,
  report: "https://cdn.webdatarocks.com/reports/report.json",
  toolbar: true
});
 
function customizeToolbar(toolbar) {
  // Get all tabs from the Toolbar
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    // Delete the Connect tab
    tabs = tabs.filter(tab => tab.id !== "wdr-tab-connect");
    return tabs;
  }
}

See the full code in our Codepen example.

How to add new tabs

Step 1. Assign a handler (e.g., customizeToolbar) to the beforetoolbarcreated event. The handler function has the toolbar as a parameter that contains information about the Toolbar.

Step 2. Inside the handler (e.g., customizeToolbar), retrieve all the tabs using the toolbar.getTabs() method. It returns an array of objects that describe tabs’ properties.

Step 3. Add a new tab to the array of tabs.

The example below implements the functionality that changes the theme of the component.

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  beforetoolbarcreated: customizeToolbar,
  report: "https://cdn.webdatarocks.com/reports/report.json",
  toolbar: true
});
 
function customizeToolbar(toolbar) {
  // Get all tabs from the Toolbar
  const tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    // There will be two new tabs at the beginning of the Toolbar 
    tabs.unshift({
      id: "wdr-tab-lightblue",
      title: "LightBlue",
      handler: newtabHandlerBlue,
      // You can replace icons with custom ones
      icon: this.icons.format
    }, {
      id: "wdr-tab-default",
      title: "Default",
      handler: newtabHandlerDefault,
      // You can replace icons with custom ones
      icon: this.icons.format
    });
    return tabs;
  }

  const newtabHandlerBlue = function() {
    setLightBlueTheme();
  };

  const newtabHandlerDefault = function() {
    setDefaultTheme();
  };
}

The full code with setLightBlueTheme() and setDefaultTheme() functions is available in our Codepen example.

Even more advanced customization

In this guide, we mentioned how to remove the Toolbar tabs and how to add a new one. For further customization, you can reorder the tabs, set the custom icons for the tabs, or implement new functionality. We recommend investigating the existing code to understand how the Toolbar works:

Open the source code of the Toolbar – webdatarocks.toolbar.js file.
Find a prototype of the toolbar.getTabs() method.
Investigate how this method works.

You can also change the appearance of the Toolbar by changing the component theme.

To export a pivot table

Go to the Export tab () on the Toolbar.
Choose the format and export the report to the local file system of your device.

To print a pivot table

Go to the Export tab () on the Toolbar.
Select Print.

If you want to pick up where you left while working with the previous report, you can load it into the pivot table:

Via the Toolbar
Programmatically

To load a local report

Go to the Open tab () on the Toolbar.
Select Local report.

To load a remote report

Go to the Open tab () on the Toolbar.
Select Remote report.
Enter the URL of the remote report.

Loading the report programmatically

Load your report while embedding WebDataRocks by specifying a path to your report file:

let pivot = new WebDataRocks({
  container: "#pivotContainer",
  toolbar: true,
  // Replace this URL with your report file
  report: "https://cdn.webdatarocks.com/reports/report.json"
});

Move up

Expand and collapse

Example

Step 1. Create a new project

Step 2. Add WebDataRocks dependencies

Step 3. Initialize the pivot table component on the page

Step 4. Load the report

Init jQuery call

Parameters

Returns

Example

Connect to CSV via UI

Connect to CSV programmatically

Specify a custom field separator

Set a CSV data source for all reports

See also

Connect to JSON via UI

Connect to JSON programmatically

Set a JSON data source for all reports

See also

Supported chart types

Step 1. Add WebDataRocks to your project

Step 2. Add Highcharts

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

Step 4. See the result

Check out the full code

Live example

See also

Supported chart types

Step 1. Add WebDataRocks to your project

Step 2. Add Google Charts

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

Step 4. See the result

Check out the full code

Live example

See also

How to remove tabs

How to add new tabs

Even more advanced customization

See also

To export a pivot table

To print a pivot table

Loading the report via the Toolbar

To load a local report

To load a remote report

Loading the report programmatically