Chart

The Chart Widget category comprises the following widgets:

• Bar chart
  • Bar chart with legend
  • Stacked bar chart
  • Horizontal bar chart
  • Multiple series chart
• Gantt chart
• Heat grid
• Line Chart
• Pie chart
• Scatter plot
• Tree map

This page contains information on the properties available to Chart widgets, as well as examples of widgets and common CSS.

Chart Widget Properties

The following tables offer usage details about the properties available to Chart widgets.

IAxis

IAreaSelection

IDatasetModel

ILabelsModel

IRangeDatasetModel

IXYDatasetModel

IHover

IDataSelection

Actions

Chart Widget Examples

Defaults

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "line",
      "xValues": [],
      "yValues": []
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "linear"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "scale": "linear",
      "position": "left"
    }
  ]
}

Bar Chart with Legend

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "bar",
      "xValues": "{{query1.state}}",
      "yValues": "{{query1.avgIncome}}"
    }
  ],
  "labelsEnabled": false,
  "legendPosition": "top",
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "label": "State",
      "scale": "category"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "formatter": "$0,0.00",
      "position": "left",
      "label": "Average Income ($)",
      "scale": "linear",
      "scaleMax": 1000000,
      "scaleMin": 10000
    }
  ]
}

Stacked Bar Chart

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "stackedBar",
      "seriesValues": "{{query1.gender}}",
      "xValues": "{{query1.state}}",
      "yValues": "{{query1.avgIncome}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "label": "State",
      "scale": "category"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "formatter": "$0,0.00",
      "position": "left",
      "label": "Average Income ($)",
      "scale": "linear",
      "scaleMax": 1000000,
      "scaleMin": 10000
    }
  ]
}

Horizontal Bar Chart

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "horizontalBar",
      "xValues": "{{query1.avgIncome}}",
      "yValues": "{{query1.state}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "label": "Average Income ($)",
      "scale": "linear",
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "label": "State",
      "scale": "category"
    }
  ]
}

Multiple Series Chart

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "line",
      "seriesValues": "{{query1.series}}",
      "xValues": "{{query1.key}}",
      "yValues": "{{query1.doc_count}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "linear"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "scale": "linear",
      "position": "left"
    }
  ]
}

Scatter Plot

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "radiusValues": "{{query1.pop}}",
      "renderer": "scatter",
      "xValues": "{{query1.gdp}}",
      "yValues": "{{query1.cpi}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "linear"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "scale": "linear",
      "position": "left"
    }
  ]
}

Tutorial: Add a scatter plot widget

Say that you want to create a scatter plot widget to display route metrics that show distance and time values. Select the Widget button in the upper left corner, then choose Chart > Scatter Plot to add a Scatter Plot widget to your application. It will be pre-populated with some example data that you can clear from the right editor panel before continuing.

First, rename the Chart widget to something easy to identify, like w_routeMetrics.

We want to plot the average distance of the routes along the x-axis. This means that you must set X Values to "{{q_routeMetrics.avg_distance}}".

Next, plot the routes duration along the y-axis. Set Y Values to "{{q_routeMetrics.avg_time}}" in the Data tab.

To make the scatter plot easier to read, add labels to your axes. Select the Axes tab and change the Name of the first X Axes object from x1 to Distance, and add a label such as Distance (miles) to describe the plotted information. You can also turn on gridlines to help identify where each point lies on the chart.

Name your Y Axis Duration, and configure it as follows:

Finally, give your points different sizes. We want the points to vary by how busy the route is. To do this, switch back to the Data tab and set Radius to "{{q_routeMetrics.num_flights}}".

Exame the chart again. Something seems wrong, since the chart is now filled. This is because the Radius value is drawing 1:1 between the value provided and the number of pixels for the radius, and some of our routes have over 150 flights. You must scale your radius values. You can do this by calculating a "display" value in you query. You could hardcode this, but using a Variable allows you easy to make later changes without editing the query.

Select the Variables tab across the top bar to open the Variables window. Create a new variable in the bottom right. Name the new variable v_routeCountDisplayScale and set a value of 100.

Return to the q_routeMetrics widget and add a new column:

COUNT(flight_id)/{{v_routeCountDisplayScale}} as num_flights_disp

While here, generate a display label for each row:

CONCAT(origin, ' -> ', dest) as route_name

Your entire query now looks like:

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
SELECT
    origin,
    dest,
    AVG(distance) as avg_distance,
    AVG(actual_elapsed_time) as avg_time,
    COUNT(flight_id) as num_flights,
    COUNT(flight_id)/{{v_routeCountDisplayScale}} as num_flights_disp,
    CONCAT(origin, ' -> ', dest) as route_name
FROM "foundry_sync"."{{v_flightTable}}"
GROUP BY
    origin,
    dest
ORDER BY
    COUNT(flight_id) DESC
LIMIT 50

Return to the w_routeMetrics widget and adjust the Radius configuration to reference the num_flights_disp column instead of num_flights.

To finalize the chart, add the title Route Metrics to the Title input at the top of the w_routeMetrics configuration panel.

You should end with an application that looks like the following:

