0

Estou desenvolvendo uma aplicação utilizando AngularJS e Highcharts, que:

1- Recupera uma lista de objetos de um Webservice

function getColetorPorSala() {
        webService.getColetores($scope.device, $scope.token).success(function (data) {
            $scope.carregando = false;
            $scope.coletores = data.Coletores;
        });
        console.log("iniciou getColetorPorSala");
    };

    getColetorPorSala();

2- Cria um panel para cada objeto

 <div class="col-md-4" ng-repeat="coletor in coletores">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            {{coletor.Nome}}
                        </div>
                        <div class="panel-body" id="grafico-{{coletor.Codigo}}" data-ng-init="gerarGrafico(coletor.Codigo)">
                            Conteúdo bacana
                        </div>
                        <div class="panel-footer">
                            Alguma coisa legal
                        </div>
                    </div>
                </div>

3- Para cada objeto, recupera uma lista de valores desse WebService e monta um gráfico dentro do panel correspondente a esse objeto

$scope.gerarGrafico = function (idColetor) {
    sismogranAPI.getLeiturasColetor($scope.device, $scope.token, idColetor).success(function (data) {
        console.log("recuperou leituras de " + idColetor);
        $scope.carregando = false;
        montarGrafico(data, false, 'grafico-' + idColetor);
    });
    console.log("iniciou getLeituras para " + idColetor);
};

Problema:

Toda vez que eu crio um gráfico, os pontos do dado criado anteriormente se repetem no novo

Graficos com dados se repetindo

Cada grafico tem seu conjunto de dados distintos, então não faz sentido eles repetirem os pontos dos dados anteriores

Eis aqui o método de criação dos graficos

function montarGrafico(data, isLeituraPorData, idDiv) {
        console.log("iniciou montagenm de grafico para " + idDiv);
        var subtitulo;

        if (isLeituraPorData) {
            subtitulo = "leituras de " + dataInicialSalva + " à " + dataFinalSalva;
        } else {
            subtitulo = '150 últimas leituras';
        }

        var chartConfig = {};
        //Recuperando dados da resposta
        var dados = data.Leituras;

        //Organiza dados em hashMap organizados por grandeza
        for (var i = 0; i < dados.length; i++) {
            var leitura = dados[i];
            var listaLeituras = getListaDeLeiturasNoHashMap(leitura.Sensor.Nome);
            listaLeituras.push(leitura);
        }

        //Seta as configurações do gráfico
        chartConfig.chart = {
            renderTo: idDiv,
            type: 'spline',
            zoomType: 'x',
            spacingRight: 20
        };
        chartConfig.title = {
            text: ""
        };
        chartConfig.subtitle = {
            text: ""
        };
        chartConfig.xAxis = {
            type: 'datetime',
            // maxZoom: 60 * 1000,
            title: {
                text: "Horario"
            }
        };
        chartConfig.yAxis = {
            title: {
                text: 'Valores'
            },
            showFirstLabel: true,
            plotBands: [],
            labels: {
                fontSize: '15px'
            }
        };
        chartConfig.tooltip = {
            crosshairs: [true, true],
            shared: true
        };
        chartConfig.legend = {
            enabled: true
        };

        chartConfig.series = [];

        chartConfig.plotOptions = {
            series: {
                turboThreshold: 999999999 
            }
        };

        for (var i = 0; i < leiturasHashMap.length; i++) {

            var band = { 
                chartConfig.chart = {
                from: leiturasHashMap[i].leituras[0].Minimo,
                to: leiturasHashMap[i].leituras[0].Maximo,
                color: 'rgba(68, 170, 213, 0.30)',
                label: {
                    text: 'Faixa de ' + leiturasHashMap[i].tipo,
                    style: {
                        color: '#606060'
                    }
                }
            };

            chartConfig.yAxis.plotBands.push(band);

            var serie = {};
            serie.name = leiturasHashMap[i].tipo;
            serie.marker = {
                radius: 3
            };

            var dataAux = [];

            for (var j = 0; j < leiturasHashMap[i].leituras.length; j++) {
                dataAux.push([stringToDateTime(leiturasHashMap[i].leituras[j].Horario), leiturasHashMap[i].leituras[j].Valor]);
            }

            serie.data = dataAux;

            chartConfig.series.push(serie);
        }
        new Highcharts.Chart(chartConfig);
        console.log("terminou montagenm de grafico para " + idDiv);
    }

Como fazer com que cada grafico só mostre os pontos que lhe pertencem?

5
  • 1
    Tente no início do seu método sempre inicializar novamente as variáveis que você adiciona ao gráfico (leiturasHashMap) e também, limpar sua lista de parâmetros(data) do método antes de passar pra esse método...
    – Dante
    22/11/2016 às 13:57
  • 1
    Veja o que está vindo na variável "data", compare os valores em cada chamada, pois deve estar vindo repetido os valores. Faça também o que o @Dante falou, limpe as variáveis no início da função, para que a cada iteração do repeat, as variáveis não tenham valor. 22/11/2016 às 13:58
  • vou tentar isso e daqui a pouco retorno com o resultado 22/11/2016 às 14:02
  • @Dante , como voce disse, eu fui verificar as variáveis usadas no método. Descobri que dentro de getListaDeLeiturasNoHashMap() eu uso uma variável global que deveria ser local. Refatorei isso e o problema foi resolvido. 22/11/2016 às 14:12
  • 1
    Massa! Posta a solução como sua própria resposta e da um Up no meu comentário pra galera saber que solucionou! Boa sorte!
    – Dante
    22/11/2016 às 14:14

1 Resposta 1

0

Consegui achar o problema

O método getListaDeLeiturasNoHashMap() utilizava a variavel leiturasHashMap que era global

var getListaDeLeiturasNoHashMap = function (grandeza) {
    for (var i = 0; i < leiturasHashMap.length; i++) {
        var hashEntry = leiturasHashMap[i];
        if (hashEntry.tipo == grandeza) {
            return hashEntry.leituras;
        }
    }
    var lista = [];
    var newhashEntry = {
        tipo: grandeza,
        leituras: lista
    }
    leiturasHashMap.push(newhashEntry);
    return lista;
}

resolvi o problema criando essa mesma variavel localmente dentro do loop e mandando e a passando para o método como parâmetro dessa maneira:

var getListaDeLeiturasNoHashMap = function (grandeza, leiturasHashMap) {
    for (var i = 0; i < leiturasHashMap.length; i++) {
        var hashEntry = leiturasHashMap[i];
        if (hashEntry.tipo == grandeza) {
            return hashEntry.leituras;
        }
    }
    var lista = [];
    var newhashEntry = {
        tipo: grandeza,
        leituras: lista
    }
    leiturasHashMap.push(newhashEntry);
    return lista;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .