Integration with Highcharts

This detailed tutorial will walk you through the integration of WebDataRocks with Highcharts.

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 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: "Business Type",
        },
        {
          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 Highcharts

Step 3.1. Download the Highcharts and Highcharts Angular wrapper npm packages:

npm install highcharts highcharts-angular

Step 3.2. Import the HighchartsChartModule:

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

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

Step 3.3. Import Highchartst:

import * as Highcharts from "highcharts";

Step 3.4. Add Highcharts in the .html file of your component using the highcharts-chart tag:

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

Step 3.5. Specify the following attributes and variables to configure Highcharts:

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  [oneToOne]="true"
  style="display: block;">
</highcharts-chart>

Highcharts = Highcharts;
chartOptions = {};

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

Step 4.1. Import the WebDataRocks Connector for Highcharts:

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

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

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

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

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

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

createChart() {
  this.pivotRef.webDataRocks.highcharts?.getData(
    {
      type: "spline"
    },
    // Function called when data for the chart is ready
    (data) => {
      this.chartOptions = data;
    },
    // Function called on report changes (filtering, sorting, etc.) 
    (data) => {
      this.chartOptions = data;
    }
  );
}

Step 5. Run the project

Run your project with the following command:

ng serve --open

Open http://localhost:4200/ 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 component should look as follows:

import { Component, ViewChild } from "@angular/core";
import { WebdatarocksPivotModule, WebdatarocksComponent } from "@webdatarocks/ngx-webdatarocks";
import { HighchartsChartModule } from "highcharts-angular";
import * as Highcharts from "highcharts";
import "@webdatarocks/webdatarocks/webdatarocks.highcharts.js";

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

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

  Highcharts = Highcharts;
  chartOptions = {};

  onReportComplete() {
    this.pivotRef.webDataRocks.off("reportcomplete");
    this.createChart();
  }

  createChart() {
    this.pivotRef.webDataRocks.highcharts?.getData(
      {
        type: "spline"
      },
      // Function called when data for the chart is ready
      (data) => {
        this.chartOptions = data;
      },
      // Function called on report changes (filtering, sorting, etc.) 
      (data) => {
        this.chartOptions = data;
      }
    );
  }
}

<app-wbr-pivot #pivot
 [toolbar]="true"
 [report]="report"
 (reportcomplete)="onReportComplete()">
</app-wbr-pivot>
<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  [oneToOne]="true"
  style="display: block;">
</highcharts-chart>

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>

Prerequisites

Step 1. Create a project (optional)

If you don’t have an Angular application yet, create one by running the following commands in the console:

ng new PROJECT-NAME --ssr=false
cd PROJECT-NAME

Step 2. Get WebDataRocks

Install the WebDataRocks Angular wrapper from npm:

npm install @webdatarocks/ngx-webdatarocks

This wrapper is Ivy-compatible and works only for Angular 14 and later. To integrate WebDataRocks with Angular 5 through 15, install the @webdatarocks/ng-webdatarocks wrapper.

Step 3. Include WebDataRocks

Step 3.1. Import the WebDataRocksPivotModule into the component where you need the pivot table (e.g., src/app/app.component.ts):

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

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

If you are using NgModules, import the WebdatarocksPivotModule into your NgModule (e.g., src/app/app.module.ts):

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    WebdatarocksPivotModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3.2. Add WebDataRocks styles to the src/styles.css file:

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

Step 3.3. Open src/app/app.component.html and add WebDataRocks there using the app-wbr-pivot tag:

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

Step 4. See the result

Run your application:

ng serve --open

Open http://localhost:4200/ in the browser — WebDataRocks is embedded into your Angular project.

You can shut down the app with Ctrl + C.

Integration with Highcharts

Supported chart types

Step 1. Add WebDataRocks to your project

Step 2. Get a reference to the WebDataRocks instance

Step 3. Add Highcharts

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

Step 5. Run the project

Check out the full code

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

Prerequisites

Step 1. Create a project (optional)

Step 2. Get WebDataRocks

Step 3. Include WebDataRocks

Step 4. See the result

See also