3

funciona da seguinte forma, tem um .js que tem os gráficos montados, mas porém com os valores inseridos diretamente, eu to tendo uma dificuldade em achar um conteúdo que se encaixe diretamente nesse exemplo que eu estou usando, eu preciso de um seguinte, seja por $.ajax, getJson, o que for, passar os valores de um JSON pra dentro do campo data:[ 50,100,50];

Uma parte do trecho do código onde forma o gráfico é essa:

   var widgetTechnologiesChart = function() {


    $.getJSON("./func/dash/grafico-dash.php", "valor1", function( data ) {
        console.log(data);
    });

    if ($('#kt_widget_technologies_chart').length == 0) {
        return;
    }

    var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
    };

    var config = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [ 
                    50,100,50
                ],
                backgroundColor: [
                    KTApp.getBaseColor('shape', 3),
                    KTApp.getBaseColor('shape', 4),
                    KTApp.getStateColor('brand')
                ]
            }],
            labels: [
                'OHSENHOR',
                'OWDEUS',
                'MEAJUDAAA'
            ]
        },
        options: {
            cutoutPercentage: 75,
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false,
                position: 'top',
            },
            title: {
                display: false,
                text: 'OHGLORIA'
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },
            tooltips: {
                enabled: true,
                intersect: false,
                mode: 'nearest',
                bodySpacing: 5,
                yPadding: 10,
                xPadding: 10, 
                caretPadding: 0,
                displayColors: false,
                backgroundColor: KTApp.getStateColor('brand'),
                titleFontColor: '#ffffff', 
                cornerRadius: 4,
                footerSpacing: 0,
                titleSpacing: 0
            }
        }
    };

    var ctx = document.getElementById('kt_widget_technologies_chart').getContext('2d');
    var myDoughnut = new Chart(ctx, config);
}

E assim, pesquisei muita coisa antes de chegar até aqui, mas eu não achei nada que possa me somar, e o engraçado é que esse código que eu postei, se eu jogar ele completo até mesmo dentro da própria tag no php ele não renderiza o gráfico, sendo que ele é baseado no Chartjs, alguém sabe como eu resolvo essa situação? Tentei utilizar o $.getJSON, mas não deu certo, ai apenas deixei ele no código como exemplo da ultima coisa que eu tentei usar.

O retorno do json:

{ "Valor1": 50 }{ "Valor2": 80 }

1 Resposta 1

3

Se você explicitamente necessita de dados do retorno do JSON, encapsule sua lógica "neste retorno":

var widgetTechnologiesChart = function() {

    if ($('#kt_widget_technologies_chart').length == 0) {
        return;
    }

    var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
    };
    
    $.getJSON("./func/dash/grafico-dash.php", "valor1", function( jsondata ) {
        var config = {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [
                        50,100,50
                    ],
                    backgroundColor: [
                        KTApp.getBaseColor('shape', 3),
                        KTApp.getBaseColor('shape', 4),
                        KTApp.getStateColor('brand')
                    ]
                }],
                labels: [
                    'OHSENHOR',
                    'OWDEUS',
                    'MEAJUDAAA'
                ]
            },
            options: {
                cutoutPercentage: 75,
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false,
                    position: 'top',
                },
                title: {
                    display: false,
                    text: 'OHGLORIA'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                tooltips: {
                    enabled: true,
                    intersect: false,
                    mode: 'nearest',
                    bodySpacing: 5,
                    yPadding: 10,
                    xPadding: 10,
                    caretPadding: 0,
                    displayColors: false,
                    backgroundColor: KTApp.getStateColor('brand'),
                    titleFontColor: '#ffffff',
                    cornerRadius: 4,
                    footerSpacing: 0,
                    titleSpacing: 0
                }
            }
        };

        var ctx = document.getElementById('kt_widget_technologies_chart').getContext('2d');
        var myDoughnut = new Chart(ctx, config);
    });
}

Se os dados do retorno JSON (agora um Object) que queres usar é um Array, use o operador Spread para adicioná-los a matriz:

data: [50, 100, 50, ...jsondata]

Agora, caso tenha que percorrer ou iterar sobre este retorno JSON para encontrar valores, use o método .push() para adicionar cada item ao final da matriz alvo (data) más, faça isso antes de usar a variável "config":

