Gráficos

A API de Gráficos permite criar uma visualização instantânea dos seus dados. O gráfico é exibido corretamente em todos os navegadores modernos e dispositivos móveis. O gráfico também pode mostrar dados dinâmicos carregando novos dados automaticamente.

Use a API de Gráficos para apresentar dados numéricos armazenados em Canais em gráficos. Os tipos de gráfico suportados são linha, barra, coluna, spline e step. As opções incluem tamanho, cor e rótulos.

Criando um Gráfico

Para criar um gráfico, abra a seguinte URL, substituindo CHANNEL_ID e FIELD_ID pelos valores de um dos seus Canais. 

thingspeak.nextcon.comchannels/CHANNEL_ID/charts/FIELD_ID

Parâmetros válidos do gráfico:
  • title (string) Título do gráfico, padrão: nome do Canal (opcional)
  • xaxis (string) Rótulo do eixo x do gráfico, padrão: "Data" (opcional)
  • yaxis (string) Rótulo do eixo y do gráfico, padrão: nome do campo (opcional)
  • color (string) Cor da linha, padrão: vermelho (opcional)
  • bgcolor (string) Cor de fundo, padrão: branco (opcional)
  • type (line/bar/column/spline) Tipo de gráfico, padrão: line (opcional)
  • width (integer) Largura do gráfico em pixels, a largura do iframe será 20px maior, largura padrão do gráfico: 400. Defina como auto para ajustar automaticamente o tamanho do gráfico com base no contêiner pai. (opcional)
  • height (integer) Altura do gráfico em pixels, a altura do iframe será 20px maior, altura padrão do gráfico: 200. Defina como auto para ajustar automaticamente o tamanho do gráfico com base no contêiner pai. (opcional)
  • dynamic (true/false) Faz o gráfico atualizar automaticamente a cada 15 segundos, padrão: false (opcional)
  • step (true/false) Desenha o gráfico como gráfico de degraus, padrão: false (opcional)
  • export (true/false) Exibe botões de exportação para salvar o gráfico como imagem, padrão: false (opcional)
  • yaxismin (decimal) Valor mínimo do eixo Y do gráfico; se em branco, o valor é calculado automaticamente (opcional)
  • yaxismax (decimal) Valor máximo do eixo Y do gráfico; se em branco, o valor é calculado automaticamente (opcional)

Parâmetros válidos do feed:
  • api_key (string) Chave de API de leitura para este Canal específico (opcional — não é necessária chave para canais públicos)
  • results (integer) Número de entradas a recuperar, máximo de 8000, padrão de 100 (opcional)
  • days (integer) Número de períodos de 24 horas antes do momento atual para incluir no feed (opcional)
  • start (datetime) Data de início no formato YYYY-MM-DD%20HH:NN:SS (opcional)
  • end (datetime) Data de término no formato YYYY-MM-DD%20HH:NN:SS (opcional)
  • timezone (string) Identificador de fuso horário para esta solicitação (opcional)
  • offset (integer) Deslocamento de fuso horário em que os resultados devem ser exibidos. Use o parâmetro timezone para maior precisão. (opcional)
  • status (true/false) Incluir atualizações de status no feed definindo "status=true" (opcional)
  • location (true/false) Incluir latitude, longitude e elevação no feed definindo "location=true" (opcional)
  • min (decimal) Valor mínimo a incluir na resposta (opcional)
  • max (decimal) Valor máximo a incluir na resposta (opcional)
  • round (integer) Arredondar para este número de casas decimais (opcional)
  • timescale (integer ou string) Obter o primeiro valor neste intervalo em minutos, valores válidos: 10, 15, 20, 30, 60, 240, 720, 1440, "daily" (opcional)
  • sum (integer ou string) Obter a soma deste intervalo em minutos, valores válidos: 10, 15, 20, 30, 60, 240, 720, 1440, "daily" (opcional)
  • average (integer ou string) Obter a média deste intervalo em minutos, valores válidos: 10, 15, 20, 30, 60, 240, 720, 1440, "daily" (opcional)
  • median (integer ou string) Obter a mediana deste intervalo em minutos, valores válidos: 10, 15, 20, 30, 60, 240, 720, 1440, "daily" (opcional)
Observe que o parâmetro results não é compatível com timescale, sum, average ou median.


Incorporando um Gráfico

Para colocar um Gráfico na sua página web, use a API de Gráficos como origem de um iframe.

Código de Incorporação do Gráfico: 

<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.nextcon.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>


Exemplo de Gráfico:

Incorporando um Gráfico Dinâmico

Para colocar um Gráfico dinâmico na sua página web, use a API de Gráficos como origem de um iframe e adicione o parâmetro do gráfico "dynamic=true".

Código de Incorporação do Gráfico: 

<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.nextcon.com/channels/CHANNEL_ID/charts/FIELD_ID?dynamic=true"></iframe>


Exemplo de Gráfico: