Graphic does not change even passing data

Asked

Viewed 43 times

1

I’m pulling data from the BD but it’s not appearing on the graph in the correct date fields, someone can take a look at my code see where I’m missing... I’ll leave some images

---------------- explanation ----------------

The chart is created by 3 things that comes from select: Date, which is always the day before sysdate -1... Active: that is for example (MOTO, CAR, TRUCK) that was used in this Date QTDE_HORAS: that is the amount of hours each asset was in "use". in Date also...

---------------- explanation ----------------

Data funcionando corretamente, Ativos pegando todos corretamente, Horas também... mas não está carregando nos dias certos as informações, compare na próxima imagem

Select que está sendo feito e como era para estar no grafico

It’s showing on the chart, it pulls the date and puts down the graph as the image, also separates the assets by colors, only it’s not inserting this information into the chart correctly...

I think I’m missing something

Script:

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
        },)
        }

</script>               


<script>
    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,
                            }
                          }            

                        ]
                      }
                    }
                  });
                };
  • It’s probably a "Promise" problem, try loading the chart after the data is returned. To find out if the data is getting inside the window.onload = () => { ... }, make a console.log(chartData) inside and see what returns in your browser console.

  • https://imgur.com/a/cmAacAt

  • It was to return data in datasets?

  • I changed a little bit, in var Barraapro=[] I passed [aprov] and gave a console log in aDataset1 it is passing all values to an asset only take a look I highlighted https://imgur.com/a/DccjSB8

  • And now you’ve solved the problem?

  • Not kkkkkk I managed to change a little, give a glance the code as it turned https://imgur.com/a/8knKly0 and the graphic https://imgur.com/a/mF6ZCV2 but it has 6 Active, and is only pulling 2 now, but the two that I managed to pull they are showing on the correct date with the correct values, I just don’t know why it ran the be only twice an active pro 74100 and one for the 72797 was to run 4 more times to show the other assets also

  • probably the problem now is in your go...

  • help kk still can’t solve the problem

  • You cannot publish an http://jsfiddle.net/ of what you have so far, so someone can help you, you need to understand the frontend problem, since it is a front issue and not a backend issue. [*]

  • [...] Your question would be more objective if you removed backend content and put the return of your API as your solved output and the question was from the frontend (which seems to be the problem itself, I’m sure?) [..]

  • [..] You can use console.log(JSON.stringify(data)) to pick up the JSON output and copy to the question.

  • As is the graph: https://imgur.com/a/sWZpmwE As it is in the database... https://imgur.com/a/XaRpPbz Follow the javascript code and also select: https://jsfiddle.net/b642pv8n/1/

  • You need to assemble a functional fiddle, you pasted everything anyway, have you ever used the fiddle? In fiddle, the javascript area doesn’t have a tag. You’ve pasted backend code... the idea isn’t to fail everything this way...

  • See a functional example: https://jsfiddle.net/ivanferrer/mg2zv3q9/

  • Sorry Ivan I had not used jsfiddle before, I even understood the way you used the graph, my problem ta in popular the graph with the data coming from the database, my loop of repetition must be wrong so the data is not passing in the correct location of the graph

Show 11 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.