Line Chart with X and Y Range

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "line",
      "xValues": [1,2,3,4,5,6,7,8,9],
      "yValues": [3,4,1,4,5,4,2,4,1],
      "seriesValues": null,
      "xAxisName": "x1",
      "yAxisName": "y1"
    },
    {
      "endValues": [3],
      "name": "dataset2",
      "renderer": "yRange",
      "startValues": [2]
    },
    {
      "endValues": [3.5,8],
      "name": "dataset3",
      "renderer": "xRange",
      "startValues": [2.5,6],
      "seriesValues": ["Range A","Range B"]
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": true,
      "name": "x1",
      "position": "bottom",
      "scale": "linear",
      "label": "",
      "formatter": "\"0\""
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "scale": "linear",
      "formatter": "\"0\""
    }
  ]
}

---

Heat Grid

The following tables offer usage details about the properties available to Heat Grid chart widgets. Several examples follow the tables.

Properties

IAxis

IHeatGridModel

IHeatGridSelection

Actions

Defaults

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    "cellValues": [],
    "colorScale": ["#B9D7EA", "#1F6B9A"],
    "labelsEnabled": false,
    "xAxis": {
        "gridlinesEnabled": false,
        "name": "x1",
        "position": "bottom",
        "scale": "category",
        "visible": true
    },
    "xValues": [],
    "yAxis": {
        "gridlinesEnabled": false,
        "name": "y1",
        "position": "bottom",
        "scale": "category",
        "visible": true
    },
    "yValues": []
}

---

Pie Chart

The following tables offer usage details about the properties available to Pie Chart widgets. Several examples follow the tables.

Properties

IPieHover

IPieSelection

Actions

Examples

Pie Plot

Copied!
1
2
3
4
5
6
7
8
{
  "keys": "{{query1.teamName}}",
  "labelsEnabled": false,
  "legendPosition": "right",
  "selectionEnabled": false,
  "tooltipsEnabled": false,
  "values": "{{query1.headCount}}"
}

Doughnut Plot

Copied!
1
2
3
4
5
6
7
8
9
{
  "innerPadding": 0.6,
  "keys": "{{query1.teamName}}",
  "labelsEnabled": false,
  "legendPosition": "right",
  "selectionEnabled": false,
  "tooltipsEnabled": false,
  "values": "{{query1.headCount}}"
}

Defaults

Copied!
1
2
3
4
5
6
7
8
{
  "keys": [],
  "labelsEnabled": false,
  "legendPosition": "right",
  "selectionEnabled": false,
  "tooltipsEnabled": false,
  "values": []
}

---

Tree map

The tree map widget provides a flexible way to visualize hierarchical data in a set of nested rectangles. It is useful for spotting patterns otherwise hard to uncover in other visualizations.

A tree map is used to visualize an absolute quantity (size) for a given entity (label), which may be part of some (optional) category with some (optional) relative quantity (density). Each cell’s rectangle has: an area proportional to the size; a color defined by the density and category; and a name given by label.

Some examples of datasets which could be visualized with this chart:

• Stocks (label) part of an industry (category) that have some share of the market (size) and have had some percentage price change (density)

• Factory locations (label) by region (category) that produce some quantity of goods (size) with a false positive ratio (density)

• Nodes of a cluster (label) with storage space (size) and some percentage storage space utilization (density)

• Population sizes (size) of countries (label) belonging to some world region (category)

Data Configuration

• label (optional): the name displayed on each cell
• size: determines the size of the cell rectangle
• density (optional): determines the shading of the cell’s color
• category (optional): determines the grouping of cells, which decides the cell’s color

In the default example, the cell rectangles corresponds to the cell size. There are two categories, I and II. Notice that H has the largest size (45), and is therefore the biggest rectangle. H also has the smallest density (3), so it is the darkest color (the gradient can be flipped with a checkbox under color panels).

Color Configuration

There are different coloring configurations available based on if categories and/or densities are enabled.

Category enabled and density enabled

When both categories and densities are enabled, colors of cells are defined according to gradients in the Hue-Saturation-Value (HSV) ↗ color space. For each category a hue is defined. A list of hues (number between 0 and 360) or a dictionary mapping category names to hues can be provided. All categories' gradients then uses the same defined starting saturation and value. The gradient is defined using gradient type (brighten, darken, saturate, desaturate) and the strength of the gradient.

Only category enabled

With only categories enabled, you can specify a list of colors or a dictionary mapping category name to color for the categories.

