Vega Chart

This page describes how to set up and configure the Vega Chart component

This component renders a chart using Vega Chart library. Demonstration of capabilities of the library can be found in theVega Example Gallery.

 

Screenshot

Set up a Vega Chart

To set up a Vega Chart component, click-and-drag the component into the workspace and configure the following:

  1. Set the data source.

  2. Specify the JSON for the Vega Config.

Refer to Vega Chart properties described in the next section for details on additional properties.

Vega Chart properties

The following sections provides details on how to configure the properties of the Vega Chart component.

Basics

Open the Basics properties on the right and configure the properties described in the following table.

Screenshot

Field

Description

Name

Enter a name for the component.

Data Source

A query or analytic. When set, values of the first data item in Vega Config are overwritten.

Vega Config

Specification in JSON format of multiple aspects of the chart:

  • data handling and transformations

  • visual representation

  • behavior

Screenshot

Documentation about available options can be found on Vega Website.

Tip

Chart automatically fit available space if neither width nor height is specified.

Data Source override

External resource in Vega configuration can referenced as shown in code below.

JSON

Copy 
{
    "data": [{
        "name": "vectors",
        "url": "data/windvectors.csv",
        "format": {"type": "csv", "parse": "auto"}      
    }],
    .. 

Setting Data Sourcemodifies the configuration above with actual values:

JSON

Copy 
{
    "data": [{
        "name": "vectors",
        "values": [
            {
                longitude:7.5,
                latitude:4.3,
                ..
                speed:3.12
            },
            ..
        ]
    }],
    ..    

Notice that the url and format properties are replaced with values.
Render Type

Controls whether the chart is rendered as <canvas>(faster) or <svg>.

Style, Format, Margins

Refer to Style for common settings

Further Reading