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. 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.

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:

Here is the description of the GOLD class Gauge:

Here is the description of the GOLD class Graphic:

Here is the description of the GOLD class Image: