mostrar grafico de barras google charts

schuiky

unread,

Aug 12, 2018, 11:37:21 PM8/12/18

to Google Visualization API

Buenas noches, estoy tratando de mostrar un grafico de barras, con el siguiente codigo

<html>

<head>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var jsonData = $.ajax({

url: "prueba.php",

dataType: "json"

}).responseText;

var data = new google.visualization.DataTable();

data.addColumn('string', 'sede');

data.addColumn('number', 'sema');

data.addColumn('number', 'tfre');

data.addColumn('number', 'tapli');

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

var sede = jsonData[i].['sede'];

var sema = jsonData[i].['sema'];

var tfre = jsonData[i].['tfre'];

var tapli = jsonData[i].['tapli'];

data.addRow([sede, sema, tfre, tapli]);

};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

chart.draw(data, {width: 400, height: 240});

}

</script>

</head>

<body>

</body>

</html>

el archivo prueba.php genera este json

[{"sede":"AREQUIPA","sema":"1","tfre":"0","tapli":"0"},{"sede":"CAJAMARCA","sema":"1","tfre":"0","tapli":"0"},{"sede":"CALLAO","sema":"1","tfre":"0","tapli":"0"},{"sede":"CHICLAYO","sema":"1","tfre":"0","tapli":"0"},{"sede":"CORONEL PORTILLO-PUCALLPA","sema":"1","tfre":"0","tapli":"0"}]

Alguien que me ayude con esto por favor

carlos nicho

unread,

Aug 16, 2018, 12:27:29 PM8/16/18

to Google Visualization API

aca tienes un ejemplo como tienes que ponerlo te recomiendo hacer un parseFloat a los datos que son number y poner unas comillas ""
cuando el dato sea un string.

for(var m=0; m < tama; m++){
        data.addRows([
          [""+fecha[m], parseFloat(datos1[m]), parseFloat(adatos1[m])],
        ]);
        }

schuiky

unread,

Aug 16, 2018, 4:59:24 PM8/16/18

to Google Visualization API

Muchas gracias Carlos

en realidad estoy un poco mas atras, yo geenero un json de la db con esta estructura

[{"sede":"AREQUIPA","sema":"1","tfre":"0","tapli":"0"},{"sede":"CAJAMARCA","sema":"1","tfre":"0","tapli":"0"},{"sede":"CALLAO","sema":"1","tfre":"0","tapli":"0"},{"sede":"CHICLAYO","sema":"1","tfre":"0","tapli":"0"},{"sede":"CORONEL PORTILLO-PUCALLPA","sema":"1","tfre":"0","tapli":"0"}]

y quiero mostrar un grafico de columnas agrupadas y no se como hacer para pasar el json al chart

saludos

carlos nicho

unread,

Aug 16, 2018, 6:09:45 PM8/16/18

to Google Visualization API

Ah entonces necesitas recorrer el json y guardar tus valores en array y asi mostrarlo

Para eso utiliza ajax para aca te paso el ejemplo:

$.ajax({
                url: './json/myjson.json', //la ubicacion del json 
                dataType: 'JSON', //aca va el tipo
                success: function(data) {
                $.each(data, function(i, item){ // con esto recorres el json y guardas todo lo que tengas
                var lotex = data[i].lote; // en tu caso seria data[i].sede, data[i].sema y asi el json se recorre como una matriz
                //claro que en lugar de var lotex usarias tu array  ejemplo[i] = data[i].sede y asi sucesivamente
}

});

esto pones en el <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
y donde declaras el <script type="text/javascript">
la siguiente funcion

function objetoAjax()
    {
        var xmlhttp = false;
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {

            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp = false; }
        }

        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
    }
Espero ayudarte sino busca en google como recorrer json con ajax ahi te saldra mas informacion si demoro en contestar.

El domingo, 12 de agosto de 2018, 22:37:21 (UTC-5), schuiky escribió:

Martin Chevez

unread,

Aug 17, 2018, 8:57:33 PM8/17/18

to google-visua...@googlegroups.com

Carlos muchas gracias aplique lo q indicaste y salio perfecto

Gracias nuevamente

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/f51a5ceb-13be-4177-873c-2a08546658b6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward