Widget Editor

You can edit the widgets in the Widget Editor by clicking the Configure widget (pencil) icon in a widget. You can then customize it either in the Editor or by editing the JSON code.

In the Editor, you can easily change the name of your widget and select the source of the data you want to display in your Visualization view.

As you modify a widget in the Widget Editor, a preview is also displayed showing you your changes. You can then choose to save your changes by clicking OK, which closes the Widget Editor, or you can select Cancel to abandon your changes.

The JSON editor gives you more advanced editing possibilities. For more information about the JSON widget syntax, see the following section: Visualization widgets syntax.

You can download your Visualization view as a JSON file, containing the definitions and the data, making it easier for you to share your findings with your collaborators.

Visualization pages

You can create different pages for different scenarios or combine scenarios on the same page.

You can add pages by clicking the plus sign. You can then customize what is displayed on each page. You can also add pages in the Visualization Editor.

To edit a page, click the Edit (pencil) icon. In the Visualization Editor you can edit the page name, reorder, and add pages. You can also edit the page name by double-clicking the tab on the page.

To delete a page, click the delete button on the page tab or in the Visualization Editor.

Clicking OK in the Visualization Editor saves your updates and closes the editor. Or you can select Cancel to abandon your changes.

Table search and filtering

You can filter tables in the Prepare data, Explore solution and Visualization views, by clicking the search icon and entering a value to search on. You can also specify a column name, colon, and a value. For example, if you enter food:hot in the diet_food_nutrients table search field, the table is filtered to display only the rows that contain the food "hot". In this example, you obtain just one row that contains the food Hotdog. You can also enter the prefix of a column name. For example, entering fo:hot obtains the same result as food:hot. The column name is optional, so you can also enter hot in this case. If the column name is not specified, all columns are searched and the corresponding rows are obtained. For example, if you enter 0, in the diet_food_nutrients table you obtain four rows that contain this value in one of the columns. You can also filter by using numeric values as follows:

Visualization widgets syntax

The widget syntax can be useful for customizing widgets beyond the functionality that is provided by the JSON editor.

The basic widget syntax is as follows:

{
  "name": "Widget Title",
  "type": "WidgetType",
  "props": {}
}

The basic widget syntax for widgets that are connected to data, such as tables and charts, is as follows:

{
  "name": "Table Cars",
  "type": "Table",
  "props": {
    "container": "",
    "data": "cars",
    "spec": {},
    "search": ""
  }
}

Notes widget specifications

The Notes widget can be styled as a post-it note, as shown in the following code sample:

{
  "name": "Notes",
  "type": "Notes",
  "props": {
    "notes": "My post-it note",
    "style": {
      "background": "#ffe"
    },
    "headerStyle": {
      "background": "#ffe"
    }
  }
}

This style example is applicable to other widgets.

Table widget specifications

Table widget specifications are composed of a list of columns that follow this syntax:

{
  "name": "Table Cars",
  "type": "Table",
  "property": "Acceleration",
  "label": "Acceleration",
  "type": "Number",
  "visible": true,
  "width": 100,
  "style": {}
}

You can customize the rendering of tables by using the following elements:

The search and filtering feature is available in tables. To search content in a table, click the search icon . You can limit your search to a specific column by adding a prefix to your search as follows: "column heading":"search", for example name:chevrolet. To search values that range from x to x, use 10..20. You can also search values greater than x, for example 10.., and values less than x, for example ..20. For more information about table filtering, see Table search and filtering.

Charts widgets

You can use two types of chart widgets: Vega Charts and Charts. Different types of charts are available when you open these Chart widget editors.

Vega Chart widget specifications

The Vega Chart widget uses Vega-Lite specifications to create different types of chart (bar charts, point charts, and so on). If you leave spec empty, a simple bar chart is automatically generated with the first string column in x-axis and the first number in y-axis.

Vega-Lite enables data filtering and transformation. For example, strings can be transformed into dates.

To learn more about Vega-Lite, see Vega-Lite - A High-Level Visualization Grammar.

The following is an advanced example of a grouped bar chart based on a population data table. This example shows how to filter data and how to compute a virtual column:

{
  "name": "Population Grouped Bar Chart",
  "type": "Chart",
  "props": {
    "data": "population",
    "spec": {
      "transform": [
        {
          "filter": "datum.year == 2000"
        },
        {
          "calculate": "datum.sex == 2 ? 'Female' : 'Male'",
          "as": "gender"
        }
      ],
      "mark": "bar",
      "encoding": {
        "column": {
          "field": "age",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "sum",
          "field": "people",
          "type": "quantitative",
          "axis": {
            "title": "population",
            "grid": false
          }
        },
        "x": {
          "field": "gender",
          "type": "nominal",
          "scale": {
            "rangeStep": 12
          },
          "axis": {
            "title": ""
          }
        },
        "color": {
          "field": "gender",
          "type": "nominal",
          "scale": {
            "range": [
              "#EA98D2",
              "#659CCA"
            ]
          }
        }
      },
      "config": {
        "facet": {
          "cell": {
            "strokeWidth": 0
          }
        },
        "axis": {
          "domainWidth": 1
        }
      }
      }
    }
  }

Gantt chart widget

Gantt charts are automatically created to display the solution for scheduling problems created with the Modeling Assistant. You can, however, edit, create and configure Gantt charts for any data where it is meaningful, using the Gantt widget. You can use the Widget Editor to select the relevant scenario, and Resources, Activities, Reservations and Dates to be displayed. You can also use the JSON editor to configure Gantt charts, by clicking the pencil icon and selecting the JSON pane.

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": "$cognitive-gantt",
    "spec": {},
    "search": ""
  }
}

  "data": [
    "resourcesTableName",
    "activitiesTableName",
    "reservationsTableName"
  ],

  "resources": {
    "data": "resourcesTableName",
    "id": "id",
    "parent": "parent",
    "name": "name"
  },
  "activities": {
    "data": "activitiesTableName",
    "id": "id",
    "name": "name",
    "start": "start",
    "end": "end",
    "parent": "parent"
  },
  "reservations": {
    "data": "reservationsTableName",
    "activity": "activity",
    "resource": "resource"
  },

Another mandatory field that you must also define in the specification is the dateFormat so that all the common date formats can get converted into real dates. Some common date formats are for example 'yyyy-MM-dd', 'yyyy-MM-dd HH:mm:ss', and so on. You can also use S for milliseconds for Epoch time, for example, "dateFormat": "S". The dateFormat must match the "start" and "end" fields of the "activity" table.

The error message No time window defined is displayed until you define the activity table, with start and end fields that use the specified dateFormat.

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": [
      "resources",
      "activities",
      "reservations"
    ],
    "spec": {
      "resources": {
        "data": "resources",
        "id": "id",
        "parent": "parent",
        "name": "name"
      },
      "activities": {
        "data": "activities",
        "id": "id",
        "name": "name",
        "start": "start",
        "end": "end",
        "parent": "parent"
      },
      "reservations": {
        "data": "reservations",
        "activity": "activity",
        "resource": "resource"
      },
      "dateFormat": "S",
      "resourceQuantity": "quantity"
    },
    "search": ""
  }
}

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": [
      "resources",
      "activities",
      "reservations",
      "constraints"
    ],
    "spec": {
      "type": "ActivityChart",
      "resources": {
        "data": "resources",
        "id": "id",
        "parent": "parent",
        "name": "name"
      },
      "activities": {
        "data": "activities",
        "id": "id",
        "name": "name",
        "start": "start",
        "end": "end",
        "parent": "parent"
      },
      "constraints": {
        "data": "constraints",
        "from": "from",
        "to": "to",
        "type": "type"
      },
      "reservations": {
        "data": "reservations",
        "activity": "activity",
        "resource": "resource"
      },
      "dateFormat": "S",
      "resourceQuantity": "quantity"
    },
    "search": ""
  }
}

Learn more

For other types of charts, see Visualizing your data.