Passar array para data do Charts.js

[sergio.costa]

Boas pessoal,

Estou a criar dentro de um HTML um gráfico com dados recebidos em JSON de um XmlHttpRequest.

    ajax.onreadystatechange = function () {
        //Validar Comunicação
        if (ajax.readyState == 4 && ajax.status == 200) {

            //console.log(ajax.response);
            Dados = ajax.response;
            Desenhar_Grafico(Dados, Local);

        } else {
            //Visualizar possivel erro

        };
    }

 

Quando chamo a função "Desenhar_Grafico" passo os dados recebidos e o canvas para desenhar o grafico.

Dentro da função separo os dados em array...

function Desenhar_Grafico(Dados, Local) {
    //Instanciar Local de Desenho do Grafico
    var Area = document.getElementById(Local.id).getContext("2d");

    //Tratar dados
    console.log(Dados);

    //Dimensionar Variaveis Array
    var Temperatura_Acumulador = [];
    var Temperatura_Painel = [];
    var Temperatura_Recuperador = [];
    var Etiquetas = [];

    //Separar Valores
    for (let i = 0; i < Dados.length; i++) {
        Temperatura_Acumulador[i] = parseFloat(Dados[i].Temperatura_Acumulador);
        Temperatura_Painel[i] = parseFloat(Dados[i].Temperatura_Painel);
        Temperatura_Recuperador[i] = parseFloat(Dados[i].Temperatura_Recuperador);
        Etiquetas[i] = Dados[i].Data
    }
    //Mostrar Resultado
    console.log(Temperatura_Acumulador);
    console.log(Temperatura_Painel);
    console.log(Temperatura_Recuperador);

    //Função de Desenho
    let Grafico = new Chart(Area, {

        type: 'line',
        data: {
            labels: [Etiquetas],
            datasets: [
                //Linha do Acumulador
                {
                    label: 'Acumulador',    //Dados
                    data: Temperatura_Acumulador,
                    fill: false,
                    backgroundColor: 'blue',
                    borderColor: 'blue',
                    tension: 0.1
                },
                //Linha do Painel
                // {
                //label: 'Painel',    //Dados
                //data: Temperatura_Painel,
                //fill: false,
                //backgroundColor: 'red',
                //borderColor: 'red',
                //tension: 0.1
                //},
                //Linha do Painel
                //{
                //label: 'Recuperador',    //Dados
                //data: Temperatura_Recuperador,
                //fill: false,
                //backgroundColor: 'green',
                //borderColor: 'green',
                //tension: 0.1
                //}

            ]
        },
        options: {}

    });
}

Quando começo a definir o grafico passo o array "Temperatura_Acumulador" e ai e que esta o problema. O browser desenha o grafico mas apenas representa o primeiro valor do array.

Certamente há algum erro no codigo, mas ja estou ha dois dias a olhar pra isto e não o encontro, ou então estarei a usar algum metodo de forma errada.

Como sou um principiante em javascript gostaria de vos pedir ajuda para resolver este problema.

Desde já muito obrigado

Sergio Costa

[Zex]

Em vez de 

labels: [Etiquetas],

deve estar 

labels: Etiquetas,

[sergio.costa]

Muito Obrigado Zex...

Funcionou.