Visualization + MySQL

Jud

unread,

Oct 14, 2008, 9:30:05 AM10/14/08

to Google Visualization API

Good morning -
I just yesterday started digging in to this Google Visualization API,
so needless to say, I'm not too fluent yet.

But, before I begin really learning I have a simple question that
might kill it all.

What I am hoping to do with Google Visualization is to use an MySQL
database to populate data to make the charts. For instance - the MySQL
database has 10 fields, I will use an email of 10 most populated
cities. So I have a row for 'cities' and I have a row for
'citypopulation'.

1) Is that possible?

2) HOW?

3) Any other 'best practices' or 'ideas'?

Thanks!

VizGuy

unread,

Oct 15, 2008, 4:45:11 PM10/15/08

to google-visua...@googlegroups.com

Hi,

I am not sure I follow what is the exact question here.

Anyway - the main challenge is to create a data table from the MySql query data.

The only way to do it today, is to generate the html page with the javascript code that generates the data table object, and populates it with cols, rows, and cells, and then using it as any data table.

Please have a look at our docs at http://code.google.com/apis/visualization

VizGuy

Newbie

unread,

Oct 16, 2008, 4:55:00 PM10/16/08

to Google Visualization API

Can you point us to a specific example here ?
Say, the data is in a flat file and we want to populate a data table.

Thanks.

On Oct 15, 3:45 pm, VizGuy <viz...@google.com> wrote:
> Hi,
> I am not sure I follow what is the exact question here.
> Anyway - the main challenge is to create a data table from the MySql query
> data.
> The only way to do it today, is to generate the html page with the
> javascript code that generates the data table object, and populates it with
> cols, rows, and cells, and then using it as any data table.
>

> Please have a look at our docs athttp://code.google.com/apis/visualization
>
> VizGuy

VizGuy

unread,

Oct 17, 2008, 5:19:29 AM10/17/08

to google-visua...@googlegroups.com

In our examples there is no such an example, because they only web pages.
What you want to do, is to generate on your server, where you create the dynamic html page, a javascript code which is similar to the pages we have in our docs (for instance: http://code.google.com/apis/visualization/documentation/gallery/intensitymap.html#Example)

Hope this helps.

Vizguy

rcrisman

unread,

Oct 30, 2008, 4:52:44 PM10/30/08

to Google Visualization API

Heres what I did for an Annotated Time Line using MySQL + PHP:

<?php

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);

$int_y_pos = -1;
$int_y_step_small = 1;

$sql = "SELECT count(id) AS count, DATE_FORMAT(date, '%Y, %m-1, %d')
AS date FROM dtt WHERE date NOT LIKE '0000-00-00 00:00:00' AND date
NOT LIKE '2000-00-00 00:00:00' GROUP BY DATE_FORMAT(date, '%Y, %m,
%d')";
$sql = mysql_query($sql);
$rownum = mysql_num_rows($sql);

?>
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:
["annotatedtimeline"]});
google.setOnLoadCallback(drawData);
function drawData() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Repairs');
<?php
echo " data.addRows($rownum);\n";
while($row = mysql_fetch_assoc($sql)) {

$int_y_pos += $int_y_step_small;

echo " data.setValue(" . $int_y_pos . ", 0, new Date(" .
$row['date'] . "));\n";
echo " data.setValue(" . $int_y_pos . ", 1," . $row['count'] . ");
\n";

}
?>
var time = new
google.visualization.AnnotatedTimeLine(document.getElementById('time_div'));
time.draw(data, {displayExactValues:true});

}
</script>
</head>

<body>
<div id="time_div" style="width: 940px; height: 240px;"></div>
</body>
</html>

On Oct 17, 5:19 am, VizGuy <viz...@google.com> wrote:
> In our examples there is no such an example, because they only web pages.
> What you want to do, is to generate on your server, where you create the
> dynamic html page, a javascript code which is similar to the pages we have

> in our docs (for instance:http://code.google.com/apis/visualization/documentation/gallery/inten...
> )

p00kie

unread,

Nov 7, 2008, 11:32:59 AM11/7/08

to Google Visualization API

Is there anyway to do this without PHP?

On Oct 30, 3:52 pm, rcrisman <rcris...@tentec.com> wrote:
> Heres what I did for an Annotated Time Line usingMySQL+ PHP:

>
> <?php
>
> $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error

> connecting tomysql');

arunk3

unread,

Nov 14, 2008, 5:56:58 AM11/14/08

to Google Visualization API

It can also be done in JSP.

...
...
...
<head>

<%String table[][]=(String[][])request.getAttribute("table"); %>
<%Integer rowcount=(Integer)request.getAttribute("rowcount"); %>
<%Integer columncount=(Integer)request.getAttribute("columncount"); %>

google.load('visualization', '1.0', {'packages': ['table']});
google.setOnLoadCallback(draw);
function draw() {
// Create a datatable with your data.

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

//colums add
<%
for(int i = 0; i<columncount; i++){
table[0][i] = (table[0][i]==null)?"":table[0][i];
out.print("data.addColumn('string', '"+table[0][i]+"');");
}

%>
//Set number of rows
<%
out.print("data.addRows("+rowcount+");");
%>

//Add rows.
<%
for(int i = 1; i < rowcount; i++){

for(int j = 0; j<columncount; j++){
table[i][j] = (table[i][j]==null)?"":table[i][j];
out.print("data.setCell("+(i-1)+", "+j+", '"+table[i][j]+"');");
}
}

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

...
...
...

param jeet

unread,

Jun 20, 2013, 10:04:23 AM6/20/13

to google-visua...@googlegroups.com

Hi Rcrisman,

Can you plz send me the database.Thanks in Advance.

Reply all

Reply to author

Forward