Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
75 lines (62 sloc) 2.43 KB
title permalink category
Introduction
/frontend-introduction
Cube.js Frontend

You can send queries to Cube.js Backend using JSON Query Format via REST API.

Alongside with it, Cube.js comes with Javascript client and bindings for popular frameworks such as React and Vue.

The client itself doesn't provide any visualizations and is designed to work with existing chart libraries. It provides set of methods to access Cube.js API and to work with query result.

Installation

You can install Javascript client with NPM or Yarn

$ npm install --save @cubejs-client/core
# or with Yarn
$ yarn add @cubejs-client/core

Example Usage

First import cubejs from @cubejs-client/core and initiate client with your Cube.js API Token and API URL. The default API URL for Cube.js Backend in development mode is http://localhost:4000/cubejs-api/v1.

Then, use CubejsApi.load to load data from the backend. The load method accepts a query, which is plain Javascript object. Learn more about query format here.

Below example shows how to use Cube.js Javascript Client with Echarts charting library.

import cubejs from '@cubejs-client/core';
import echarts from 'echarts';

// initialize cubejs instance with API Token and API URL
const cubejsApi = cubejs(
  'YOUR-CUBEJS-API-TOKEN',
  { apiUrl: 'http://localhost:4000/cubejs-api/v1' },
);

// Load query for orders by created month in 2017 year
cubejsApi
  .load({
    measures: ['Orders.count'],
    timeDimensions: [
      {
        dimension: 'Orders.createdAt',
        dateRange: ['2017-01-01', '2017-12-31'],
        granularity: 'month'
      }
    ]
  })
  .then(resultSet => {
    // initialize echarts instance with prepared DOM
    var myChart = echarts.init(document.getElementById('chart'));
    // draw chart
    myChart.setOption({
      xAxis: {
        data: resultSet.chartPivot().map(i => i.x)
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: resultSet.chartPivot().map(i => i['Orders.count'])
        }
      ]
    });
  });
<iframe src="https://codesandbox.io/embed/131ymrj8vl?fontsize=14" title="Cube.js Vanilla Javascript Client" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
You can’t perform that action at this time.