Google charts, I can not use variables in javascript

Question

Google charts, I can not use variables in javascript

Navigation

#1 by (1 votes)

0

I have a query that brings me a list of Names with their respective fields (On Time & Delayed).

The query I bring with PHP and if I throw a echo $datosGrafico ; give me this:

['Agustin', 17, 1 ],
['Andrea', 79, 0 ],
['Carla', 17, 0 ],
['Cecilia', 6, 0 ],
['Denise', 0, 0 ],
['Diego', 3, 0 ],
['Ezequiel', 0, 0 ],
['German', 0, 0 ]

Up there all right, the problem arises when I try to put that echo in the script below, it stops working the Google charts:

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load("current", {packages:["bar"]});
        google.charts.setOnLoadCallback(drawStuff);
        function drawStuff() {
            var data = google.visualization.arrayToDataTable([
            ['Analista', 'On Time', 'Delayed'],
            //(La variable $datosGrafico DEBERIA IR ACA en lugar de meter uno a uno a mano)

            ['Agustin', 17, 1],
            ['Lucas', 6, 2], 
            ]);

            var options = {
            width: 425,
            height: 450,
            chart: {
                title: 'Spread of SLAs by Analist',
                subtitle: 'Amount of Tickets'
            },
            bars: 'horizontal' // Required for Material Bar Charts.
            }
            ;

            var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
            chart.draw(data, options);
            }
     </script>
</head>
<body>
    <div id="dual_x_div" style="width: 300px; height: 450px;"></div>
</body>

Any ideas why?

javascript php google-chart-api

asked by Ramiro 05.07.2018 в 21:45

source

1 answer

call php function from javascript How to count records by date according to the requested query?

score 1 · Answer 1

This line seems to be the one that gives problems;

google.charts.load("current", {packages:["bar"]});

I am not very expert in the Google Charts API but I have taken a look at the example they have in their documentation and apparently you need to pass another parameter to packages;

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

UPDATE: Test if this works for you because the problem also I think is that you try to use a PHP variable in JavaScript directly. The variable $ datosGrafico I think it must be a two-dimensional array in PHP.

//En PHP
$datosGrafico = array(
    array('Analista', 'On Time', 'Delayed'),
    array('Agustin', 17, 1 ),
    array('Andrea', 79, 0 ),
    array('Carla', 17, 0 ),
    array('Cecilia', 6, 0 ),
    array('Denise', 0, 0 ),
    array('Diego', 3, 0 ),
    array('Ezequiel', 0, 0 ),
    array('German', 0, 0 )
);

Then you get the data of the PHP variable in a JavaScript variable in the following way:

 function drawStuff() {

//Al inicio de la funcion haz:
var datosGrafico = <?php echo json_encode($datosGrafico); ?>;

        var data = google.visualization.arrayToDataTable(datosGrafico);

I have not tried it but it is what I infer given that this works:

    // Array bidimensional en JavaScript

    var datosGrafico = [
     ['Analista', 'On Time', 'Delayed'],
     ['Agustin', 17, 1 ],
     ['Andrea', 79, 0 ],
     ['Carla', 17, 0 ],
     ['Cecilia', 6, 0 ],
     ['Denise', 0, 0 ],
     ['Diego', 3, 0 ],
     ['Ezequiel', 0, 0 ],
     ['German', 0, 0 ]
   ];

   var data = google.visualization.arrayToDataTable(datosGrafico);