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

Question

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

François Huppé · Accepted Answer · 2019-11-10 08:55:37Z

1

Instead of:

data.addRows(activos);

Use something like this:

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

answered Nov 10, 2019 at 8:55

François Huppé

2,1161 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Professor Abronsius · Accepted Answer · 2019-11-10 09:05:05Z

0

<!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>

answered Nov 10, 2019 at 9:05

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

2 Comments

Jose Leonardo Quiñones Over a year ago

excellent it worked, but something important to have in mind: due it come from blade it's important to set: blade.php: <input type="hidden" name="activos" id="activos" value="{{$activos}}">. And in js file: var activos =JSON.parse(document.getElementById("activos").value);

Professor Abronsius Over a year ago

That is for you to add-glad it helped

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related