Card

Card is the building block of a dashboard and the container of the data visualization.

Add / remove card

To add a card, click on "edit" from the top nav bar. After that, the dashboard enters "edit" mode, in which you can add a card, change dashboard layout, or change dashboard settings.

Click on "+" button and select the chart type you would like to use.

To remove a card, click on "..." at the top right corner of the card, and select "remove"

Push data to a card

A card receives data from Push API, which is a HTTP post endpoint.

By clicking on "start pushing" (or ... menu -> push API), you will get an API endpoint to which you can send the data payload. A typical query looks like this:

curl \
--request POST 'http://app.pushboard.io/api/carddata/g540urp8r1/' \
--header 'Content-Type: application/json' \
--data-raw \
  '{ "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
     "y1": [13, 4, 9, 13, 6, 9, 7, 15, 9, 10, 11]
  }'

In this example,

g540urp8r1 is the unique ID of a card.

The dataset is wrapped in a json payload. To make a line / bar chart, A few things are required here:

A key named x, followed by an array of numbers or strings.
Keys named y1, y2 ..., each followed by an array of numbers. The length of the array should match the length of x array.

Optionally, you can put a label on each key. Instead of showing x, y1, y2, it shows the label in the result.

To add a label, simple concatenate the label with two underscores: x__label

curl \
--request POST 'http://app.pushboard.io/api/carddata/g540urp8r1/' \
--header 'Content-Type: application/json' \
--data-raw \
  '{ "x__index": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
     "y1__points": [13, 4, 9, 13, 6, 9, 7, 15, 9, 10, 11]
  }'

Change card style

Each card has a few built-in styles. To change its style, click on "..." -> edit, then click on the < and > to switch between different style.

Quick Start Dashboard