Visualizing your Data

Rulex Studio custom interface primary purpose is to visualize and operate on data to produce interactive interfaces which allow the user to describe its business and operate on them.

Therefore, one of the basis of this component is its capability to perform graphical dashboards of the underlying data. These dashboarding operations are carried on by presenting data using plots, tables, gauges, texts and images.

According to widget families’ definition, these families are aimed at the graphical presentation of data in your slides/dialogs and report pages:

Note

Data can be presented even by using some other families as for example Tables. However, here we are presenting families whose primary duty is data visualization, while on other pages, we are going to present all those families where different behaviors or possibilities are present.

Plots

Plots use graphical techniques for representing data, usually as a graph showing the relationship between two or more variables.

Rulex Studio, as Rulex Factory, offers different types of Plots, which are listed in the Widgets panel.

Plots family is divided in different sub-families:

In order to start working on a plot, users have to choose the desired one and drag it onto the slide, then they can add attributes to start displaying data.

The plot is configured by using different menus controlling their inputs, options and graphical layout, which can be opened by clicking on the hamburger menu in the top-left corner of the widget. The menu can then be closed by clicking on the arrow on top of it. We can mainly divide all plots listed above in two categories according to the type of configuration they present:

  • Cartesian or Grid plot: these correspond to the sub-families General plots, Stat plots and Finance plots. For more information about their configuration, see this page.

  • Relation plots: these include all other sub-families. Each family requires a dedicated description: we will cover Geographic plots here and Link analysis in this section.

Follow the provided links for further information about general configuration or single plot properties.

It is also possible to customize the plot’s layout through a dedicated layout menu, which can be opened through the widget context menu (right-click on the widget) or by double-clicking on the widget. More information can be found in the corresponding page.

Note

The event triggers available for the Plots widget are:

  • onMouseEnter

  • onMouseLeave

Gauges

Gauges are widgets that allow users to represent scalar values as graphical objects. These widgets are typically used to display current values rather than past or general trends and are accessible through the Widgets panel.

Widgets in the Gauges category can also be used in reports. For more information on creating reports in Rulex Studio, click here.

Note

The event triggers available for Gauges widgets are:

  • onClick

  • onMouseEnter

  • onMouseLeave

Rulex Studio offers different Gauges types, that can be classified into two main sub-families:

After selecting the desired gauge type, users can drag it onto the stage and configure it by dropping an attribute from a dataset in the Datasets tab.

Note

Gauges representing a scalar need to apply an aggregator operator to the provided attribute. For ordered attributes, the mean is used as the aggregate operator, while the mode is applied to nominal or binary attributes.

To modify the layout options of these widgets in Rulex Studio, users can either double-click the gauge frame or right-click on it and select the Open widget layout option in the Widget context menu.

The Layout options window displays different tabs based on the gauge’s subcategory and type. The only section common to all Gauges in the Layout options window is Input options, while most of the other sections vary according to the gauge selected.

See also

For detailed explanations of the different configuration options available for each gauge, please refer to the specific Gauges pages: Continuous gauges and Discrete gauges.

The configuration process is similar for both Gauges categories, but it differs in some internal options and graphical output.

To configure a gauge, read the following prerequisites and follow the instructions below:

Prerequisites

  • You must have selected and opened a view in editing mode.

  • You must have added a dataset to the Datasets left panel.

Procedure

  1. Choose the desired gauge from the Widgets panel and drop it onto the slide/dialog.

  2. Drag and drop the desired attribute from the Datasets tab onto the gauge.

  3. Select the operation to perform on the attribute in the Input options area.

  4. For Continuous gauges, browse through the tabs of the Layout options window and configure different internal features or layout customizations.

  5. For Discrete gauges, select the operation to perform in the Layout options window and set at least a filter on the attribute.

  6. Click APPLY, once the configuration is completed.

Note

Note that for Continuous gauges, the outcome of the selected operation will be displayed. Alternatively, for Discrete gauges, their final graphical aspect will vary based on the applied filter and the conditions previously set.

