HTML Canvas

Build your own custom widgets with the HTML Canvas

Introduction:

Ubidots offers off-the-shelf widgets for most visualization needs. However, some projects require more specific or fully custom widgets. For those cases, use the HTML Canvas widget to build custom visualizations with your own code.

Definition:

HTML Canvas is a widget for building custom widgets. It lets you write custom code with the following languages, along with Ubidots built-in methods and third-party libraries described later:

• HTML

• CSS

• JavaScript

This widget features a code editor composed of three tabs, one for each language.

When to use the HTML Canvas?

Use HTML Canvas when other widgets do not meet your functionality or styling requirements.

How to create an HTML Canvas?

Go to a dashboard, click the Add new widget button (+), scroll to the Advanced section, and select HTML Canvas.

Widget settings:

The widget offers the following settings:

• Code editor

• Third-party libraries

• Enable lazy loading

• Preload dashboard data

Widget appearance tab:

The appearance of the widget can be customized further with these options:

• Name

• Custom Style

Custom Style:

See Custom Style to learn how to customize your HTML Canvas styles.