How to make the Morris Chart pick up information from an Asp.Net Core api

Asked

Viewed 26 times

1

I have the following api coming from a controller called Vehicles Controller.

// GET: api/Veiculos
        [HttpGet]
        public async Task<ActionResult<IEnumerable<Veiculo>>> GetVeiculos()
        {
            return await _context.Veiculos.Include(v => v.GetOrdemChegadas).OrderByDescending(v => v.GetOrdemChegadas.Count).ToListAsync();
        }

This controller return me a JSon down below:

[
       {   
           motorista: "SILVIO ALCANTARA",      
           totalDeChegadas: 29
       },
       {
           motorista: "CELSO LOUZA",       
           totalDeChegadas: 27
       },
       {       
           motorista: "JOSÉ ANTONIO LUCCA",        
           totalDeChegadas: 26
       },
       {   
           motorista: "BENEDITO MAURO DE AZEVEDO SANTOS",      
           totalDeChegadas: 25
       }
   ]

How to pass the JSON for Javascript for the instruction:

<script>
        $(document).ready(function () {
            $.ajax({
                type: 'GET',
                dataType: "json",
                contentType: "application/json",
                url: '/api/veiculos/',
                success: function (result) {

                    /*
                    *
                    *
                    *  COMO PASSAR PARA O MORRIS.BAR
                    *  
                    *
                    */

                }
            });

            //DADOS FICTICIOS
        var day_data = [
            { "motorista": "MOTORISTA 1", "totalDeChegadas": 7 },
            { "motorista": "Motorista 2", "totalDeChegadas": 1 },
            { "motorista": "Motorista 3", "totalDeChegadas": 9 },
            { "motorista": "Test 2", "totalDeChegadas": 2 }
        ];
        Morris.Bar({
            element: 'graph',
            data: day_data,
            xkey: 'period',
            ykeys: ['motorista', 'totalDeChegadas'],
            labels: ['Motorista', 'Total'],
            xLabelAngle: 60
        });


        });
    </script>



    <div id="graph"></div>

1 answer

0

Starts a variable for Morris.Bar type:

var morrisChart = Morris.Bar({
        element: 'graph',
        data: day_data,
        xkey: 'period',
        ykeys: ['motorista', 'totalDeChegadas'],
        labels: ['Motorista', 'Total'],
        xLabelAngle: 60
    });;

and when receiving the data calls the setData function():

$.ajax({
    type: 'GET',
    dataType: "json",
    contentType: "application/json",
    url: '/api/veiculos/',
    success: function (result) {
        /*
        *
        *
        *  COMO PASSAR PARA O MORRIS.BAR
        *  
        *  
        */
        morrisChart.setData(result);
    }
});

Browser other questions tagged

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