Graphics

The Graphics family contains general graphical customization which can be used even without data connection to improve the visual appearance of our interface.

These widgets enable users to insert custom text and geometric shapes into their slides, dialogs and reports, thereby enhancing the design and user experience of Rulex Studio views. Graphics are primarily used to annotate slides with text or create structured layouts that highlight key areas of a view.

Graphics are divided into two sub-families:

  • Texts:

    • Text

    • Card Text

  • Shapes:

    • Arrows

    • Ellipses

    • Lines

    • Speeches

    • Solids

    • Polygons

    • Stars

    • Rectangles

Note

The set of event triggers varies according to the selected sub-families. Therefore, their explanation is postponed to the sub-family dedicated pages.

Images

Images enable users to visually enrich their slides and dialogs, adding depth and engagement to their views through the import of JPEG, PNG, and SVG files.

Widgets in the Images category can also be used in reports. For more information on creating reports in Rulex Studio, click here.

Note

The event triggers available for Images widgets are:

  • onClick

  • onMouseEnter

  • onMouseLeave

Once the widget has been dragged and dropped onto the slide or dialog, users can double-click its frame or use the Widget context menu to open the Layout options pane.

The Layout options pane is composed by two subsections. Users can find all the available options and the corresponding GOLD references in the table below.

Subsection

Option

Description

GOLD Ref

Select Image

Drag & Drop area

Here users can browse through their local system and import the desired image by clicking the UPLOAD IMAGE button. It is also possible to speed up the operation by dragging the image directly onto the Drag&Drop file here box.

input
["src","type","image"]
str

Image Layout

Current link

Here, users can enter and create links with three types of connections:

  • To external web pages.

  • To another slide within the same view.

  • To a slide that filters a specific value on a Actions widget.

For details on the required syntax for each link type, see the Link Event page.

layout
["link"]
str

Open on external window

This option is useful when images are linked to a website.
If this option remains unchecked, the website will open in the same window.
If this option is checked, the website will open in a new external window.

layout
["external"]
bool

Image opacity (%)

It adjusts the opacity level of an image as a percentage.

layout
["opacity"]
number

Warning

It is not possible to load more than one file onto an Image widget at the same time. To import multiple images, drag multiple widgets onto the slide and repeat the import process for each of them.

Note

Only Current link and Image opacity options can be parametrized. To know more about parametric mode, click here.

GOLD References

Here is the description of the GOLD class Plot:

class plot.plot.Plot(label, layout=None, data=None, id=None)

GOLD class for Studio widget family Plot. Inherits from BaseWidget class. Description of Plot field layout is contained in this page for the General Plot subfamily, here for the Statistic Plot subfamily, at this link for the Link Analysis Plot subfamily and in this section for Geo Spatial Chart subfamily. The plot type, useful to derive the subfamily, is store into layout.options.type.

baseSet(label, dict_layout, data=None)

Base function to modify the widget layout

Parameters:

  • label (text) – the name of the widget

  • dict_layout (dict) – the layout of the widget to be set

  • data (list) – eventually the output of the widget to be set, defaults to None

draw(dataset, input, options, dict_indrow_selected)

Function to draw a plot

Parameters:

  • dataset (Dataset) – the Dataset instance to use as data origin

  • input (dict) – the input of the plot to draw (stored then in self.layout[“input”])

  • options (dict) – the options of the plot to draw (stored then in self.layout[“options”])

  • dict_indrow_selected (list of vectors of integers) – the dictionary of the various indrow of selection

get(asdict=True)

Base function to retrieve information about a widget

Parameters:

asdict (binary) – if True it returns the information as a GOLD dictionary, otherwise as a JSON string, defaults to True

Returns:

the information about the widget

Return type:

dict or text

refresh()

Base function to refresh the widget layout, meaning re-evaluate its options according to a modification of data or variables

rename(newname)

Base function to rename a widget

Parameters:

newname (text) – the new name of the widget

set(label, dict_layout, data=None)

Function to modify the plot layout

