# Edit Widget

Editing is the most important part of creating a widget, especially for charts and tables. To able to create a chart or table, you must first create an empty widget.

1\. To edit an empty widget, click on **Show Query**.

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FtNZVS8HtSSqQSiS4TIkB%2Fimage.png?alt=media&#x26;token=7cd8671b-1c11-444f-92dd-1a2060005349" alt=""><figcaption></figcaption></figure></div>

2\. Metrics can be added using three methods:

a. Add the query from **SQL Content**:

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FbSbWmX7cqm5fnw1gUg5Z%2Fimage.png?alt=media&#x26;token=566945b8-68e6-4d98-a3c6-35327b425be1" alt=""><figcaption></figcaption></figure></div>

b. Import the query with **Import Query**:

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FfRINYHVdd1hza260yQRi%2Fimage.png?alt=media&#x26;token=e2156a44-0ecf-4a6a-955c-36a2b5272196" alt=""><figcaption></figcaption></figure></div>

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2F9Hh4BufVbXwIZXTMIxWA%2Fimage.png?alt=media&#x26;token=eacc68ee-818a-46c8-afb9-a284a61a5446" alt="" width="299"><figcaption></figcaption></figure></div>

c. Add metrics selected from a list.

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FfD9BGsCqcOdIvR0XWxjl%2Fimage.png?alt=media&#x26;token=fda0d23d-3a26-4adc-8d6f-a24243f38df8" alt=""><figcaption></figcaption></figure></div>

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2F3s8mvd5aX0FyWoRfZDSh%2Fimage.png?alt=media&#x26;token=2ad9f1f1-64c6-44f0-b2d0-d72aacb3a76d" alt=""><figcaption></figcaption></figure></div>

3\. To change the display or to add a filter, click on **Query Settings**.

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FMwHEmtG4yc9zVpmqyYJp%2Fimage.png?alt=media&#x26;token=7ebd2a77-a6a6-48b1-8893-40dbd051e529" alt=""><figcaption></figcaption></figure></div>

4\. Details of the field can be found below.

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FjNCzlW2JzBFEdW8UnRyZ%2Fimage.png?alt=media&#x26;token=53a8889a-5826-4cb5-bf5b-7d8a36fb3fc6" alt=""><figcaption></figcaption></figure></div>

## Introduction Fields

These fields are common to all output options.

* **Icon**: Select the icon of the widget
* **Title**: Write the title of the widget
* **Group By**: Select the type of device which aggregates the data based on the specified type
* **Output**: Select the display option (charts, table, summary) for your data
* **Filter**: Filter your data using the field. Click on **Pen**.

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FUCu5UAAk979deqeYmbE5%2Fimage.png?alt=media&#x26;token=c662ff6f-47eb-441b-95e5-eb6bbd7f1a50" alt=""><figcaption></figcaption></figure></div>

## Date & Forecast

These fields are common to all output options.

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FAHJfw8zIAis9sKLhcZey%2Fimage.png?alt=media&#x26;token=1e6b2d68-a622-4ec4-b674-60d46cf93892" alt=""><figcaption></figcaption></figure></div>

* **Date**: Select the date range of the widget
* **Forecast**: Select the forecasting time. Can be disabled
* **Time Zone**: Select a time zone from the list
* **Aggregation**: Select the type of aggregation, i.e. `sum`, `avg`, `max`, `min`, `first`, or `last`. Can be disabled
* **Aggregation Interval**: Select the interval for aggregation

## Chart

These fields are displayed when one of the following chart types is selected

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FChBcgmo08TtLAuZ50KLn%2Fimage.png?alt=media&#x26;token=f3652268-be8d-4b12-9e06-d67caed39602" alt=""><figcaption></figcaption></figure></div>

* **Legend Position**: Select the legend position: *table*, *left*, *right*, *top*, or *bottom*. Can be disabled
* **Tooltip Interaction**: Select the tooltip interaction: *index* or *point*. Can be disabled
* **Size**: Select the size of the chart. Adjusts the zoom level
* **Order Direction**: Select the ordering direction: *ascending* or *descending*
* **Top Rows**: Select the number of rows you want to display

## Data Table

These fields are displayed when one of the following datatables is selected.

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FZviXvDYuxUyXyTmFyX2l%2Fimage.png?alt=media&#x26;token=cb0d4c68-e063-44bb-a179-9988cbe97756" alt=""><figcaption></figcaption></figure></div>

* **Time series**: *true* or *false*. If *true*, date will be displayed
* **Show Links**: *true* or *false*
* **Mode**: *basic*, *advanced*, or *log content*
* **Live Update**: *true* or *false*

5\. After updating the fields, you have to click on **Save Query**.

<div align="center"><figure><img src="https://3741708824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhbshAPk7P4wdrLxisUn%2Fuploads%2FZRjdWd3ZC1jbYArDAvUQ%2Fimage.png?alt=media&#x26;token=383035a0-f3bb-4f43-9e2a-d53ab366cba0" alt=""><figcaption></figcaption></figure></div>
