Here's a short video guide on how to connect Bubble to Cube.
Click the "How to connect" link on the Overview page, navigate to the REST API tab. You will see your connection credentials, the REST API URL and the authorization token:
For a Cube instance publicly available at a specific
HOST, the REST API URL
HOST/cubejs-api/v1. Please refer to the
REST API page for details.
You will also need to generate a JSON Web Token that would be used to authenticate requests to Cube.
Please check the Security page to learn how to generate a token. We suggest generating a long-lived JWT that won't expire soon.
Navigate to the plugins. Select and install the API connector plugin.
Click "Add another API".
Next, set the "Authentication" as "Private key in header", and copy and paste
Cube's Authorization token. Additionally, make sure to add a shared header for
all calls by setting
Click "Add another call".
Copy and paste the Cube REST API, including the
/load path, in the API field.
Make sure to select "Use as: Action", and use the
JSON "data type" and "body
Get your Cube query in the JSON query format ready. You can copy it from Cube’s Playground or compose manually.
Paste the JSON query in the Body. Make sure to add a
query parameter for
your JSON query.
Next, hit "Initialize / Reinitialize call".
First, add a "Page is loaded" event. Add an action that uses the API connector
plugin. Next, add another action to set the state of an element. Select the
index element, and create a new custom state. In this example I named the custom
OrdersByMonth and selected the
data field of the API response. Make
sure to toggle the "This state is a list" checkbox as well. While setting the
state's value you will need to select "Result of step 1" and the
Bubble has an amazing feature where you can drag and drop UI components into the design dashboard.
Once you added a chart, you configure the data points. More specifically, the
series categories and series data. For the series categories and series data you
need to select the
OrdersByMonth state followed by the data point
you want to use in order to populate the chart.
Once you open the "Preview" you'll see your nicely rendered charts.