Add pre-designed graphics to your dashboard by using the Graphic widgets. This allows you to add shapes, arrow lines, or icons, by choosing from a selection of widgets.
Graphic Widget types
Types of shapes that can be added to the canvas, such as a circle, or a square that you can expand, customize, and use as a border.
Types of lines that can be added to the canvas, such as arrows.
Types of icons that can be added to the canvas.
How to use Graphic Widgets
- Login into the LSAC application as an authorized user.
- Open KPI Studio from My Apps tab in the platform left navigation bar.
- Click the plus sign that appears at the top right corner of the KPI Studio home screen and select Dashboard.
- Select Graphics tab, which appears on the left navigation menu, to expand its panel.
- Expand any of the sections within the panel (such as shape, lines or icons) and drag the selected widget anywhere on the dashboard canvas.
- You can customize a Graphic Widget via its properties panel. This panel appears on the right side once the widget is selected. Refer to the properties section below to learn about the type of customization available via a shape, line, or icon widget.
- You can also add an action event that will be triggered when this widget is clicked. See the Actions section in the widget's property table below for more information.
- Additional options are available by right-clicking and using the menu that appears. Learn more about the menu options here.
The table below explains the Graphic Widget properties that can be used for customization.
Note: Properties differ slightly depending on the selected graphic widget type, that is shape, icon or line.
This option allows you to select a color for the inside of the shape.
Note: for lines such as arrows, this specifies the arrow head.
This option allows you to define a color for the outline or border of the selected shape.
Note: for icons such as arrows, this specifies the arrow line or body.
This allows you to define a thickness for the shape outline or border.
This allows you to specify the transparency of the fill (inside) color of the selected shape. The higher the number, the stronger the color.
|Size & Location|
Specify the x coordinates of the top left corner of the shape widget, in order to position it exactly on your dashboard canvas.
Specify the y coordinates of the top left corner of the shape widget, in order to position it exactly on your dashboard canvas.
Specify the width of the currently selected widget, in pixels, in order to resize it exactly.
Specify the height of the currently selected widget, in pixels, in order to resize it exactly.
This option allows you to define the roundness of the widget’s border corners. Tip: For maximum circular edges, enter half the value of the widget height. For example, if the height is 130 pixels, then set the edge value to 65 pixels. Moreover, any value greater than 65 for the edge, will have no further effect in this example.
Specify the amount to rotate the selected shape widget clockwise, in degrees.
Enable this toggle to maintain the aspect ratio. This means when increasing or decreasing the shape widget’s size, it maintains its shape (i.e. the relationship between its width and height).
If this is disabled, the shape widget can be stretched out of shape either vertically or horizontally.
Enable this toggle to lock the shape widget in its location. This stops you from moving or resizing the widget. This holds true even when selecting multiple widgets on the canvas. Note that the shape widget can still be customized.
Allows you to specify a background color for the shape widget. This refers to the area within the widget, excluding the shape itself.
Allows you to specify the transparency of the background color on the widget.
This option allows you to define a custom padding or buffer around the widget, in pixels, when enabled. This includes padding for each side to the widget. If disabled, you can still define an overall padding size.
When custom padding is enabled, this allows you to define padding to be added to the top of the widget.
When custom padding is enabled, this allows you to define padding to be added to the bottom of the widget.
When custom padding is enabled, this allows you to define padding to be added to the right of the widget.
When custom padding is enabled, this allows you to define padding to be added to the left of the widget.
This allows you to define an overall padding size for the shape widget. This size, defined in pixels will be constant for each side of the widget. To add different sized padding on any of the sides, enable the Customise Padding option.
This allows you to specify the thickness of the widget border.
Note: to make the widget border visible, you must define values for all three border properties.
This allows you to select a style for the widget border. Options include: dashed, solid, dotted, groove, and more.
This allows you to specify the color of the widget border.
This option allows you to cast a horizontal shadow on the widget by defining its size in pixels.
This option allows you to cast a vertical shadow on the widget by defining its size in pixels.
This option allows you to define the sharpness of the shadow. The smaller the value, the sharper and more defined the shadow will be. For a blurry or softer shadow, provide a bigger value.
This option allows you to set a color for the shadow.
Select an event that will trigger when the selected widget is clicked. Event options include:
|Report ID||If navigating to a report using the ‘Go to report’ click event, provide the UUID of the report.|
|Sub Tab #||If navigating to a sub tab using the ‘Go to sub tab’ click event, enter the order number of the sub tab.|
|URL||If navigating to an external page using the ‘Go to URL’ click event, provide the full URL of the page.|
If navigating to an external page using the ‘Go to URL’ click event, specify the page target. Options include: