Google JavaScript Table

Question

Is possible to make this script take MySQL data? Can anybody show me?

This script is from google chars, table ... I try to make this script take MySQL data and display in a table.

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

So, does this code work? Not work? What part of this are you stuck on? Getting the MySQL data? Putting in the script? Making a table? What do you need help with? — gen_Eric
– gen_Eric, Commented Jan 21, 2014 at 16:50
This seems like a fairly simple problem. Have you made any attempts yet? Basically you just need to write some PHP to get the data from MySQL and print it out on the page as a JSON. the javascript code will then use that data in the addRows method — z33m
– z33m, Commented Jan 21, 2014 at 16:51
i can' update it developers.google.com/chart/interactive/docs/gallery/table — user3219845
– user3219845, Commented Jan 21, 2014 at 16:53

php-dev · Accepted Answer · 2014-01-21 17:04:21Z

2

just fill your php array with values like this

$array = array(
    array(
        array('01', array('v' => 10000, 'f' => '$10,000'), 'Mike'),
        ...
        array('12', array('v' => 12500, 'f' => '$12,200'), 'Mike'),
    )
);

then in your HTML code write :

/* code starts here ... */
function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'ID');
        data.addColumn('number', 'Salariu');
        data.addColumn('string', 'Name');
        data.addRows(<?php echo json_encode($array) ?>);

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }

/* rest of code */

UPDATE

You have updated your source code and the addRows method argument format has changed, This how you should fill your php array (Drop the global array);

$array = array(
    array('01', array('v' => 10000, 'f' => '$10,000'), 'Mike'),
    ...
    array('12', array('v' => 12500, 'f' => '$12,200'), 'Mike'),
);

UPDATE 2 Help with mysql data retrieving

$array = array();
$result = mysql_query('SELECT f1, f2, f3, f4 FROM some_table');
while($row = mysql_fetch_assoc($result)) {
    $array[] = array($row['f1'], array('v' => $row['f2'], 'f' => $row['f3']), $row['f4']);
}

//Your array is now filled

Hope it helps

edited Jan 21, 2014 at 17:04

answered Jan 21, 2014 at 16:53

php-dev

7,1864 gold badges27 silver badges39 bronze badges

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

2 Comments

user3219845 Over a year ago

i understent that but i dont know how to make this javascript take mysql data

php-dev Over a year ago

Just fill your array with that format using your mysql data. I will update my answer another time.

Collectives™ on Stack Overflow

Google JavaScript Table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related