Gráfico não insere informações no local correto

rm08 · Março 20, 2020, 5:31pm

Estou puxando dados do BD mas não esta aparecendo no gráfico nos campos de data correto, alguém pode dar uma olhada no meu código ver onde estou errando… vou deixar algumas imagens

---------------- explicação ----------------

O grafico é criado por 3 coisas que vem do select: Data, que é sempre o dia anterior sysdate -1… Ativo: que é por exemplo (MOTO,CARRO,CAMINHÃO) que foi usado nessa Data QTDE_HORAS: que é a quantidade de horas que cada ativo ficou em “uso”. na Data também…

---------------- explicação ----------------

Ele está mostrando no grafico, ele puxa a data e coloca em baixo do gráfico conforme a imagem, também separa os ativos por cores, só não está Inserindo essas informações no gráfico corretamente…

Alguém pode dar uma revisada já tentei diversas formas, acho que estou deixando passar algo sem perceber

Segue o codigo:

var aLabels =[];
var qtdDatas=0;
var dados = [];
var ativos =[];
var qtdAtivos=6;
var cont=6;

var data = [];
var ativo = [];
var aproveitamento = [];

var valordados =[];

<struts_logic:iterate id="arrExecute" name="collExecuteList1" scope="page" type="java.util.ArrayList">

    //Vetor de labels (informação abaixo das barras)
    if( !aLabels.includes("<%=arrExecute.get(0).toString()%>") ){    
        qtdDatas = aLabels.push("<%=arrExecute.get(0).toString()%>");
    }
    if( !ativos.includes("<%=arrExecute.get(1).toString()%>") ){    
        qtdAtivos = ativos.push("<%=arrExecute.get(1).toString()%>");            
    }


    data[cont]="<%=arrExecute.get(0).toString()%>";
    ativo[cont]="<%=arrExecute.get(1).toString()%>";        
    aproveitamento[cont]="<%=(arrExecute.get(2).toString().replaceAll(",", "."))%>";
    cont++;
    
</struts_logic:iterate>

var BarraApro =[];    
var aDataset1 =[];
 

for (var i=0;i < qtdAtivos;i++){    
    for( var t=cont; t >= qtdAtivos;t--){
        if( (ativos[i] == ativo[t]) ){    
            if (BarraApro[i] == [t]){                     
                BarraApro[i] = Number(aproveitamento[t]);                   
            } else {
                BarraApro[i] = BarraApro[i] +", "+ Number(aproveitamento[t]);   
            }                
        }
    
    } 
        
    aDataset1.push( {
      type: "bar",
      label: ativos[i],
      backgroundColor: cores[i],
      data: BarraApro[i].split(',').map(parseFloat),
      borderColor: "white",
      borderWidth: 2
    },)
    }
             
var chartData = {                    
    labels: aLabels,                    
    datasets: aDataset1
};                

  Chart.defaults.global.defaultFontColor = 'black';
window.onload = function() {
              var ctx = document.getElementById("canvas").getContext("2d");
              window.myMixedChart = new Chart(ctx, {
                type: "bar",
                data: chartData,
                options: {
                  responsive: false,
                  title: {
                    display: true,
                    text: "Horas Produtivas (h/dia)"                                                  
                  },
                    
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                // Include a dollar sign in the ticks
                                callback: function(value, index, values) {
                                    return value + 'h' ;
                                }
                            }
                        }]
                    },
                  tooltips: {
                    enabled: false,
                    mode: "index",
                    intersect: true
                  },
                    animation: {
                        onComplete: function () {
                            var ctx = this.chart.ctx;
                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                            ctx.fillStyle = "black";
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';

                            this.data.datasets.forEach(function (dataset)
                            {
                                for (var i = 0; i < dataset.data.length; i++) {
                                    for(var key in dataset._meta)
                                    {
                                        var model = dataset._meta[key].data[i]._model;
                                        ctx.fillText(dataset.data[i], model.x, model.y - 5);
                                    }
                                }
                            });
                        }
                      },
                  annotation: {
                    events: ["click"],
                    annotations: [
                      {
                        drawTime: "afterDatasetsDraw",
                        id: "facaline",
                        type: "line",
                        mode: "horizontal",
                        scaleID: "y-axis-0",
                        value: 7.2,
                        borderColor: "orange",
                        borderWidth: 2,
                        label: {
                          backgroundColor: "orange",
                          content: "Méta 7,2h/dia",
                          enabled: true,
                          position: "right",
                          xAdjust: 20,
                        }
                      }            
                      
                    ]
                  }
                }
              });
            };

gbuenoo · Março 20, 2020, 8:06pm

cara… desculpe-me, eu realmente não consegui entender qual o problema.

