Panels > HTML Widget
1. Getting Started with vuSmartMaps™
3. Console
5. Configuration
6. Data Management
9. Monitoring and Managing vuSmartMaps™
HTML Widget Visualization lets you use HTML code to create a visualization. The HTML widget is a visualization for creating HTML widgets for the dashboards, offering convenience and added functionality.
For example, according to the requirements, you can create custom headers with custom colors, reference links, vertical or horizontal separators, and many more.
Here are some key features of the HTML widget visualization:
To create the HTML Widget Visualization
On the right side of the default screen, select Visualization as Text to create an HTML panel.
There are multiple options to edit the properties of the panel. The first one is Panel Options. Enter a Name and Description for the Panel that you want to create. For instance, if you’re making an HTML chart to track CPU usage, name the panel “HTML Chart” and describe it as “CPU Usage.”
The Description is available in the top left corner and can be viewed by hovering over the i button.
The next part of Panel Options is Panel Link where you can point a link to any other website or dashboard of your choice. Enter a title, and URL, and select the ‘Open in a new Tab’ option if you want to open the link in a new tab. Click Save.
The URL can be a link to another dashboard or for getting help or useful info. When you click on a panel, it opens the link either in the same tab or a new tab, depending on your choices. For example, if you want to compare a default dashboard, just click the link to open it.
The Text option allows you to write and edit the HTML code that you want to display in the chart.
The text mode of the panel can be:
You can write code here in the HTML editor, you can add any HTML code for which you want to create a widget. Assuming you have a basic grasp of HTML and CSS, you can use plain HTML and CSS to create various elements according to your needs, such as table headers, colorful blocks, text with links to other pages, and more.
Here are code snippets for commonly used HTML widgets that you can customize as needed.
Below, we provide code for horizontal and vertical separators (lines) that can be used in dashboards to separate different blocks or visualizations.
Sample code for Horizontal Separator:
<div style=’width:200px; height:2px; border:1px solid black’>
</div>
Sample code for Horizontal Separator:
<div style=’width:1px; height:200px; border:1px solid black’>
</div>
The code can be configured as:
Choose a border style from the following options:
You can use this to add named headings to your dashboard blocks as needed.
Sample Code
<div
style=’text-align:center; font-size:25px; color:green; backgroundcolor:yellow’>
Total Orders
</div>
The code can be configured as:
Another commonly used HTML widget is to provide a reference link to other pages.
Sample Code
<a href=’/app/vienna#/dashboards/’> Dashboards </a>
The code can be configured as:
You have now learned how to configure the HTML Visualizations, change the panel settings, and more. You can save and edit the panel later too.
To create a custom HTML widget, follow these steps:
The HTML widget allows you to:
You can customize panel options by:
Yes, you can. Use provided code snippets for:
You can create reference links using the <a> tag with the desired URL.
Commonly used HTML widget code snippets are available in the documentation for easy customization.
You can save and edit your HTML widget panel at any time through the dashboard interface.
Browse through our resources to learn how you can accelerate digital transformation within your organisation.
VuNet’s Business-Centric Observability platform, vuSmartMaps™ seamlessly links IT performance to business metrics and business journey performance. It empowers SRE and IT Ops teams to improve service success rates and transaction response times, while simultaneously providing business teams with critical, real-time insights. This enables faster incident detection and response.