Ubidots Developer Guides
Help CenterAPI ReferenceData APICommunity
  • Welcome to our Dev Guides
  • ⚡️ Getting Started
    • What is Ubidots?
    • Devices, Variables, and Dots
    • Technical FAQs
    • Business FAQs
  • 🧩Integration Guides
    • Industrial IoT
      • Advantech
      • Amplified Engineering
      • AWS
      • Azimut
      • Balena
      • Bivocom
      • CESVA
      • Controllino
      • Digital Communications Technologies (DCT)
      • Everactive
      • Golioth
      • Kepware
      • Kunbus
      • Monnit
      • MultiTech
      • NCD.io
      • Node-RED
      • Omicron IoT
      • Red Lion
      • Robustel
      • Senquip
      • Sielco
      • Siemens
      • Strega
      • vNode
      • WAGO
      • Weintek
      • YuDash
    • Cellular
      • Blues Wireless
      • Digi International
      • Hologram
      • Monogoto
      • Particle
      • Quectel
      • Soracom
    • LoRaWAN
      • AonChip
      • Chirpstack
      • Decentlab
      • Helium
      • ioThings
      • LORIOT
      • Milesight
      • MOKOSmart
      • RAKwireless
      • Sagemcom
      • Seeed Studio
      • Senet
      • The Things Industries
        • The Things Stack
        • The Things Network
    • Sigfox
      • Digital Matter
      • McThings
      • Sigfox
      • Suntech
      • Thinxtra
      • UnaBiz
    • Satellite
      • Swarm
    • Dev Kits
      • Adafruit
      • Advantech
      • AloriumTech
      • Arduino
      • Blues Wireless
      • DFRobot
      • Dragino
      • Electric Imp
      • Espressif Systems
      • McThings
      • Microchip Technology
      • Onion
      • Particle
      • Pycom
      • RAKwireless
      • Raspberry Pi
      • Seeed Studio
      • Sodaq
      • STMicroelectronics
      • Texas Instruments
      • Thinxtra
      • Verse Technology
    • Weather
      • Weather Plugins
      • Ambient Weather
    • Tools
      • Gambit Communications
      • PubNub
  • 📊Dashboards & Widgets
    • HTML Canvas
      • 3rd party packages
      • Preload Dashboard data
      • Built-in library
        • Properties
        • Methods
        • Listening events
        • API
      • Examples
        • Basics
        • Create an LCD screen with the HTML Canvas
        • Interacting with dashboard data
        • Change header's custom style
        • Adding real time using Socket.IO
        • Delete Variable data from a Device
        • Delete Variable data from Groups or Types of Devices
        • Navigation through Dashboard
        • Using a React library
      • Code editor
        • HTML Tab
        • CSS Tab
        • JavaScript Tab
    • Custom UI
      • Paragraph
      • Input combo
        • Text
        • Numeric
        • Numeric with buttons
        • Date
        • Time
        • Toggle
        • Dropdown
        • Multiple selection dropdown
      • Button
    • Custom Style
      • Dashboards
      • Widgets
    • Line chart
    • Pages
      • Getting started
      • Development
      • API
        • Page creation
        • Publish
  • 🤖UbiFunctions
    • Getting Started
      • Creating an UbiFunction
      • Coding an UbiFunction
      • Testing an UbiFunction
      • Authentication
      • Execution Time
      • Logs
    • Runtimes
      • Python
      • NodeJS
      • Custom Runtimes
    • Invocation
      • Time-based Trigger
      • HTTPS
      • MQTT Publish
      • Ubidots Event
    • Advanced
      • Account Token
      • Execution time
      • Raw Functions
      • CORS Policy
      • Async Execution
      • DaaS (Decoder as a Service)
      • Developing and Managing UbiFunctions with Ubidots CLI
    • Examples
    • Specs and Limits
    • Storage
      • File Storage API
      • Mutiple files
  • 🧩Plugins
    • What is a plugin?
    • Public vs. Private
    • Public plugins
      • Cron
      • Webhook
    • Private Plugins
      • Cron
      • Webhook
      • Widget
      • Device
    • Plugins development
      • Getting started
      • Cron
      • Webhook
      • Widget
      • Device
      • view.xml
      • view_widget.xml
    • Plugins deployment
      • Cron and Webhook
      • Widget
      • Device
    • Using the plugins
      • Cron and Webhook
      • Widget
      • Device
  • 📈SYNTHETIC VARIABLES
    • Getting started
      • Creating synthetic variables
      • Synthetic Variables' editor
    • Expressions
      • Mathematical
      • Date range
      • Rolling
      • Special functions
    • Specs and limits
    • Examples
      • Mathematical
      • Date range
      • Rolling
      • Special functions
  • ⌨️Developer tools
    • Javascript SDK
      • Overview
      • Getting started
      • Ubidots class
        • Get methods
        • Filter methods
        • Ubidots objects
          • Entity object
          • Paginator
      • Examples
    • CLI
      • Overview
      • Installing
      • Usage
      • SDK for UbiFunctions
  • 🏗️Apps
    • App builder
      • Custom sidebar