Mas, analisando o código, me surgiu uma duvida:

var aLabels =[];
var qtdDatas=0;
var dados = [];
var ativos =[];
var qtdAtivos=6;
var cont=6;

var data = [];
var ativo = [];
var aproveitamento = [];

var valordados =[];

<struts_logic:iterate id="arrExecute" name="collExecuteList1" scope="page" type="java.util.ArrayList">

    //Vetor de labels (informação abaixo das barras)
    if( !aLabels.includes("<%=arrExecute.get(0).toString()%>") ){    
        qtdDatas = aLabels.push("<%=arrExecute.get(0).toString()%>");
    }
    if( !ativos.includes("<%=arrExecute.get(1).toString()%>") ){    
        qtdAtivos = ativos.push("<%=arrExecute.get(1).toString()%>");            
    }


    data[cont]="<%=arrExecute.get(0).toString()%>";
    ativo[cont]="<%=arrExecute.get(1).toString()%>";        
    aproveitamento[cont]="<%=(arrExecute.get(2).toString().replaceAll(",", "."))%>";
    cont++;
    
</struts_logic:iterate>

Você atribuiu o valor 6 a variavel cont, e nas iterações do array você atribui valores em data, ativo e aproveitamento se baseando no valor de cont e ao final, realiza um incremento em cont. E depois, encadeia For’s para montagem do Dataset do grafico.

Pq não inicializou cont com o valor 0 e foi atribuindo valores e incrementando até chegar a sua quantidade de ativos? Em minha opinião, isso fica menos confuso e te possibilitaria acessar os dados dos 3 array’s, utilizando a variável i do seu primeiro for.
Não me fez sentido o encadeamento de For’s.

gbuenoo · Março 20, 2020, 8:17pm

Isso deve te causar um erro quando sua condicional atribuir Number(aproveitamento[t]), não ?

Pode enviar uma imagem do console do navegador também?

rm08 · Março 20, 2020, 8:25pm

Calma ai amigo agradeço vou tentar do jeito que me falou

rm08 · Março 20, 2020, 8:27pm

na verdade estou tentando fazer o que você disse kkk vou demorar um pouquinho para passar desse jeito mas vou tentar ai retorno

rm08 · Março 20, 2020, 9:18pm

sim, Uncaught TypeError: BarraApro[i].split is not a function
retorna isso no console

gbuenoo · Março 20, 2020, 9:50pm

É imaginei… .split() é uma função de String, logo não funcionaria em Number.

 if (BarraApro[i] == [t]){                     
                BarraApro[i] = Number(aproveitamento[t]);                   
            } else {
                BarraApro[i] = BarraApro[i] +", "+ Number(aproveitamento[t]);   
            }

Isso me parece muito com ChartJs e no Dataset, Data é um array. Então, pq não faz um .push do seu valor em BarraApro ??

Cara… esse codigo tá muito confuso pra mim. Vou tentar fazer uma implementação semelhante com ChartJs, pra ver se entendo o que ocorre e poder te ajudar melhor.

rm08 · Março 20, 2020, 9:52pm

é sim ChartJs, fiz o .push retornou certinho todos os dados só não aparece nos gráfico

[Album] Imgur

gbuenoo · Março 20, 2020, 10:32pm

Cara, eu consegui montar algo aqui. Acho que você terá que modificar um pouco a logica do seu código.

        var aLabels =["01/12/19", "02/12/19", "03/12/19" ];
        var ativos =["74100", "72797", "74100", "90033"];
        var aproveitamento = [ [5.21, 3.75, 5.46], [3.21, 0, 2.7], [10, 15.2, 5.46] ];
        var cores = ["#f1f1f1", "#000", "#32a852", "#7a1177", "#e378e0", "#0024ed"]
        
        var chartData = {                    
            labels: aLabels,                    
            datasets: []
        };     

        for (var i=0;i < ativos.length;i++){
            chartData.datasets.push( {
                type: "bar",
                label: ativos[i],
                backgroundColor: cores[i],
                data: aproveitamento[i],
                borderColor: "white",
                borderWidth: 2
            })
        }

rm08 · Março 21, 2020, 12:34pm

vou tentar passar desse jeito consultando o bd, retorno com mais informações… Obrigado

rm08 · Março 21, 2020, 1:10pm

[Album] Imgur

ainda não amigo, ele até pega os dados mas ele ta salvando errado no array,
o primeiro ativo 74100, ele tem apenas dois dados na consulta 5,21 e 5,46…
como você pode ver a imagem la em cima que postei do BD
e ai esta passando nos dias errado também, ele ta pegando por sequencia

gbuenoo · Março 21, 2020, 4:08pm

