Skip to content

In the chart mix how to pass API request values constant into the afterDraw plugin #549

Open
@adameverson

Description

@adameverson

The problem is getting the value read by the request made to the API, but I've already used the value in options normally, only when it arrives at the plugin it takes a value as if I haven't received anything from the API, as if it weren't a sequential program, apparently it is running the constant plugin even before requesting the API or better without the API request code part, because the API request occurs periodically

    const options = {
        responsive: true,
        labels: ['Janeiro(' + acumuladoJaneiro + ')(' + this.state.janeiroF + ')', 'Fevereiro(' + acumuladoFevereiro + ')(' + acumuladoFevereiroF + ')', 'Marco(' + acumuladoMarco + ')(' + acumuladoMarcoF + ')', 'Abril(' + acumuladoAbril + ')(' + acumuladoAbrilF + ')', 'Maio(' + acumuladoMaio + ')(' + acumuladoMaioF + ')', 'Junho(' + acumuladoJunho + ')(' + acumuladoJunhoF + ')', 'Jullho(' + acumuladoJulho + ')(' + acumuladoJulhoF + ')', 'Agosto(' + acumuladoAgosto + ')(' + acumuladoAgostoF + ')', 'Setembro(' + acumuladoSetembro + ')(' + acumuladoSetembroF + ')', 'Outubro(' + acumuladoOutubro + ')(' + acumuladoOutubroF + ')', 'Novembro(' + acumuladoNovembro + ')(' + acumuladoNovembroF + ')', 'Dezembro(' + acumuladoDezembro + ')(' + acumuladoDezembroF + ')'],
        tooltips: {
            mode: 'label'
        },
        elements: {
            line: {
                fill: false
            }
        },
        scales: {
            xAxes: [
                {
                    display: true,
                    gridLines: {
                        display: false
                    },

                    labels: ['Janeiro(' + acumuladoJaneiro + ')(' + this.state.janeiroF + ')', 'Fevereiro(' + acumuladoFevereiro + ')(' + acumuladoFevereiroF + ')', 'Marco(' + acumuladoMarco + ')(' + acumuladoMarcoF + ')', 'Abril(' + acumuladoAbril + ')(' + acumuladoAbrilF + ')', 'Maio(' + acumuladoMaio + ')(' + acumuladoMaioF + ')', 'Junho(' + acumuladoJunho + ')(' + acumuladoJunhoF + ')', 'Jullho(' + acumuladoJulho + ')(' + acumuladoJulhoF + ')', 'Agosto(' + acumuladoAgosto + ')(' + acumuladoAgostoF + ')', 'Setembro(' + acumuladoSetembro + ')(' + acumuladoSetembroF + ')', 'Outubro(' + acumuladoOutubro + ')(' + acumuladoOutubroF + ')', 'Novembro(' + acumuladoNovembro + ')(' + acumuladoNovembroF + ')', 'Dezembro(' + acumuladoDezembro + ')(' + acumuladoDezembroF + ')']
                }
            ],
            yAxes: [
                {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                    gridLines: {
                        display: false
                    },
                    labels: {
                        show: true
                    }
                },
                {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        display: false
                    },
                    labels: {
                        show: true
                    }
                }
            ]
        }
    };

    const exempleConst = Math.round(this.state.fevereiro)
    const exempleConst2 = exempleConst + 2
    const percentagemJaneiro = Math.round(((this.state.janeiroF + (acumuladoJaneiro ? 0 : 1)) / (acumuladoJaneiro ? acumuladoJaneiro : 1)) * 100)
    const percentagemMarco = Math.round(((acumuladoMarcoF + (acumuladoMarco ? 0 : 1)) / (acumuladoMarco ? acumuladoMarco : 1)) * 100)

    const plugins = [
        {
            afterDraw: (chartInstance, easing) => {
                const { ctx } = chartInstance.chart;
                ctx.fillText(exempleConst2, 300, 500);
                ctx.fillText(percentagemJaneiro - 100 + "%", 75, 500);
                ctx.fillText(acumuladoMarco + "%", 500, 100);
            }
        }
    ];

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions