connect google timeline chart to mysql

OM G

unread,

Mar 15, 2014, 5:00:28 PM3/15/14

to google-visua...@googlegroups.com

Hi

I am trying to connect the google timeline chart to mysql, but I managed to get the connection working but I am not sure how to echo the data from my table. Could you please help me out here? Thanks

so I want to display the goals currently in the goal table I need the goalName, starts, finish and progress. Here is the code:

<?php

session_start();

$con=mysqli_connect("localhost","root","","") or die("Error " . mysqli_error($connection));

if (!$con) {

die('Could not connect: ' . mysql_error());

}

$query = "SELECT goalName, progress, starts, finish FROM goal";

$result = mysqli_query($con,$query) or die(mysqli_error());

list($row) = mysqli_fetch_array($result);

?>

<html>

<head>

'version':'1','packages':['timeline']}]}"></script>

google.setOnLoadCallback(drawChart);

function drawChart() {

var container = document.getElementById('example3.1');

var chart = new google.visualization.Timeline(container);

var dataTable = new google.visualization.DataTable();

dataTable.addColumn({ type: 'string', id: 'goalName' });

dataTable.addColumn({ type: 'date', id: 'starts' });

dataTable.addColumn({ type: 'date', id: 'finish' });

dataTable.addRows([

])

var data = google.visualization.arrayToDataTable([

['goalName', 'starts', 'finish','progress'<?php echo $row; ?>]

]);

var options = {

title: 'Progress',

is3D: true

};

chart.draw(datatable);

}

</script>

asgallant

unread,

Mar 17, 2014, 11:59:50 AM3/17/14

to google-visua...@googlegroups.com

PHP's list function is not going to help you here. You need to do something like this:

$data = array(
    'cols' => array(
        array('type' => 'string', 'label' => 'goalName'),
        array('type' => 'date', 'label' => 'starts'),
        array('type' => 'date', 'label' => 'finish')
    ),
    'rows' => array()
);
while($row = mysqli_fetch_array($result)) {
    $startStr = $row['starts'];
    $finishStr = $row['finish'];
    // parse start and finish into strings $startDate and $finishDate with this format:
    // "Date(year, month, day, hour, minute, second, millisecond)"
    // where month is zero-indexed (eg, January is 0 not 1), and hour, minute, second, and millisecond are optional
    $data['rows'][] = array('c' => array(
        array('v' => $row['goalName']),
        array('v' => $startDate),
        array('v' => $finishDate)
    ));
}

Then in your javascript:

function drawChart() {
    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);

var data = new google.visualization.DataTable(<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>);

    var options = {
        title: 'Progress',
        is3D: true
    };

chart.draw(data, options);
}

OM G

unread,

Mar 18, 2014, 6:38:05 AM3/18/14

to google-visua...@googlegroups.com

Thank you so much for this Big Help. : )

Reply all

Reply to author

Forward