Google Graphs and PHP

Google Graphs and PHP

I am want to show a line graph that get information from a table in a
database. I came across Google Graphs which seems to be the best for what
i need. I can get the graph to show data i place in the code but when i
try to use echo to add data from the database it does not work. Please
find below my code. I am not sure what i have done wrong here.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Number of Products');
data.addRows([
<!--CHANGE FOR PHP TO PULL INFORMATION FRO MYSQL DBA-->
<?php
// Create connection
$con=mysqli_connect("host","username","password","database");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM table");
$start = 0;
while($row = mysqli_fetch_array($result)){
echo "['".$row["dateadded"]."', ".$row["products"]."],";
mysqli_close($con);
?>
]);
// Set chart options
var options = {'title':'Product Count History',
'width':600 ,
'height':550};
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.LineChart(document.getElementById('chart_product_history'));
chart.draw(data, options);
}
</script>
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="50%">
<div id="chart_product_history"></div>
</td>
<td width="50%">
</td>
</tr>
<tr>
<td width="50%">
</td>
<td width="50%">
</td>
</tr>
</table>
Thanks Ryan