Parameters:

  • label (text) – the name of the plot

  • dict_layout (dict) – the layout of the plot to be set

  • data (list) – eventually the output of the plot to be set, defaults to None

Here is the description of the GOLD class Gauge:

class plot.gauge.Gauge(label, layout=None, data=None, id=None)

GOLD class for Studio widget family Gauge. Inherits from BaseWidget class. Description of Gauge field layout is contained in this page according to the different Gauge type. The gauge type is store into layout.options.type.

baseSet(label, dict_layout, data=None)

Base function to modify the widget layout

Parameters:

  • label (text) – the name of the widget

  • dict_layout (dict) – the layout of the widget to be set

  • data (list) – eventually the output of the widget to be set, defaults to None

draw(dataset, input, discrete=False)

Function to draw the gauge

Parameters:

  • dataset (Dataset) – the Dataset instance used as data origin

  • input (dict) – the input of the gauge to draw (stored then in self.layout[“input”])

  • discrete (binary) – True if the gauge is a discrete gauge, otherwise False, defaults to False

Returns:

the evaluated output

Return type:

dict

get(asdict=True)

Base function to retrieve information about a widget

Parameters:

asdict (binary) – if True it returns the information as a GOLD dictionary, otherwise as a JSON string, defaults to True

Returns:

the information about the widget

Return type:

dict or text

refresh()

Base function to refresh the widget layout, meaning re-evaluate its options according to a modification of data or variables

rename(newname)

Base function to rename a widget

Parameters:

newname (text) – the new name of the widget

set(label, dict_layout, data=None)

Function to modify the gauge layout

Parameters:

  • label (text) – the name of the gauge

  • dict_layout (dict) – the layout of the gauge to be set

  • data (list) – eventually the output of the gauge to be set, defaults to None

Here is the description of the GOLD class Graphic:

class plot.graphic.Graphic(label, layout=None, data=None, id=None)

GOLD class for Studio widget family Graphic. Inherits from BaseWidget class. Description of Graphic field layout is contained in this page for shapes and in this page for text. The graphic type is store into layout.options.type.

baseSet(label, dict_layout, data=None)

Base function to modify the widget layout

Parameters:

  • label (text) – the name of the widget

  • dict_layout (dict) – the layout of the widget to be set

  • data (list) – eventually the output of the widget to be set, defaults to None

get(asdict=True)

Base function to retrieve information about a widget

Parameters:

asdict (binary) – if True it returns the information as a GOLD dictionary, otherwise as a JSON string, defaults to True

Returns:

the information about the widget

Return type:

dict or text

refresh()

Function to refresh the graphic

rename(newname)

Base function to rename a widget

Parameters:

newname (text) – the new name of the widget

set(label, dict_layout)

Function to modify the graphic layout

Parameters:

  • label (text) – the name of the graphic

  • dict_layout (dict) – the layout of the graphic to be set

Here is the description of the GOLD class Image:

class plot.image.Image(label, layout=None, data=None, id=None)

GOLD class for Studio widget family Image. Inherits from BaseWidget class. Description of Image field layout is contained in this page.

baseSet(label, dict_layout, data=None)

Base function to modify the widget layout

Parameters:

  • label (text) – the name of the widget

  • dict_layout (dict) – the layout of the widget to be set

  • data (list) – eventually the output of the widget to be set, defaults to None

draw(input)

Function to draw the image

Parameters:

input (dict) – the input of the image to draw (stored then in self.layout[“input”])

get(asdict=True)

Base function to retrieve information about a widget

Parameters:

asdict (binary) – if True it returns the information as a GOLD dictionary, otherwise as a JSON string, defaults to True

Returns:

the information about the widget

Return type:

dict or text

refresh()

Base function to refresh the widget layout, meaning re-evaluate its options according to a modification of data or variables

rename(newname)

Base function to rename a widget

Parameters:

newname (text) – the new name of the widget

set(label, dict_layout)

Function to modify the image layout

Parameters:

  • label (text) – the name of the image

  • dict_layout (dict) – the layout of the image to be set