Getting started

This section outlines what you can achieve with the different plugin types

Widget plugin

Let's create a widget that uses HighCharts javascript library to plot time series data. It will look like:

Download the zip file containing the source code for this widget from here. Then, head to Ubidots => Devices => Plugins. Once there, click on the Developer console icon:

Click the + icon to create a new plugin, set a name for it and a description, then hit the done button. After that your new plugin will be created:

Click the newly created plugin's name. While in the General information tab, click on Add Plugin Icon to add the icon that will be displayed on the plugins drawer and then hit the Save button within the Display information section. You can download the icon from here.

Scroll down to the Plugin description section and there paste the following readme and hit the save button within that section.

![](https://res.cloudinary.com/di2vaxvhl/image/upload/v1693865751/Plugin%20Assets/Widget%20plugin/WidgetDisplay.png)

# Ubidots Highcharts Widget

Visualize your Ubidots variable data using the Highcharts graphing library with this widget. Easily configure titles, axis names, and more!

## Features

- Seamless integration with Ubidots.
- Real-time fetching of variable data based on the provided label.
- Customizable graph elements like title, subtitle, x-axis & y-axis names, and the series name.

## Table of Contents

1. [Prerequisites](#prerequisites)
2. [Setup & Installation](#setup--installation)
3. [Configuration](#configuration)
4. [Contributing](#contributing)
5. [License](#license)

## Prerequisites

- An active Ubidots account with Enterprise license.

## Setup & Installation

1. Log in to your Ubidots account.
2. Navigate to the **Dashboards** section and select the one in which you want to place the widget.
3. Click on **Add Widget** and select **HighCharts widget**.

## Widget's inputs 

After adding the widget to your dashboard:

1. Configure the widget settings:
   - **Variable Label**: Enter the label of the Ubidots variable you wish to visualize.
   - **Title**: Define the main title of the graph.
   - **Subtitle**: Provide a subtitle, if needed.
   - **X Axis Name**: Specify the label for the x-axis.
   - **Y Axis Name**: Specify the label for the y-axis.
   - **Series Name**: Define the label that will be displayed within the graph line.

2. Save the changes and the graph will automatically fetch the data and display it.

## License

This project is licensed under the MIT License. See the `LICENSE` file for more details.

## Troubleshooting
* If the currently selected device from the dashboard doesn't has the variable that you set, an error will be displayed in the browser's developer console.

Navigate to the Version tab in the sidebar menu. Click the "+" icon and upload the zip file. The plugin is now in your Ubidots account, but it still needs to be deployed.

While in the Versions tab, scroll down to the Version history section and click on the icon that resembles a paper-clip airplane:

A confirmation will be displayed, click the Release button:

After that, your plugin's status will change from Draft to Released:

Go to Devices -> Plugins and click the create new plugin button. Then, in the plugins drawer, search for the plugin that you just created (HighCharts custom widget), fill in the required Ubidots token field and click the Done button. After that, you'll be able to see a new plugin has just been created:

Go to the dashboard that you want to place the widget in and click the Add new widget button. A drawer will be pop-up displaying all the widget, within it search the Widget that you just created and click on it. An instance of said plugin will be placed on the dashboard:

Fill the Widget's fields according to the variable that you want the data visualized in the widget. The following screenshot shows an example:

Finally, the widget will be created on the dashboard. This is how the widget looks like in the dashboard: