# Getting started
## 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](https://res.cloudinary.com/di2vaxvhl/raw/upload/v1694454062/Plugin%20Assets/Widget%20plugin/CustomHighCharts.zip). 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](https://res.cloudinary.com/di2vaxvhl/image/upload/v1693863919/Plugin%20Assets/Widget%20plugin/highChartsLogo.png).
Scroll down to the *Plugin description* section and there paste the following readme and hit the *save* button within that section.
```
# 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
- [Ubidots Highcharts Widget](#ubidots-highcharts-widget)
- [Features](#features)
- [Table of Contents](#table-of-contents)
- [Prerequisites](#prerequisites)
- [Setup and Installation](#setup-and-installation)
- [Widget's inputs](#widgets-inputs)
- [License](#license)
## Prerequisites
- An active Ubidots account with Enterprise license.
## Setup and 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:
- **Chart's title**: Define the main title of the graph.
- **Chart's 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.
- **Variable Label**: Click on the "ADD VARIABLE" button and follow the variable selection wizard.
- **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.
```
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:
