Estou enfretando um problema no bloco HTML usando um grafico de linha, pois quando o dashBoard atualiza, ele fica renderizando um grafico abaixo do outro! Segue o codigo javaScript abaixo.
**** Custom Head Content ****
**** Custom Body Content ****
**** ****Olá, Bryan!!
Infelizmente seu código não ficou visível na postagem, não conseguimos avaliar.
Isto porque a página do fórum “interpretou” seu código e não postou ele em texto puro.
Fica a dica para quem for postar códigos, sejam html ou JavaScript, por exemplo:
Para postar o texto de códigos, usem a ferramenta do editor conforme abaixo
Assim, a postagem ignora todos os caracteres especiais e posta uma janela de código conforme a seguir:
digite ou cole o código aqui
Codigo do Grafico
#chart{
background:#ffffff;
}
src=“https://cdn.jsdelivr.net/npm/apexcharts”
function convertUTCtoBrasiliaTime(utcTimeISO8601) {
var dataHoraUTC = new Date(utcTimeISO8601);
dataHoraUTC.setUTCHours(dataHoraUTC.getUTCHours() - 3);
return dataHoraUTC.toISOString().slice(11, 16);
}
function blockRender() {
var dataTime = [];
var aux1 = [];
var aux2 = [];
var aux3 = [];
var chart;
for (var i = 0; i < DashboardBlock.input.queries.aux1.length; i++) {
var timeISO8601 = DashboardBlock.input.queries.aux1[i].time;
var horaMinutoFormatado = convertUTCtoBrasiliaTime(timeISO8601);
dataTime.push(horaMinutoFormatado);
aux1.push(DashboardBlock.input.queries.aux1[i].value);
aux2.push(DashboardBlock.input.queries.aux2[i].value);
aux3.push(DashboardBlock.input.queries.aux3[i].value);
}
var options = {
series: [
{
name: "Corrente Fase 1",
data: aux1
},
{
name: "Corrente Fase 2",
data: aux2
},
{
name: "Corrente Fase 3",
data: aux3
}
],
chart: {
width:'95%',
height:'90%',
type: 'line',
toolbar: {
show: true
}
},
colors: ['#fc0303', '#1c2bff','#fca503'],
stroke: {
curve: 'smooth',
width:1
},
title: {
text: 'Correntes de fases',
align: 'left'
},
markers: {
size: 3
},
xaxis: {
categories: dataTime,
},
yaxis: {
labels: {
formatter: function (value) {
return parseFloat(value).toFixed(1);
}
}
},
legend: {
position: 'top',
horizontalAlign: 'center',
floating: true,
offsetY: -25,
offsetX: 0
},
};
chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
}
DashboardBlock.on('change', blockRender);
div id=“chart”></div
Boa tarde, Bryan!
Muito boa esta biblioteca para gerar gráficos em um Bloco Custom HTML!
Infelizmente seu código ainda não está acessível.
Está fragmentado, mas consegui juntar as partes e montar aqui o Custom HTML.
Para mim, inicialmente funcionou normalmente.
Achei que era algo relacionado à altura do bloco.
Até montei dois blocos com alturas diferentes e ambas ficaram OK.
Mas depois de um tempo notei que, às vezes, depois de sair da edição do bloco, ele aparecia duplicado
Mas isto era somente no “ambiente de edição”, porque, ao criar o acesso à UX, não ocorreu mais.
Veja abaixo, após criar o slug.
Atualizei várias vezes e não ocorreu a duplicidade
Abaixo vou postar como montei o bloco.
1- Custom HTML
2 - Criadas 3 queries de Time series
3 - Parte superior no header
4- Body com a div do gráfico.
Outra observação importante foi que eu mantive os links padrões do bloco antes de inserir seu código.
Veja que, com o link para o bootstrap, meu bloco “se ajustou” melhor e automaticamente:
Sem o link para o bootstrap, já começaram a aparecer barras de rolagem e meu gráfico já não se adequou tão bem, veja:
