Configuring advanced chart gadget (beta)

Owned by Piotr Bojko
Last updated: Oct 21, 2019
3 min read

For using advanced chart gadget choose it from a list.

And then fill the configuration for the new gadget on your dashboard.

  1. View - choose a view from which data for a chart will be pulled.
  2. Configuration - JSON like configuration for data series, paddings, collor, chart type and more.
  3. Refresh interval - choose how often your gadget should be refreshed with new data.

See example configuration:

And it will produce following chart:

Chart produced by example configuration

Configuration

Smart QL app uses Taucharts library for gadgets. In advanced gadget you can use almost any configuration item straight from Tauchart docs, except:

  • Inline JS functions and Javascript at all - this is due to security concerns.
  • Plugins - Smart Ql enforces slightly different semantics.

Our docs describe similar topics but emphasize use only in our app.

Configuration in a gadget has a form of a JSON formatted text and it can be fairly complex. 

Simple configuration example
{
  "type": "scatterplot",
  "x": "PROJECT",
  "y": "ISSUES",
  "plugins": [
    {
      "name": "tooltip"
    },
    {
      "name": "legend"
    },
    {
      "name": "export-to"
    }
  ],
  "guide": {
    "x": {
      "label": {
        "text": "custom label"
      }
    }
  }
}

Obligatory configuration

There are only 3 obligatory elements to fill in a configuration: x, y, and type.

ElementNotes
x

One of the dimensions of a chart. You can fill it only with a name of a column from your view. Example:

"x": "PROJECT"
yOne of the dimensions of a chart.
type

Type of a chart, possible values: scatterplot, line, bar, horizontalBar, stacked-bar, horizontal-stacked-bar, stacked-area.

Additional dimensions 

Though charts are rather 2D artifacts - more dimensions can be coded into a chart by using a size of a stroke and a color. 

ElementNotes
sizeOne of the dimensions of a chart. The size encodes visually:
  • width of bar for a (stacked) bar chart
  • diameter of point for a scatter chart
  • variable line width for a line chart
  • diameter of anchor point for an area chart.

You can use only a column dimensions of type measure in size - see more info on dimensions.

colorOne of the dimensions of a chart.