Introduction for Angular Developers

Cube.js is an open-source analytical API platform, and it enables you to build internal business intelligence tools or add customer‑facing analytics to existing applications. Cube.js is visualization-agnostic, so you can build any user interface for your application.

You can directly query Cube.js Backend using JSON Query Format via HTTP API or WebSockets and visualize analytical data with tools of your choice. However, it's much easier to use Cube.js JavaScript Client and bindings for popular frameworks such as React, Angular, and Vue.

The client has methods to communicate with Cube.js API Gateway, retrieve, and process data. It is designed to work with existing charting libraries such as Chart.js, D3.js, and more.

The client provides methods to solve common tasks:

Abstract from the transport and query data. You can fetch data from Cube.js Backend or subscribe to real-time updates regardless of the protocol, be it HTTP or WebSockets.

Transform data for visualization. You can pivot the result set to display as a chart or as a table, split into series or table columns.

Simplify work with complex query types. You can build Drill Down queries and decompose the results of compareDateRange or Data Blending queries.

Learn more in the documentation for the @cubejs-client/core package.

The package provides convenient tools to work with Cube.js in Angular:

Modules. Inject CubejsClientModule and CubejsClient into your components and services to get access to @cubejs-client/core API.

Subjects. Use RxJS Subject and query to watch changes.

Here are the typical steps to query and visualize analytical data in Angular:

  • Import @cubejs-client/core and @cubejs-client/ngx packages. These packages provide all the necessary methods and convenient Angular tools.
  • Create an instance of Cube.js JavaScript Client. The client is initialized with Cube.js API URL. In development mode, the default URL is http://localhost:4000/cubejs-api/v1. The client is also initialized with an API token, but it takes effect only in production.
  • Query data from Cube.js Backend and Transform data for visualization. Use CubejsClient to load data. The client accepts a query, which is a plain JavaScript object. See Query Format for details.
  • Visualize the data. Use tools of your choice to draw charts and create visualizations.

See an example of using Cube.js with Angular and Chart.js library. Note that you can always use a different charting library that suits your needs:

You can install Cube.js JavaScript Client and the Angular package with npm or Yarn:

# npm
$ npm install --save @cubejs-client/core @cubejs-client/ngx

# Yarn
$ yarn add @cubejs-client/core @cubejs-client/ngx

Now you can build your application from scratch or generate the code with Cube.js Playground. You can also explore example applications built with Cube.js.

Did you find this page useful?