CODEWITHSUNDEEP
javascriptphparraysjson
Jose Leonardo Quiñones
Jose Leonardo Quiñones

Reputation: 7

How to convert JSON object to JavaScript array with two key to use in google chart?

I need to put a json from eloquent in a google chart but I can't convert the result from eloquent to a correct dataTable

 //activos represents result from eloquent
var activos = [
    {"descripcion":"peri\u00f3dico","riesgo":"5"}, 
    {"descripcion":"autom\u00e1ticas ","riesgo":"2"},
    {"descripcion":" \tAusencia","riesgo":"2"},
    {"descripcion":" \tAusencia de alto riesgo","riesgo":"4"},
    {"descripcion":"negocio","riesgo":"3"}
];

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

   function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Descripcion');
        data.addColumn('number', 'Cantidad');
        data.addRows(activos);
        // Set chart options
        var options = {
            'title': 'Reporte de Activos',

            'width': 400,
            'height': 300,

        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

the chart doen't apear

Upvotes: 0

Views: 62

Answers (2)

Professor Abronsius
Professor Abronsius

Reputation: 33813

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script src='//www.gstatic.com/charts/loader.js'></script>
        <script>
            var activos = [
                {"descripcion":"peri\u00f3dico","riesgo":"5"}, 
                {"descripcion":"autom\u00e1ticas ","riesgo":"2"},
                {"descripcion":" \tAusencia","riesgo":"2"},
                {"descripcion":" \tAusencia de alto riesgo","riesgo":"4"},
                {"descripcion":"negocio","riesgo":"3"}
            ];      

            const loadchart=function(){

                let dataTbl = new google.visualization.DataTable();
                    dataTbl.addColumn( 'string', 'Descripcion' );
                    dataTbl.addColumn( 'number', 'Cantidad' );

                activos.forEach( obj=>{
                    let data=[ obj['descripcion'], parseInt( obj['riesgo'] ) ];
                    dataTbl.addRows( [ data ] );
                });

                let chart = new google.visualization.PieChart( document.getElementById('chart') );
                    chart.draw( dataTbl,{ width:400, height:300, title:'Reporte de Activos' } );
            }
            google.charts.load( 'current', {'packages':['corechart'] } );
            google.charts.setOnLoadCallback( loadchart );
        </script>       
    </head>
    <body>
        <div id='chart'></div>
    </body>
</html>

The resultant chart

Upvotes: 0

Fran&#231;ois Hupp&#233;
Fran&#231;ois Hupp&#233;

Reputation: 2116

Instead of:

data.addRows(activos);

Use something like this:

for(let j in activos){
    data.addRows([activos[j].descripcion, activos[j].riesgo]);
}

Upvotes: 1

Related Questions