$.getJSON("./func/dash/grafico-dash.php", "valor1", function( jsondata ) {
    var config = {
        data: {
            datasets: [{
                data: [
                    50,100,50
                ],
                backgroundColor: []
            }],
            labels: []
        }
    };

    // faça aqui sua iteração e adicione os novos itens a matriz
    config.data.datasets[0]['data'].push(novo_item)

    var ctx = document.getElementById('kt_widget_technologies_chart').getContext('2d');
    var myDoughnut = new Chart(ctx, config);
});


Edição:

Se necessitas deste retorno deves encapsular o código decorrente pois o método $.getJSON() faz uma requisição "assincrona" ou seja, você deve esperar o dado retornar para poder usá-lo no restante do código.

Se deseja usar este retorno fora da função deve "préviamente declarar uma váriável em um escopo superior" para poder atribir este retorno a ela ... assim podes usar (com o devido cuidado) este retorno em outras partes subsequentes.

Exemplo:

var retornoJSON

$.getJSON("./func/dash/grafico-dash.php", "valor1", function( jsondata ) {

    // atribuir a variável pré-existente
    retornoJSON = jsondata

    var config = {
        data: {
            datasets: [{
                data: [
                    50,100,50
                ],
                backgroundColor: []
            }],
            labels: []
        }
    };

    // faça aqui sua iteração e adicione os novos itens a matriz
    config.data.datasets[0]['data'].push(novo_item)

    var ctx = document.getElementById('kt_widget_technologies_chart').getContext('2d');
    var myDoughnut = new Chart(ctx, config);
});

/**
 * Em outra parte subsequente mas não linear você pode usar este retorno
 * por exemplo em uma iteração/gesto do usuário ... aqui cabe sua necessidade (criatividade)
 */

 $('#btnShow').on('click', function() {
    if ( retornoJSON !== undefined ) {
        // faça algo com os dados
    }
 });

Edição 2:

Dado o seguinte valor de retorno JSON (que acredito estar em uma matriz?):

{ "Valor1": 50 }{ "Valor2": 80 }

Você deve iterar após declarar o Object "config" e antes de utilizá-lo, da seguinte forma:

$.getJSON("./func/dash/grafico-dash.php", "valor1", function( jsondata ) {

    /**
     * assumindo que o retorno seja uma matriz [{ "Valor1": 50 },{ "Valor2": 80 }]
     */

    var config = {
        data: {
            datasets: [{
                data: [
                    50,100,50
                ],
                backgroundColor: []
            }],
            labels: []
        }
    };

    /**
     * itere sobre a matriz de retorno `Array` e obtenha o valor dos objetos
     * o uso de `Object.values()` ire retornar uma matriz, dado seu exemplo basta apenas pegar
     * o primeiro índice (nesse caso 0)
     */
    for (let i = 0; i < jsondata.length; i++) {
         config.data.datasets[0]['data'].push(Object.values(jsondata[i])[0])
     }

    var ctx = document.getElementById('kt_widget_technologies_chart').getContext('2d');
    var myDoughnut = new Chart(ctx, config);
});


Referencias:

https://api.jquery.com/jQuery.getJSON/

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/values

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_operator

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/push

7
  • Lauro, muito obrigado pela ajuda, eu compreendi sobre as funções a cima, eu tentei usar o data: [50, 100, 50, ...jsondata] mas porém na hora de carrregar o grafico ele nao tras o valor retornado pelo json, eu preciso que ao inves de deixar os valores pré definidos, ele puxe somente os valores que o json retornar: Exemplo: JSON { "valor1": "7039" }{ "valor2": "8150" } Seria de algumas das formas a cima? ou de outro modo? Desculpe a minha ignorância :/ Commented 2/11/2019 às 21:10
  • Sim, neste caso vc deve iterar e adicionar a matriz o valor de cada objeto que queres Commented 3/11/2019 às 2:27
  • Tem como você me mostra em exemplo prático em código? Sou bem cru em js :/ Commented 3/11/2019 às 2:29
  • Edite sua pergunta adicionando um exemplo minimo do que retorna deste json e o que queres usar dele. Eu edito minha resposta com um exemplo de iteração usando este retorno Commented 3/11/2019 às 2:34
  • Pronto, coloquei o que o meu json retorna. Commented 3/11/2019 às 2:53

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 .