Dashboards & Charts

Create as many dashboards as you need — sales, support, operations, engineering — and as many charts as you want in each of them.

There are two ways to create a chart:

• In the Dashboard, without code: pick a model, an aggregation (count, sum, average…), a field to group by or a date field, and optional filters.
• With code, as a custom chart: write a function in your Data API that returns the data. Use it when the data comes from several models, from a complex query or from an external API.

Chart types

Type	Shows
Single value	One number, such as the number of signups today.
Objective	One number compared to a target.
Pie	A repartition, such as orders by status.
Ranking	A top list, such as the best customers by revenue.
Line	An evolution over time.
Bar	An evolution over time or a comparison.

To add a chart, open a dashboard and click Add a chart, then choose a title, an optional subtitle and the type of chart.

Custom charts

Declare your custom charts in the charts array of your configuration:

charts: [
  {
    code: 'mrr',
    label: 'Monthly recurring revenue',
    handler: async (data, success, error) => {
      try {
        const mrr = await computeMrr();
        success({ data: mrr });
      }
      catch (e) {
        error({ message: 'Unable to compute the MRR' });
      }
    }
  }
]

Property	Description
code	A unique identifier for the chart.
label	The name of the chart, shown when you pick a data source in the Dashboard.
handler	The function returning the data. Call success() with the data, or error() if something went wrong.

Then, in the Dashboard, create a chart and choose your custom chart as its data source.

Data format of custom charts

The object passed to success() depends on the type of the chart.

Single value and Objective

{ data: 123 }

Pie and Ranking

{
  data: [
    { key: 'Paid', value: 1349 },
    { key: 'Pending', value: 18 },
    { key: 'Refunded', value: 2 }
  ]
}

Line and Bar

{
  config: {
    xaxis: [
      { dataKey: 'month' }
    ],
    yaxis: [
      { dataKey: 'signups', name: 'Signups' },
      { dataKey: 'churns', name: 'Churns', visible: false }
    ]
  },
  data: [
    { month: 'Jan', signups: 120, churns: 8 },
    { month: 'Feb', signups: 145, churns: 7 },
    { month: 'Mar', signups: 171, churns: 11 }
  ]
}

Each item of yaxis is a series. Set visible: false to hide a series by default.

See Code examples for complete custom charts with Sequelize and Mongoose.