Reading the json correctly to generate the data for the chart (Ajax and Morris)

Asked

Viewed 689 times

0

https://github.com/rg3915/morris/blob/master/myproject/core/templates/core/persons_by_uf.html#L231-L263

I’m not being able to return the json via ajax, I tried with console.log but it’s returning the function itself that I built

function (){
            var json = null;
            $.ajax({
                async: false,
                global: false,
                url: "http://localhost:8000/uf/",
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    json = data;
                    console.log(json);
                }
            });
            return json;
        }here

How do I return the json I’ve assembled before?

All this is to generate the graph, but it is not reading the json correctly.

I am following the tutorial of this site

https://www.daniweb.com/programming/web-development/threads/477322/morris-chart-with-dynamic-data

ajax morris

  • Does this url you are pointing to have the data you need in JSON format? Try to take the result of this url and test it in some validator to see if it really is in the correct JSON format. (validator: http://jsonlint.com/). One way to get the result of the url is: If you use Google Chrome, press F12 and in the "Network" tab you can see the returns of Ajax, look at the image: http://prntscr.com/94dr9o

1 answer

-1

<script type="text/javascript">
    // Lê os dados, que já estão em json
    var json = function(callback){
        var json = null;
        $.ajax({
            url: "http://localhost:8000/uf/",
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                json = data;
                callback(data);
            }
        });
        return json;
    };

    // Gera o gráfico de barras
    var grafico = function(dados) {
        Morris.Bar({
            element: 'barchart',
            data: dados,
            xkey: 'uf',
            ykeys: ['quant'],
            labels: ['quant'],
            hideHover: 'auto',
            resize: true,
        });
    };

    // Chamando a função para gerar o gráfico
    json(grafico);

    // Caso queira imprimir os dados no console
    /* json(function(json){
        console.log(json)
    }); */

</script>

Browser other questions tagged ajax morris

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