grafico.html

<script type="text/javascript">
$(document).ready(function() {
    //OS DADOS DOS MOTORISTAS VEM DE UMA REQ AJAX
    var motoristas = [ ];

    $.ajax({

        url:'http://localhost:3412/api/lubriPopulate',
        success:function(data) {
            motoristas = data;
        }
    });

    setTimeout(function() {

        function exibeMediaConsumoFinal(element,nome) {
            var mediaKm = [];
            var nomes = verificaNomes(element);
            for(var i = 0; i < nomes.length; i++) {
                for(var i = 0; i < element.length; i++) {
                    if(element[i].veiculo.nome === nome) {
                        mediaKm.push(parseFloat(element[i].mediaKm));
                    }
                }
            }
            return mediaKm;
        } 

        function verificaNomes(element) {
            var arr = [];
            for(var i = 0; i < element.length; i++) {
                arr.push(element[i].veiculo.nome);
            }
            var nomes = arr.filter(function(el,i){
                return arr.indexOf(el) == i;
            });

            return nomes;
        }
     
        function verificaMesses(element) {
            var arr = [];
            for(var i = 0; i < element.length; i++) {
                arr.push(element[i].data);
            }
            var messes = arr.filter(function(el,i) {
                return arr.indexOf(el) == i;
            });

            return messes;
        }

        $('#container').highcharts({
            title: {
                text: 'Consumo médio de combustível',
                x: -20 //center
            },
            subtitle: {
                text: 'Fonte: RN Distribuidora',
                x: -20
            },
            xAxis: {
                categories: verificaMesses(motoristas)
            },
            yAxis: {
                title: {
                    text: 'Consumo (KM/L)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'HUMBERTO SOUZA',
                data: exibeMediaConsumoFinal(motoristas,"HUMBERTO SOUZA")
            }, {
                name: 'JAIR FERREIRA',
                data: exibeMediaConsumoFinal(motoristas,"JAIR FERREIRA")
            }, {
                name: 'HUMBERTO ANDRADE',
                data: exibeMediaConsumoFinal(motoristas,"HUMBERTO ANDRADE")
            }, {
                name: 'FABRICIO PINTO',
                data: exibeMediaConsumoFinal(motoristas,"FABRICIO PINTO")
            },  {
                name: 'AMILTON SANTOS',
                data: exibeMediaConsumoFinal(motoristas,"AMILTON SANTOS")
            }, {
                name: 'AUGUSTO CESAR',
                data: exibeMediaConsumoFinal(motoristas,"AUGUSTO CESAR")
            }, {
                name: 'ROBSON SANTOS',
                data: exibeMediaConsumoFinal(motoristas,"ROBSON SANTOS")
            }, {
                name: 'DIOGO SOARES',
                data: exibeMediaConsumoFinal(motoristas,"DIOGO SOARES")
            }, {
                name: 'ADALBERTO SANTOS',
                data: exibeMediaConsumoFinal(motoristas,"ADALBERTO SANTOS")
            }, {
                name: 'JOSE EDSON',
                data: exibeMediaConsumoFinal(motoristas,"JOSE EDSON")
            }, {
                name: 'ARISILVIO ROSA',
                data: exibeMediaConsumoFinal(motoristas,"ARISILVIO ROSA")
            }, {
                name: 'GEORK BARBOSA',
                data: exibeMediaConsumoFinal(motoristas,"GEORK BARBOSA")
            }, {
                name: 'EDMILSON DANTAS',
                data: exibeMediaConsumoFinal(motoristas,"EDMILSON DANTAS")
            }]
        });
    },1000);
});
</script>