O componente Graph é um elemento essencial na criação de páginas web, oferecendo a capacidade de incorporar gráficos visuais em seu template. Esses gráficos são recursos poderosos para representar dados de maneira visualmente impactante e informativa. Com a ferramenta Graph, você tem a flexibilidade de escolher entre diferentes tipos de gráficos, como barras, linhas, pizza entre outros, permitindo adaptar a apresentação conforme a natureza dos dados que deseja comunicar. Além disso, a capacidade de personalizar a aparência e as configurações do gráfico conforme necessário torna essa funcionalidade valiosa para criar páginas web envolventes e informativas, alinhadas com as preferências e requisitos específicos do seu projeto.
Os gráficos no nocode foram construídos com base na API chamada chart.js. Ao visitar o site https://www.chartjs.org/, você pode explorar uma variedade de exemplos, conjuntos de dados, opções de configuração, personalização de estilos e uma ampla gama de funcionalidades adicionais relacionadas aos gráficos.
Para obter mais informações sobre a utilização do componente de Graph, acesse o vídeo explicativo em: https://www.youtube.com/watch?v=XVvX8m6qjnc.

Localização #
O componente Graph se encontra dentro de WebCompoents conforme ilustrado abaixo:

Propriedades #
Basic #
As propriedades básicas do componente Graph referem-se ao tipo de gráfico, proporcionando a opção de escolher entre 8 tipos distintos.
Bar #

Ao optar pelo tipo “Bar”, será gerado um gráfico de barras que fornece uma maneira de mostrar valores de dados representados como barras verticais.
Bubble #

Ao selecionar o tipo “Bubble”, um gráfico de bolhas será gerado, permitindo a exibição de três dimensões de dados simultaneamente. A posição de cada bolha é determinada pelas duas primeiras dimensões, representadas pelos eixos horizontal e vertical. Já a terceira dimensão é refletida pelo tamanho das bolhas individuais.
Doughnut #

Ao optar pelo tipo “Doughnut”, um gráfico de rosquinha será gerado. Esse gráfico é dividido em segmentos, onde cada segmento representa o valor proporcional de um dado específico. O arco de cada segmento mostra essa proporção dentro do gráfico.
Line #

Ao optar pelo tipo “Line”, um gráfico de linha será gerado, esse gráfico é uma forma de plotar pontos de dados em uma linha.
Mixed #

Ao selecionar o tipo “Mixed”, um gráfico misto será gerado, o qual combina dois ou mais tipos de gráficos diferentes em uma única representação. Um exemplo comum é um gráfico de barras que também inclui um conjunto de dados de linha.
Polar Area #

Ao selecionar o tipo “Polar Area”, um gráfico de área polar será gerado, os gráficos de área polar são semelhantes aos gráficos de pizza, mas cada segmento tem o mesmo ângulo sendo que o raio do segmento difere dependendo do valor.
Radar #

Ao selecionar o tipo “Radar”, um gráfico radar será gerado, esse gráfico é uma forma de mostrar vários pontos de dados e a variação entre eles.
Scatter #

Ao selecionar o tipo “Scatter”, um gráfico de dispersão será gerado, esses gráficos são baseados em gráficos de linhas básicos com o eixo x alterado para um eixo linear.
Params #
As propriedades de parâmetros do componente Graph, abrangendo os tipos bar, doughnut, line, mixer, polar, area e radar, incluem options, datasets, box-size e labels. A opção options refere-se à configuração desejada para o gráfico, enquanto datasets diz respeito ao conjunto de dados que serão utilizados na construção dos gráficos. Por sua vez, labels corresponde aos rótulos atribuídos a cada tipo de gráfico, além do box-size, que define o tamanho dos gráficos. Essa estrutura oferece a flexibilidade necessária para incluir novos parâmetros conforme necessário.

Enquanto as propriedades de parâmetros do componente Graph, abrangendo os tipos Bubble e Scatter, incluem options, datasets, box-size. A opção options refere-se à configuração desejada para o gráfico, enquanto datasets diz respeito ao conjunto de dados que serão utilizados na construção dos gráficos. Por sua vez, box-size corresponde ao tamanho dos gráficos. Essa estrutura oferece a flexibilidade necessária para incluir novos parâmetros conforme necessário.