The colors can be hex (#FF0000, #00FF00) or canonical (e.g. red, green).

Only density Enabled

With only densities enabled, you can define a list of colors which will be applied as range with gradient. You must provide two colors at a minimum to define the color gradient, though more can be provided to more finely define this color gradient.

The colors can be hex (#FF0000, #00FF00) or canonical (e.g. red, green).

Category disabled and density disabled

With both categories and densities disabled, you can define a list of colors which is the color palette. It must be a list of colors of same length as number of data points.

The colors can be hex (#FF0000, #00FF00) or canonical (e.g. red, green).

Miscellaneous Configuration

Optional miscellaneous configurations are possible:

• Cell styling

  • Border width of each cell
  • Border color
  • Labels for the cell
  • Tooltips for the cell

• Legends

  • Legend position (top, bottom, left, right)
  • Legend label (for title of the legend)

• Tiling strategy for how the cells are generated. Tiling strategies are defined by d3 ↗: Binary, Dice, Resquarify, Slice, Slice Dice, Squarify.

• Selection (multiple or single)

Examples

In these series of examples, an investor wants to visualize the holdings of their portfolio. The data has several dimensions: the name of the stock (label), the amount invested in each stock (size), the percentage change in the stock price (density), and the industry of the stock (category).

We load this data into the Tree Map chart widget:

Copied!
1
2
3
4
5
6
7
labels: ["MSFT", "AAPL", "NFLX", "AMZN", "GS", "MS", "BLK", "JPM", "XOM", "BP"]

sizes: [10, 20, 5, 25, 8, 15, 18, 30, 10, 40]

densities: [8, 15, -10, 10, 3, -5, -3, 4, 20, 8]

categories: ["Tech", "Tech", "Tech", "Tech", "Finance", "Finance", "Finance", "Finance", "Energy", "Energy"]

Example 1 with category and density enabled

Example 2 with only density enabled

In this configuration the portfolio analyst can look at which equities have had the largest changes in price.

Example 3 with only category enabled

In this configuration the portfolio analyst can look at which industry is most represented with in the portfolio and which equities represent the largest holdings within those industries.

It is worth noting that you can use the configuration to offer a more granular representation of the data. For example, one could visualize the size of equities within the portfolio and color them according to Red, Amber, Green risk ratings.

Example 4 with category and density diabled

In this configuration, the portfolio analyst would simply see how large a share of the portfolio each equity represents. This is by default effectively the same as a pie chart.

It is worth noting that if a custom color strategy is required (beyond what is by default configurable), this configuration could be used by providing the color for each square individually.

---

Common CSS

Line charts

Series colors:

Copied!
1
.line-plot .render-area g:nth-of-type(1) path {stroke: #6a2d9f;}.line-plot .render-area g:nth-of-type(2) path {stroke:#c993f1;}

Legend colors:

Copied!
1
.legend .legend-row .legend-entry:nth-of-type(1) path {fill: #6a2d9f;}

Alternatively,

Copied!
1
.legend .legend-row .legend-entry:nth-of-type(2) path,.legend .content .legend-row:nth-of-type(2) path {fill: #c993f1;}

Bar charts

The following applies to stacked, clustered, and regular bar charts.

Bar colors:

Copied!
1
.bar-plot .render-area g:nth-of-type(1) rect,.bar-plot:nth-of-type(1) .render-area rect {fill: #6a2d9f;}.bar-plot .render-area g:nth-of-type(2) rect,.bar-plot:nth-of-type(2) .render-area rect {fill: #c993f1;}

Legend colors:

Copied!
1
2
3
4
5
6
7
8
.legend .legend-row .legend-entry:nth-of-type(1) path {
  fill: #6a2d9f;
}

.legend .legend-row .legend-entry:nth-of-type(2) path,
.legend .content .legend-row:nth-of-type(2) path {
  fill: #c993f1;
}

Area charts

The following applies to stacked and regular area charts.

Area colors:

Copied!
1
.area-plot .render-area  g:nth-of-type(1) path,.area-plot:nth-of-type(1) path {fill: #009900;}.area-plot .render-area  g:nth-of-type(2) path,.area-plot:nth-of-type(2) path {fill: #99CC00;}

Line colors:

Copied!
1
.area-plot:nth-of-type(1) .area,.line-plot .render-area g:nth-of-type(1) path {stroke: #009900;}.area-plot:nth-of-type(1) .area,.line-plot .render-area g:nth-of-type(2) path {stroke: #99CC00;}

Legend colors:

Copied!
1
.legend .legend-row .legend-entry:nth-of-type(1) path {fill: #009900;}

Alternatively:

Copied!
1
.legend .legend-row .legend-entry:nth-of-type(2) path,.legend .content .legend-row:nth-of-type(2) path {fill: #99CC00;}

Pie charts

A slice can be selected by index or CSS classname (sanitized label name is used as CSS classname)

Styling by Index:

Pie slice colors:

Copied!
1
.pie-plot .render-area .arc:nth-of-type(1) {fill: #009900;}

Alternatively:

Copied!
1
.arc:nth-of-type(2) { fill: #99CC00; }

Legend colors:

Copied!
1
2
sl-pie .legend .legend-row:nth-of-type(1) path { fill: #009900; }
sl-pie .legend .legend-row:nth-of-type(2) path { fill: #99CC00; }

Styling by Name:

Pie slice colors:

Copied!
1
.pie-plot .render-area .arc._A {fill: #009900;}

Alternatively:

Copied!
1
.arc._B { fill: #99CC00; }

Legend colors:

Copied!
1
2
sl-pie .legend .legend-row ._A path { fill: #009900; }
sl-pie .legend .legend-row ._B path { fill: #99CC00; }