# 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:

```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:

```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."
});
```

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FvCOSB4T1c9F5r3jQ2huy%2Fimage.png?alt=media&#x26;token=20de1ce0-51c6-409a-bffe-015f43b954ed" alt=""><figcaption></figcaption></figure>

### Example #2

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

**HTML**:

```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**:

```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**:

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

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FdYpaqSPCKWxbZxEBlHqk%2Fimage.png?alt=media&#x26;token=e0cc583a-cd29-480d-a2c4-a7f2bc73e538" alt=""><figcaption></figcaption></figure>