Como vc retorna esses dados do DB ? Através de uma API?
Você está plotando o gráfico para 6 elementos em datas diversas. Quando você busca esses dados, você considera que se não tem nenhuma entrada na data X para um elemento Y, seu valor de aproveitamento para ele é <= 0 ?
Se sim, esse valor zero é inserido no Array de dados do dataset?

rm08 · Março 21, 2020, 4:57pm

    if( !aLabels.includes("<%=arrExecute.get(0).toString()%>") ){    
        qtdDatas = aLabels.push("<%=arrExecute.get(0).toString()%>");
    }
    if( !ativos.includes("<%=arrExecute.get(1).toString()%>") ){    
        qtdAtivos = ativos.push("<%=arrExecute.get(1).toString()%>");            
    }
    if( !aprov.includes("<%=arrExecute.get(2).toString()%>") ){    
        aproveitamento = aprov.push("<%=arrExecute.get(2).toString()%>");            
    }

onde eu pego os dados da DB

eu fiz uns for meio louco aqui, até consegui retornar 2 ativos nas datas corretas, mas quando faço mais ele buga, segue a script

var aLabels =[];
var qtdDatas=0;
var dados = [];
var ativos =[];
var qtdAtivos=0;
var cont=0;

var data = [];
var ativo = [];
var aproveitamento = 0;
var aprov = [];

<struts_logic:iterate id="arrExecute" name="collExecuteList1" scope="page" type="java.util.ArrayList">

    //Vetor de labels (informação abaixo das barras)
    if( !aLabels.includes("<%=arrExecute.get(0).toString()%>") ){    
        qtdDatas = aLabels.push("<%=arrExecute.get(0).toString()%>");
    }
    if( !ativos.includes("<%=arrExecute.get(1).toString()%>") ){    
        qtdAtivos = ativos.push("<%=arrExecute.get(1).toString()%>");            
    }
    if( !aprov.includes("<%=arrExecute.get(2).toString()%>") ){    
        aproveitamento = aprov.push("<%=arrExecute.get(2).toString()%>");            
    }       
    cont++;
    
</struts_logic:iterate>

var BarraApro = aprov;    
var aDataset1 =[]; 

  for (var i=0;i < qtdDatas;i++){   
    for( var j=6; j >= 0;j--){
         if( (ativos[i] == qtdAtivos[j]) ){    
            if (BarraApro[i] == 0){                     
                BarraApro[i] = Number(aprov[i]);                   
            } else {                                     
                BarraApro[i] = BarraApro[i] + Number(aprov[i]);   
            } 
        }                       
    }

    aDataset1.push( {
      type: "bar",
      label: ativos[i],
      backgroundColor: cores[i],
      data: BarraApro[i].split(',').map(parseFloat),
      borderColor: "white",
      borderWidth: 2
    },)
console.log(aDataset1);
}
var chartData = {                    
    labels: aLabels,                    
    datasets: aDataset1
};                

  Chart.defaults.global.defaultFontColor = 'black';
window.onload = function() {
              var ctx = document.getElementById("canvas").getContext("2d");
              window.myMixedChart = new Chart(ctx, {
                type: "bar",
                data: chartData,
                options: {
                  responsive: false,
                  title: {
                    display: true,
                    text: "Horas Produtivas (h/dia)"                                                  
                  },
                    
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                // Include a dollar sign in the ticks
                                callback: function(value, index, values) {
                                    return value + 'h' ;
                                }
                            }
                        }]
                    },
                  tooltips: {
                    enabled: false,
                    mode: "index",
                    intersect: true
                  },
                    animation: {
                        onComplete: function () {
                            var ctx = this.chart.ctx;
                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                            ctx.fillStyle = "black";
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';

                            this.data.datasets.forEach(function (dataset)
                            {
                                for (var i = 0; i < dataset.data.length; i++) {
                                    for(var key in dataset._meta)
                                    {
                                        var model = dataset._meta[key].data[i]._model;
                                        ctx.fillText(dataset.data[i], model.x, model.y - 5);
                                    }
                                }
                            });
                        }
                      },
                  annotation: {
                    events: ["click"],
                    annotations: [
                      {
                        drawTime: "afterDatasetsDraw",
                        id: "facaline",
                        type: "line",
                        mode: "horizontal",
                        scaleID: "y-axis-0",
                        value: 7.2,
                        borderColor: "orange",
                        borderWidth: 2,
                        label: {
                          backgroundColor: "orange",
                          content: "Méta 7,2h/dia",
                          enabled: true,
                          position: "right",
                          xAdjust: 20,
                        }
                      }            
                      
                    ]
                  }
                }
              });
            console.log(chartData)};

Gráfico não insere informações no local correto

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI