How do I display PHP array values in JS-based Google Charts?

Question

The Charts documentation uses the following example:

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Toppings');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Cheese', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

I'm building my Google Chart as follows:

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Standing');
    data.addColumn('number', 'Students');
    data.addRows([
      [<?= $users[0]->COLLEGE; ?>, <?= $users[0]->HEADCOUNT; ?>],
    ]);

But no chart is being printed. How can I use the PHP array contents to populate the chart?

dont mix php and js like that, you should instead make a JSON request to populate your chart — meda, Nov 07 '14 at 21:12
take a look at this: http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript — malifa, Nov 07 '14 at 21:13
You have an extra comma after your array's closing square bracket. In PHP you are allowed to have a trailing comma after the last entry in an array, in JS it is not valid. — Jonathan Kuhn, Nov 07 '14 at 21:14
Okay, with that comma fixed, it's still not rendering, even after doing json_encode() on the values. — KinsDotNet, Nov 07 '14 at 21:24
@KinsDotNet read this https://developers.google.com/chart/interactive/docs/php_example — meda, Nov 07 '14 at 21:27
@sudowned JSON.parse produces an error but at least V8 and Gecko process objects in the javascript code with a comma at the end fine. — Lorenz, Nov 07 '14 at 21:28
@Aragon0 Web browsers are notoriously lax in implementation. A browser looking past syntax errors in order to Just Work is not surprising, and does not by nature reflect the language specification. — Winfield Trail, Nov 07 '14 at 21:31
Okay, @meda, Aragon's answer below, with the JSON_NUMERIC_CHECK option did the trick. Is this a sufficient conversion to JSON to cover vulnerabilities? — KinsDotNet, Nov 07 '14 at 21:58
it works but its not the proper way of achieving this, basically this is like building javascript with PHP — meda, Nov 07 '14 at 22:01
@meda I would like to do it the proper way, can you provide a code example the way that Aragorn0 did? I read through the link you provided and it's not really specific enough to my case to really apply. — KinsDotNet, Nov 07 '14 at 22:05

score 0 · Accepted Answer · edited Nov 07 '14 at 21:55

0

Your code doesn't add quotes to the resulting JavaScript values (and you don't escape them). PHPs json_encode has the ability to produce valid JavaScript values from PHP strings and handle all the quotes and escaping for you so just use that:

 var data = new google.visualization.DataTable();
    data.addColumn('string', 'Standing');
    data.addColumn('number', 'Students');
    data.addRows([
      [<?= json_encode($users[0]->COLLEGE); ?>, <?= json_encode($users[0]->HEADCOUNT, JSON_NUMERIC_CHECK); ?>],
    ]);

That should also prevent a whole bunch of XSS and other nasty code injection attacks and handle escaping.

edited Nov 07 '14 at 21:55

KinsDotNet

1,500
5
25
53

answered Nov 07 '14 at 21:18

Lorenz

2,179
3
19
18

I saw that, but even fixed, it doesn't render the chart. – KinsDotNet Nov 07 '14 at 21:24
Can you show the resulting Javascript from the script? And try to run my version with the comma, you don't need to remove it. – Lorenz Nov 07 '14 at 21:25
I'm seeing "Uncaught Error: Type mismatch. Value 0.1 does not match type number in column index 1" in the console. Nothing gets displayed on the page at all – KinsDotNet Nov 07 '14 at 21:29
https://gist.github.com/pnc89/dfd7581ec6d825c25ecd It looks like the data is output properly, but I'm clueless as to why it's not building the chart still. – KinsDotNet Nov 07 '14 at 21:45
It's because json_encode is displaying it as a string with quotation marks. How might I fix that? – KinsDotNet Nov 07 '14 at 21:47

How do I display PHP array values in JS-based Google Charts?

1 Answers1