Fabio Eduardo Argenton

Resolvido, segue exemplo: <script> $(function () { //Variáveis que receberão os dados para popular o gráfico const mes = []; const resultado = []; const target = []; //Dados recebidos do res.render na rota '<% DTResutadoKPIMensal.forEach((row, index) => { %>' mes.push('<%= row.resultado_mensal %>'); resultado.push('<%= row.ila_resultado %>'); //Repete o target para cada bloco '<% DTTargets.forEach((row, index) => { %>' target.push('<%= row.ila_target %>'); '<% }); %>' '<% }); %>' //Define a cor baseado no resultado vs target const bordercolor = []; const backgroundcolor = []; for (let i = 0; i < resultado.length; i++) { if (resultado[i] >= target[0] || resultado[i] >= 100) { //Dentro do target bordercolor.push('"#385E9B"') backgroundcolor.push('rgba(56,94,155, 0.7)') } else{ //Abaixo do target bordercolor.push('#9b385e') backgroundcolor.push('rgba(155,56,94, 0.7)') } } //Line chart definido no canvas da página //var ctx = document.getElementById('tempo_stage_recebimento').getContext('2d'); var canvas = document.getElementById('ila_mensal'); var ctx = canvas.getContext("2d"); var myChart = new Chart(ctx, { plugins: [ChartDataLabels], type: 'bar', data: { labels: mes,//Não esquecer datasets: [ { data: target,//Não esquecer label: "Target", borderColor: "#DB7093",//PaleVioletRed borderDash: [10, 5], fill: false, backgroundColor: "rgba(219,112,147, 0.7)", pointStyle: 'circle', radius: '0', type: 'line', //Rótulo das barras datalabels: { backgroundColor: function (context) { if (context.dataIndex === context.dataset.data.length - 1) { return context.dataset.backgroundColor; } }, formatter: function (value, context) { if (context.dataIndex === context.dataset.data.length - 1) { return value + '%'; } return ""; }, borderRadius: 4, color: 'white', anchor: 'center',//start, center, end (Posição vertical) align: 'right',//start, center, end (Sobreposição dentro da posição vertical) rotation: 0, clamp: true, labels: { title: { font: { weight: 'bold', size: 13 } } } }, }, { data: resultado,//Não esquecer label: "ILA", borderColor: bordercolor, fill: true, backgroundColor: backgroundcolor, pointStyle: 'circle', radius: '4', //Rótulo das barras datalabels: { formatter: function (value, context) { return value + '%'; }, color: '#fff',//Cor anchor: 'start',//start, center, end (Posição vertical) align: 'end',//start, center, end (Sobreposição dentro da posição vertical) rotation: -90, clamp: true, labels: { title: { font: { weight: 'normal', size: 13 } } } }, } ] }, animation: true, options: { maintainAspectRatio: false, responsive: true, title: { display: false, text: 'Qtde' }, legend: { display: false, position: 'bottom', labels: { boxWidth: 15 } }, tooltips: { enabled: true, mode: 'index', intersect: false, displayColors: true, callbacks: { label: function (tooltipItem, data) { var label = data.datasets[tooltipItem.datasetIndex].label || ''; if (label) { label += ': '; } label += tooltipItem.yLabel + '%'; return label; } } }, plugins: { title: { display: true, text: "Graph" }, legend: { display: false, }, }, hover: { mode: 'nearest', intersect: true, }, scales: { xAxes: [{ gridLines: { display: false, drawBorder: true } }], yAxes: [{ display: true, gridLines: { display: true, borderDash: [2], drawBorder: false }, ticks: { min: 0, max: 100, stepSize: 10, scaleStartValue: 0, fontSize: 10, callback: function (value) { return value + "%" } } }] }, }, }); }); </script>

Fala pessoal, preciso de ajuda num gráfico do plugin Chart JS. Possuo um gráfico com dois datasets sendo: Dataset1 “Target” (linha) Dataset2 “Resultado” (barra) Quero fazer uma comparação entre os datasets e colorir a barra na qual o valor do resultado(Dataset2) for menor do que o valor do target(Dataset2), exemplo: Veja que minha linha é o Dataset1 “Target” e possui o valor 95.00 (95%) E minhas barras são os valores do Dataset2 “Resultado” que variam dia a dia. O que quero é: Se o valor do resultado for menor do que o target a barra fica vermelha.

Fala Galera, tenho uma aplicação WEB desenvolvida em NodeJS. No BD o select funciona tudo certinho, na minha aplicação (back-end) o select retorna dados tudo certinho. O problema é que este SELECT em específico possui declaração de variáveis e está retornando no Json da minha aplicação um tal de bloco “ResultSetHeader” ai não consigo popular meus elementos no front-end ao passar o resultado no forEach. Veja como está retornando: Eu acredito que esta retornando esses blocos “ResultSetHeader” pelo motivo de meu select possuir variáveis, pois todos os outros não tenho este problema, aqui está o inicio do meu select: A ajuda que eu preciso é: Como receber o JSon ignorando estes blocos “ResultSetHeader” ? Pois se eu receber do “TextRow” pra baixo que é o que um select simples retorna, funciona perfeitamente, o problema é que é necessário eu manter as variáveis na query, senão não consigo trazer a informação que preciso: