A graph is a set of points, called nodes or vertices, interconnected by a set of lines called edges. The graph visualizes how subjects are interconnected with each other.
Creating a Graph Visualization
Here is an example of Graph visualization with TigerGraph datasource:
Step 1: Create a new TigerGraph datasource & run the installed query on it to create a dataset. For this, you can refer to the “TigerGraph Datasource Integration” documentation.
Step 2: Once the dataset is created, click on the Create Visualization button.
Step 3: In Settings, select the Visualization Type as Graph.
This will create a graph visualization for the widget.
Alternatively, you can navigate to the dashboard and create a widget from the Tigergraph query. From there, you can use widget settings to create a graph.
Chart Settings for Graph:
Edges Type: This allows you to filter visible links by edge type. If nothing is set, then all links (edges) are shown.
Integration Type: Integration type describes how Vertexes are aligned on a graph. There are two types of integration to select from Verlet (default) and Euler.
- Verlet: Verlet integration applies inertia by using previous and current positions.
- Euler: Velocity is stored with the object and added whenever a new position is calculated.
Data Format
To build Graph visualization, the data must be formatted to contain attributes describing both- Edge (Links) and Vertex.
For Vertex
- v_id - ID of a Vertex (String)
- v_type - Vertex Type (String)
- attributes - additional JSON field (String) - This is passed to a Graph as a tooltip.
For Edge
- from_id - ID of a source point (Vertex) for Link
- from_type - Type of a source point (Vertex) for Link
- to_id - ID of a destination point (Vertex) for Link
- to_type - Type of a destination point (Vertex) for Link
- e_type - Type of Edge (Link)
- attributes - additional JSON field (String) - This is passed to a Graph as a tooltip.
Note: All edges and vertexes can be described in one single dataset, with data from edges and vertexes in the attributes column. If you have separate datasets with edges and vertexes, you must use the Query Builder to Join Queries into one query.
Please use Cloud9QL to combine, convert, and rename fields to the format suitable for Graph.
Drilldown
The graph chart type supports drilldowns. By clicking on an element within the graph, you can drill down into the underlying data of that specific element, displayed in a different widget.
Chart Configuration
| Field | Interpretation |
|---|---|
| Edge type | Select which edge type to display. |
| Integration type | Integration determines how forces are applied on particles. In Euler integration, force is applied direct as newPosition += velocity;. In Verlet integration, new position is based on a previous position without velocity: newPosition += previousPosition - newPosition. Default is Verlet. |
| Vertices label attributes | Select custom attributes to use as vertices display labels. |
Display & Formatting
| Field | Interpretation |
|---|---|
| Colors | Set colors for chart |
| Data labels around marker | Allow data labels to follow markers shape |
| Vertices radius | Defaults to 10px |
| Edges width | Set edge line width |
| Display node connection name | Allow edge name to display on line |
| Display node subtitle | Enables subtitles to be displayed. |
| Vertices color | Set color name (or hex code) for vertices |
| Edges color | Set color name (or hex code) for edges |
| Data Labels Position | Set data labels positions relative to vertices, default is 'bottom' |
Widget Labels
| Field | Interpretation |
|---|---|
| Data Label Display | Check to display value labels. Default is false |
| Data Label Font Size | Enter font size if the display label is set to true. Ex, 9px |
Widget Menu
| Field | Interpretation |
|---|---|
| Show Title | Show Title on Widget |
| Analyze | Show Analyze menu |
| Alerts | Show Alert icon |
| Filters | Show Filter icon |
| Drilldowns | Show Drilldowns menu |
| Query | Show Query menu |
| Data/Export | Show Data/Export menu |
| Data Diagram | Show Data Diagram |
| Share | Show Share menu |
| Refresh | Show Refresh menu |
| Maximize | Show Maximize menu |
| Remove from Dashboard | Show Remove from the Dashboard menu |
| InstantSights | Show InstantSights |