Chart (e.g. Bar Chart)with MYSQL data source
Atif Mir
johnleaf
code isnt for a bar chart but for a world map, but you can study this
php code and modify it accordingly to your particular needs(for
mysql):
//code for my query
<?php
$result = mysql_query($query);
$k=0;
while($row =
mysql_fetch_array($result,MYSQL_ASSOC))
{
$nation =
"{$row['country']}";
$j=0;
while( ( $country[$j] !=
$nation ) && ($j<= $i))//this while loop matches countries with their
codes and thr$
{
$j++;
}
if ( $country[$j] == $nation )
{
$place[$k] =
"$code[$j]";
$value[$k]=
"{$row['SUM(usd)']}";
$k++;
}
}
?>
//ps if anyone sees a better algorithm for matching codes to country
names, im all ears :)
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></
script>
<script type='text/javascript'>
google.load('visualization' , '1', {'packages':['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap(){
var data = new google.visualization.DataTable();
data.addRows($k);".PHP_EOL."data.addColumn('string',
'Country');".PHP_EOL."data.addColumn('number',
'Popularity');".PHP_EOL;
$p=0;
while($p<$k)
{
echo "data.setValue($p, 0,
'$place[$p]');".PHP_EOL."data.setValue($p, 1, $value[$p]);".PHP_EOL;
$p++;
}
echo "
var options = {};
options['dataMode'] = 'regions';
options['width'] = '1024';
options['height']= '500';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
";
as you can see, most of it is just cut and paste of the api
formatting, and then a little loop and a php mysql query- this took me
a couple hours last night to get the formatting right, and im sure its
crude(but i just set up my first server 2 months ago so i think the
progress is steady)
please lemme know if this was any help.
goodluck
Atif Mir
Thank you v much for replying to me , I have had a look and your code
is a v good starting point for me.
I am using gwt framework 2 and writing web app in java / mysql.
Once I manage to get bar chart from mysql data I would like the chart to
keep update as and when data is changed at the database any idea how do
I achieve that?
Once again thank you for your useful code.
Atif
On 08/01/2011 23:39, johnleaf wrote:
> well i know its been awhile and no one has responded to you; and my
> code isnt for a bar chart but for a world map, but you can study this
> php code and modify it accordingly to your particular needs(for
> mysql):
> //code for my query
>
> <?php
>
> $result = mysql_query($query);
> $k=0;
> while($row =
> mysql_fetch_array($result,MYSQL_ASSOC))
> {
> $nation =
> "{$row['country']}";
> $j=0;
>
> while( ( $country[$j] !=
> $nation )&& ($j<= $i))//this while loop matches countries with their
johnleaf
question about this very topic just above this post- I have no clue
whether you can update the chart after loading and if you find out how
to implement it let me know.
Atif Mir
gcstang
maybe this will help.
Create a Timer (com.google.gwt.user.client.Timer), use this to update
your barchart after the initial load.
On start of your Composite, call a method that does the following
1. Call a method that retrieves your data and initializes your
barchart (setServices in my code)
2. Also create a timer that will update the data for your barchart
t = new Timer() {
public void run() {
retrieveGaugeData();
if(gauge != null) {
gauge.draw(createGaugeData(), createGaugeOptions());
}
}
};
t.scheduleRepeating(5000);
Method setServices (retrieves data initially and initializes my
visualization)
1. Retrieves your data, I use an RPC call to pull this data from the
server which in turn pulls it from MySQL and returns it
2. Create your barchart (in my case a Gauge), note I'm also using
SmartGWT so adding it to the canvas may be a little different.
Runnable onLoadCallback = new Runnable() {
public void run() {
gauge = new Gauge(createGaugeData(), createGaugeOptions());
gauge.setWidth("80%");
Canvas c = new Canvas();
c.setID("sys_gauge_canvas");
c.setWidth100();
c.setHeight("30%");
c.addChild(gauge);
addMember(c, 0);
}
};
VisualizationUtils.loadVisualizationApi("1.1", onLoadCallback,
Gauge.PACKAGE);
johnleaf
manythanks