# HMI Charts

**HMI Charts** are [HMI components](https://docs.robpod.cloud/hmi-designer/hmi-components) that can be used to show data in a graphical way. Chart visualization is updated automatically at runtime based on values of linked robot variables.

Supported chart types are: Time series, Bar / Histogram, Pie / Circle, Indicator.

<table data-header-hidden data-full-width="false"><thead><tr><th align="center"></th><th align="center"></th></tr></thead><tbody><tr><td align="center"><img src="https://175138337-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvxlh3prlGsBGF30oqbYW%2Fuploads%2FIYS4VQ2u6iDilILWPTzj%2Fscreenshot.png?alt=media&#x26;token=d68a14de-e1d2-4c84-917c-89de48568795" alt=""></td><td align="center"><img src="https://175138337-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvxlh3prlGsBGF30oqbYW%2Fuploads%2FduHOyd1vITyfKoEWbgem%2Fhmi_chart_monitoring.png?alt=media&#x26;token=d81e2821-8bb8-46e9-89f7-f67671e81b05" alt=""></td></tr></tbody></table>

### Adding a Chart

Charts can be added to a panel using the ![](https://175138337-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvxlh3prlGsBGF30oqbYW%2Fuploads%2FtMHVfrROM58j34J424yf%2Fchart.png?alt=media\&token=1b322c30-5593-48f4-a41a-0281f9cdca75) button inside the [HMI Palette Toolbar](https://docs.robpod.cloud/hmi-designer/user-interface).

Then use the side HMI Component Properties panel to configure the chart and its appearance, like for example the chart type and its colors.

<figure><img src="https://175138337-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvxlh3prlGsBGF30oqbYW%2Fuploads%2FfZOYLSu2WkYX10XxpDEq%2Fhmi-chart.png?alt=media&#x26;token=d4de78b7-63c7-4302-ad37-fbaedf839478" alt=""><figcaption></figcaption></figure>

### Linking a Chart

HMI charts are linked to robot variables using **Chart Data Seires.**

Data series can be added and edited using the side Component Properties panel. Each chart can have any number of data series, and each data series is linked to a **robot variable**, for which name and type must be specified.

Valid linking examples for Universal Robots:

* ```python
  my_variable # user defined variable
  ```
* ```python
  get_standard_digital_in(0) # robot function
  ```
* ```python
  my_function() # user defined function
  ```
* ```python
  x + y # command with return value
  ```

{% tabs %}
{% tab title="Universal Robots" %}
{% embed url="<https://www.youtube.com/watch?v=CkXb3qBov2I>" %}
HMI Chart Tutorial
{% endembed %}
{% endtab %}

{% tab title="Doosan Robotics" %}
{% embed url="<https://youtu.be/fIqPECBnsfE>" %}
HMI Chart Tutorial
{% endembed %}
{% endtab %}
{% endtabs %}

### Exporting Data

When you are connected with the [Remote Desktop Viewer](https://docs.robpod.cloud/hmi-designer/desktop-hmi-viewer) to a running Robpod HMI application, you can export and save chart data.

Right click on the chart, then choose:

* **Save as**, to save the chart as a png or jpeg image
* **Export**, to export data in CSV format.

Images and data will be available on your desktop PC for later usage.

{% embed url="<https://www.youtube.com/watch?v=lxia1HC31-k>" %}
