# Data

## Graphic config

### Type graphic

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-8c1f7419052e4010b001f9cf6f36c4bce4998428%2Fimage.png?alt=media)

Permite seleccionar la apariencia de nuestra grafica hasta en 5 modelos distintos:

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-72d5fc5ca404944e80a37d6793463dd67fbaba02%2Fimage.png?alt=media)

| Tipo de grafica |                                                                                                   Vista previa                                                                                                  |
| :-------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|    Line Chart   | ![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-0855d2b70b5507ea971874fbae1559019879f664%2Fimage.png?alt=media) |
|   Bezier Chart  | ![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-b025d86bd05e01237554e858ffa8140a43cbf489%2Fimage.png?alt=media) |
|    Bar Chart    | ![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-c3e16fb9ada9a9d1f2f8d6daadd73614ddd1afde%2Fimage.png?alt=media) |
|  Progress Chart | ![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-c71d5bb5f231c5a211ed8b90ebe20fa150dc165f%2Fimage.png?alt=media) |
|    Pie Chart    | ![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-be0d573574c889057cf60a7472ec8600a643c2ca%2Fimage.png?alt=media) |

### Labels

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-d2612809406359aff40570b821a06e669409af62%2Fimage.png?alt=media)

En esta propiedad podemos agregar etiquetas identificadoras de los valores cuantitativos de forma estática

Las etiquetas son colocados con interlineado después de ingresar una etiqueta

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-0563d7c73a16fbee4bd138231109fe8088613b37%2Fimage.png?alt=media)

{% hint style="info" %}
La posición de las etiquetan dependen directamente del tipo de grafica que se elije

En la parte inferior en las siguientes graficas

1. Line Chart
2. Bezier Chart
3. Bar Chart

En la parte lateral derecha en las siguientes graficas

1. Progress Chart
2. Pie Chart
   {% endhint %}

### Data

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-10430d012a5c10a65be1f608b096da86e888cea7%2Fimage.png?alt=media)

Permite agregar la información cuantitativa que se desea graficar de forma estática

Los valores son colocados con interlineado después de ingresar un valor

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-d9477c6d2311448b84f9206958064380f9cb429d%2Fimage.png?alt=media)

{% hint style="warning" %}
El numero de valores debe coincidir con el numero de etiquetas agregadas
{% endhint %}

### Colors

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-37874d7a77c0fc053a71b9cce28af98afcd1baa3%2Fimage.png?alt=media)

Esta propiedad permite agregar colores a los segmentos de la grafica Pie Chart, el numero de colores debe ser equivalente al numero de datos que se van a mostrar en la grafica

Los valores son colocados con interlineado después de ingresar un valor

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-7e654a4da29490a23de5357c941d90247d2cd9ab%2Fimage.png?alt=media)

{% hint style="warning" %}
El nombre de los colores se debe de ingresar en ingles
{% endhint %}

{% hint style="danger" %}
Esta propiedad **Colors** solamente está disponible para la grafica de Pie Chart
{% endhint %}

### Enable dynamic loading

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-0e8062e95e1b2e25b2bd8d4615cec619e64e9207%2Fimage.png?alt=media)

Funciona para dar apariencia de cargado al elemento [ver más](https://docs.apphive.io/global-functions/data/enable-dynamic-loading)

### Control is hidden

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-08b014c2e5910c2b632316c493fcf2154efdbf23%2Fimage.png?alt=media)

Oculta los controles cuando se activa [ver más](https://docs.apphive.io/global-functions/data/control-is-hidden)

### Prop value

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-876a839cfa6ec53cb923b05036a8026e5f88053d%2Fimage.png?alt=media)

Con esta propiedad podemos elegir de forma estática el nombre del campo dentro de la base de datos de donde se sacarán de forma dinámica los valores que se van a graficar

### Prop label

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-0f84093423b133e4d1d6e24c99c7ead43b3f222a%2Fimage.png?alt=media)

Con esta propiedad podemos elegir de forma estática el nombre del campo dentro de la base de datos de donde se sacarán de forma dinámica las etiquetas que se van a graficar

{% hint style="info" %}
Estas dos propiedades solamente funcionarán cuando se ingrese información de forma dinámica o de una base de datos
{% endhint %}