Google Visualisation + PHP + MySQL + IE8 issue

[Kavatah]

Hi,

I couldn't find any answers to my question, so I decided to just leave
a message :)

I am trying to use Google Visualization API to display a line chart on
my website.
My website is mainly in PHP, and I'd like my chart to get its data
from a MySQL database.

The script I use is like this :

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Volume');
data.addRows([
<?php graphvol($dtms); ?>
]);

var options = {
width: 500, height: 240,
title: ''
};

var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {curveType: "none",
width: 900,
height: 300,
vAxis: {maxValue: 10},
legend: {position: 'none'},
hAxis: {direction : -1,slantedTextAngle: 90}
});
}

And here is the function I am calling in the script
graphvol($dtms); :

function graphvol($dtms) {
ctd("sej_suprep"); // This function is to connect to my MYSQL
database
$sqlvolx = 'SELECT * FROM sej_volume WHERE date LIKE "%-'.$dtms.'-%"
ORDER BY date DESC';
$sqlvolcrnt = 'SELECT * FROM sej_volume ORDER BY DATE DESC LIMIT 0,
7';
if (empty($dtms)) {$sql = $sqlvolcrnt;} else {$sql = $sqlvolx;};
$result = mysql_query($sql) or die('Erreur SQL !'.
$sql.mysql_error());
$nb_champs = mysql_num_fields($result);
while($data = mysql_fetch_array($result))
{for($i = 0; $i < $nb_champs; $i++) {
if ($i == 0) {echo '[\''.eregi_replace('([0-9].*)-([0-9].*)-
([0-9].*)' ,'\\3-\\2',$data[$i]).'\',';} else {echo ' '.
$data[$i].'],';}
}
$ok=false;
}
mysql_close();
}

This works fine in Firefox and Chrome, however the chart doesn't show
up in IE8 (I can't test it in IE9, and anyway the main users are on
IE8...).

I tried to copy/paste the original chart provided on the Google
Visualization API webpage and it worked fine.

Anyone knows how I can fix this in IE8 ?
I could use JSON, but I really don't know how to code it (from start
to end, with the connection to the DB, and the queries, and then the
javascript ...).
My datasource is like this : [Date (in MySQL format)][Value (number)]

Thanks in advance for any help you can provide :)

[asgallant]

Your graphvol() code is putting a comma at the end of every row, which results in an extra comma at the end of the javascript array.  IE doesn't like these errant commas.  You could fix the function by replacing your while loop with something like this:

$output = array();

while($data = mysql_fetch_array($result)) {

    $output[] = '[\''.eregi_replace('([0-9].*)-([0-9].*)-([0-9].*)' ,'\\3-\\2',$data[0]).'\', '.$data[1].']';

}

echo implode(',', $output);

[Kavatah]

Hi Asgallant,

Thank you for taking some time to reply to my post.
I tried replacing my 'while loop' by yours but it doesn't work (on any
browser).
I'm not sure I was supposed to copy/paste your code without any
modification on my part though.

Here is my new 'graphvol()' function :

function graphvol($dtms) {
ctd("sej_suprep");

$sqlvolx = 'SELECT * FROM sej_volume WHERE date LIKE "%-'.$dtms.'-%"
ORDER BY date DESC';
$sqlvolcrnt = 'SELECT * FROM sej_volume ORDER BY DATE DESC LIMIT 0,
7';
if (empty($dtms)) {$sql = $sqlvolcrnt;} else {$sql = $sqlvolx;};
$result = mysql_query($sql) or die('Erreur SQL !'.
$sql.mysql_error());
$nb_champs = mysql_num_fields($result);

$output = array();
while($data = mysql_fetch_array($result)) {
$output[] = '[\''.eregi_replace('([0-9].*)-([0-9].*)-([0-9].*)','\
\3-\\2',$data[0]).'\', '.$data[1].']';
}

mysql_close();
}

Here is the source code from firefox :

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Volume');
data.addRows([

]);

var options = {
width: 500, height: 240,
title: ''
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {curveType: "none",
width: 900,
height: 300,
vAxis: {maxValue: 10},
legend: {position: 'none'},
hAxis: {direction : -1,slantedTextAngle: 90}
});
}

The 'graphvol()' doesn't get any data.
Any ideas ?
I'm sorry, I'm not an expert in php.

Thank you,
Best regards,

[asgallant]

You are missing the line: 

echo implode(',', $output);

after the while loop.

[Kavatah]

Yeeaahh
Thanks a lot for all your help and time.
(I just noticed you added that line already in your first post ...)

It works great know on IE :)

I started to use the image line chart instead as I managed to make it
work on IE, but now I can use the Interactive Line Chart, thanks to
you :)

Thank you very much, Merry Chrismas and Happy New Year
Best regards,

[asgallant]

You're welcome.