Block: Chart

Overview

A Chart block is used for configuring a chart that can visualize data.

The data for the chart is typically generated by a Grasshopper model. Such a model needs to output JSON data structured as shown in the example below.

The only type of chart currently available is the BarChart. This displays chart consisting of a set of vertical columns with different heights.

Each column in the bar chart has a tag and a value. The tag is the name of the column, and is displayed along the horizontal axis. The value is the height of the column. The vertical axis displays a numeric scale for the heights of the columns.

The domain of the chart defines the minimum and maximum values scale of the axes. By default, the domain for the vertical axis is generated automatically from the data. Custom domains can also be defined as part of the chart data.

The columns can optionally be grouped by assigning them the same tag. Grouped columns will only have a single tag on the horizontal axis.

The columns can optionally be assigned to different data series. Columns in the same data series represent related values and can be assigned the same
fill colour.

Example 1

In the examples below, a simple bar chart is configured with two columns.

Below is an example of the JSON column data for the chart.

[
  {
    "id": 0,
    "tag": "Wall area",
    "value": 123.4
  },
  {
    "id": 1,
    "tag": "Window area",
    "value": 12.3
  }
]

Below is the data for the domain for the vertical axis of the chart (from a minimum value of 0 to a maximum value of 450):

[0, 450]

Below is an example configuration.

kind: Solution
version: v0
router:
  kind: Router
  routes:
    - frame: home-frame
frames:
  home-frame:
    kind: Frame
    contents:
      my-model:
        kind: Model
        modelFile: chart-data.gh
      my-chart:
        kind: Chart
        settings:
          kind: BarChart
          mode: Comparative
          xAxisLabel: X Axis Label
          yAxisLabel: Y Axis Label
        subscribe:
          - kind: Model
            frame: home-frame
            source: my-model
            action: SetChartProps
            chartData: chart-data
            chartDomains:
              chart-domain: value

Example 2

A more advanced case is a bar chart with series. In the examples below, the JSON data is shown for bar chart with series.

There are two buildings (“Building 1” and “Building 2”), each with two data values (“Wall area” and
“Window area”). The data is represented in a bar chart, consisting of four columns. The four columns are structured into two groups, with the tags “Building 1” and “Building 2”. Each column is also assigned to a series, either “Wall area” or “Window area”. Each series is then assigned a distinct colour.

Below is an example of the JSON bar data for the chart.

[
  {
    "id": 0,
    "tag": "Building 1",
    "value": 123.4,
    "series": "Wall area"
  },
  {
    "id": 1,
    "tag": "Building 1",
    "value": 12.3,
    "series": "Window area"
  },
  {
    "id": 2,
    "tag": "Building 2",
    "value": 432.1,
    "series": "Wall area"
  },
  {
    "id": 3,
    "tag": "Building 2",
    "value": 32.1,
    "series": "Window area"
  }
]

Below is the JSON data colour data for the chart:

{
  "Wall area": "rgb(100, 150, 200)",
  "Window area": "rgb(200, 150, 100)"
}

Note that colours can be specified as colour names (e.g. “red”), as RGB strings (e.g. “rgb(255,0,0)”) and as hexadecimal strings (e.g. “#FF0000”).

Below is the data for the domain for the vertical axis of the chart (from a minimum value of 0 to a maximum value of 450):

[0, 450]

ChartConfig

An object for configuring a chart to be displayed in the user interface.

ChartSettings

An object for configuring the settings for a bar chart.

ChartSubscription

An object for configuring a subscription from a Chart block to a Model block.