Powered by GitBook
On this page
  • Example #1:
  • Example #2

Was this helpful?

Export as PDF
  1. Dashboards & Widgets
  2. HTML Canvas
  3. Examples

Interacting with dashboard data

Example #1:

The following example uses Ubidots' "listener events" on an HTML Canvas in order to extract information from Ubidots and display it on the dashboard:

HTML:

<div>
    <p id="token"></p>
    <p id="dashboard"></p>
    <p id="dateRange"></p>
    <p id="deviceSelected"></p>
    <p id="device"></p>
    <p id="isRealTimeActive"></p>
    <p id="dashboardRefreshed"></p>
    <p id="eventToken"></p>
    <p id="eventDashboard"></p>
    <p id="dashboardDateRange"></p>
    <p id="eventDeviceSelected"></p>
    <p id="eventDevice"></p>
    <p id="eventRefresh"></p>
    <p id="eventisRealTimeActive"></p>
</div>

JavaScript:

var ubidots = new Ubidots();

ubidots.on('receivedToken', function (data) {
    document.getElementById('eventToken').innerText = "TOKEN: " + data;
});

ubidots.on('selectedDashboardObject', function (data) {
    document.getElementById('eventDashboard').innerText = "Dashboard Object: " + JSON.stringify(data)
});

ubidots.on('selectedDashboardDateRange', function (data) {
    document.getElementById('dashboardDateRange').innerText = "Dashboard date range: " + JSON.stringify(data);
});

ubidots.on('selectedDevices', function(data) {
    let listOfIds = data.join(', ');
    document.getElementById('eventDeviceSelected').innerText = "Selected Device ids: " + listOfIds;
});

ubidots.on('selectedDeviceObjects', function (data) {
    let formattedData = JSON.stringify(data); // 2-space indentation
    document.getElementById('eventDevice').innerText = "Device Object: \n" + formattedData;
});

ubidots.on('isRealTimeActive', function (data) {
    document.getElementById('eventisRealTimeActive').innerText = "Real time button: " + JSON.stringify(data);
});

ubidots.on('dashboardRefreshed', function (data) {
    document.getElementById('eventRefresh').innerText = "The Dashboard refresh button was pressed."
});

Example #2

The following example uses "setter events" and a 3rd party library to set the device in a dynamic dashboard:

HTML:

<div class="notification--container" id="notification">
<p>Device set successfully</p>
</div>

<div class="set-device--container">
<input type="text" placeholder="Enter Device id" class="set-device--input" id="device" />
<button type="button" class="set-device--button" id="send-value">Set device</button>
</div>

CSS:

.set-device--container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}

.set-device--input {
border: none;
border-bottom: 2px solid #28AECD;
display: block;
margin: 0 auto;
font-size: 14px;
outline: none;
}

.set-device--button {
background: #FFFFFF;
border: 2px solid #28AECD;
border-radius: 20px;
color: #28AECD;
font-size: 14px;
margin-top: 10px;
width: 100%;
}

.set-device--button:hover {
background: #28AECD;
cursor: pointer;
color: #FFFFFF;
}

.notification--container {
display: none;
}

JavaScript:

var $setDevice = $('#send-value');
var $notification = $('#notification');

var ubidots = new Ubidots();

$setDevice.on('click', function () {
$device = $('#device'); 
ubidots.setDashboardDevice($device.val())
$notification.show();
});

Third party library:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
PreviousCreate an LCD screen with the HTML CanvasNextChange header's custom style

Last updated 1 year ago

Was this helpful?

📊