Displays a structured representation of code or algorithms. Often used in documentation or presentations to explain code structure or logic.
How to Use
Implementation
In the Rayven Workflow Builder:
- Select Visualizations.
- Drag the Diagram Code Chart node to the canvas.
- Provide an input to the Diagram Code Chart node by connecting it to another node.
- Double click on the Diagram Code Chart node to open the configuration window.
- Select a code template - these are predefined for each visualization type.
- Amend the code to include your x- and y-variables, as well as any chart features, such as x-title (see ‘code-configuration below).
Configuration
|
Section: General |
||
|
This section contains basic configuration elements required for any diagram code chart implementation |
||
|
Field |
Requirement |
Comments |
|
Widget Name |
Mandatory |
Enter a name for this node. This provides a handle to which you and others can refer, so it should be simple but meaningful and explain the node’s purpose. |
|
Widget Subtitle |
Optional |
Additional text that can be used to explain the data presented by the node. This will appear directly under the Widget Name, in a smaller text size. |
|
Widget Header |
Mandatory |
Ability to hide or show the widget’s header. |
|
Device Name |
Mandatory |
Select this checkbox to display the device on the widget. |
|
Background Color |
Optional |
Ability to select desired colors as the diagram code chart’s background color. |
|
Widget Refresh Interval (sec) |
Optional |
Configure how often the chart widget will refresh. The default is every 60 seconds. |
|
Code Templates |
Mandatory |
Select from dropdown menu:
|
|
Code |
Mandatory |
Heatmap: … title: { text: '', }, xAxis: { title: { text: 'x-axis title' } }, yAxis: { title: { text: 'y-axis title' }, }, … // Set the range and colors for the heatmap spectrum colorAxis: { stops: [ [0, '#3060cf'], [0.5, '#fffbbc'], [0.9, '#c4463a'], [1, '#c4463a'] ], } … // Your variable name should replace varX and you may set a color for null values series: [{ data: ##varX##, boostThreshold: 100, borderWidth: 0, nullColor: '#EFEFEF', }] Waterfall chart … title: { text: '', }, xAxis: { title: { text: 'x-axis title' } }, yAxis: { title: { text: 'y-axis title' }, }, … // enable or disable legend legend: { enabled: false }, … // set your data series options series: [{ upColor: Highcharts.getOptions().colors[2], color: Highcharts.getOptions().colors[3], data: [{ name: 'Start', y: ##varX## }, { name: 'Variable Costs', y: ##varY## }, { name: 'Balance', isSum: true, color: Highcharts.getOptions().colors[1] }], dataLabels: { enabled: true, … Sankey Chart // set the chart options Highcharts.chart('$$chart_id$$', { chart: { backgroundColor: 'transparent', }, title: { text: ' ' }, accessibility: { point: { valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.' } }, credits: { enabled: false }, // define the ‘from’ and ‘to’ relationships and variable names for your diagram. The // relationships must be predefined series: [{ keys: ['from', 'to', 'weight'], data: [ ['Total Emissions', 'Scope 1', ##varX##], ['Total Emissions', 'Scope 2', ##varY##],
], type: 'sankey', name: 'Sankey demo series' }] }); Organizational Chart … // set the chart options chart: { inverted: true, backgroundColor: 'transparent', }, title: { text: ' ' }, … // add your data series. Note that you may add or remove levels series: [{ type: 'organization', name: 'Highsoft', keys: ['from', 'to'], data: [ ['Shareholders', '##varX##'], ['Board', '##varY##'] ], levels: [{ level: 0, color: 'silver', dataLabels: { color: 'black' }, height: 25 }, { level: 1, color: 'silver', dataLabels: { color: 'black' }, height: 25 }, { level: 2, color: '#980104' }, { level: 4, color: '#359154' }], nodes: [{ id: 'Shareholders' }, { id: 'Board' }, { id: 'Web', name: 'Web devs, sys admin' }, { id: 'Sales', name: 'Sales team' }, { id: 'Market', name: 'Marketing team', column: 5 }], colorByPoint: false, color: '#007ad0', dataLabels: { color: 'white' }, borderColor: 'white', nodeWidth: 65 }], |
|
Section: Tooltip Info |
||
|
Field |
Requirement |
Comments |
|
Show Tooltip |
Optional |
When checked, it allows users to display their tooltip text on the widget. |
|
Tooltip Text |
Optional |
This section only exists when “Show Tooltip” is checked. Users are able to write any tooltip message they desire which will be displayed on the widget. |
|
Section: Group by Device Label |
||
|
Field |
Requirement |
Comments |
|
Device label name |
Mandatory |
There are no labels available in this box until you have saved at least one in the Device Labels section of the Workspace. Select a Label to use to filter devices. |
|
Grouped |
Mandatory |
Select a method for grouping the widget on the dashboard from the dropdown: No Grouping (widget per device): one widget will appear for each device Group by device label value (Widget per label value): One widget will appear for each value of a label. For example, if the Label is ‘Colour’ and there are the values ‘Green’ and ‘Gold’, then two widgets will be displayed, one with devices with Colour Label equal to “Green” and one with devices with Colour Label equal to “Gold” Group by device label name (One widget): Only one widget will be displayed and this will contain data from all devices. |