I want to generate graph for my static data. I am using Google Chart for doing this. Here is the google chart code
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
But i want to put my code in this. I am not getting how to do it. Here is my code
<?php
echo '<div align="center" style="width:100%; padding-top:20px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=tddash>10 latest purchase orders</td>
</tr>
<tr>
<td>';
$SQL = 'SELECT purchorders.orderno,
suppliers.suppname,
purchorders.orddate,
purchorders.deliverydate,
purchorders.initiator,
purchorders.requisitionno,
purchorders.allowprint,
purchorders.status,
suppliers.currcode,
currencies.decimalplaces AS currdecimalplaces,
SUM(purchorderdetails.unitprice*purchorderdetails.quantityord) AS ordervalue
FROM purchorders
INNER JOIN purchorderdetails
ON purchorders.orderno = purchorderdetails.orderno
INNER JOIN suppliers
ON purchorders.supplierno = suppliers.supplierid
INNER JOIN currencies
ON suppliers.currcode=currencies.currabrev
WHERE purchorders.orderno=purchorderdetails.orderno
GROUP BY purchorders.orderno,
suppliers.suppname,
purchorders.orddate,
purchorders.initiator,
purchorders.requisitionno,
purchorders.allowprint,
purchorders.status,
suppliers.currcode,
currencies.decimalplaces LIMIT 5';
$SalesOrdersResult2 = DB_query($SQL,$db);
$Total = 0;
echo '<table width="100%" celpadding="2" class="selection">';
echo '<tbody><tr><th> Supplier </th><th>Order Date</th><th>Delivery Date</th><th>Initiator</th><th>Order Total</th><th>Status</th></tr></tbody> ';
$k=0;
while ($row = DB_fetch_array($SalesOrdersResult2))
//while ($row = mysql_fetch_array($SalesOrdersResult))
{
if ($k == 1){
echo '<tr class="EvenTableRows">';
$k = 0;
} else {
echo '<tr class="OddTableRows">';
$k = 1;
}
$FormatedOrderValue2 = locale_number_format($row['ordervalue'],$row['currdecimalplaces']);
$Total += $row['ordervalue'];
//$FormatedOrderValue1 = locale_number_format($myrow['ordervalue'],$_SESSION['CompanyRecord']['decimalplaces']);
$FormatedOrderDate1 = ConvertSQLDate($row['orddate']);
$FormatedDelDate1 = ConvertSQLDate($row['deliverydate']);
echo ' <td> ' . $row['suppname'] . ' </td>';
echo ' <td>$FormatedOrderDate1</td><td>$FormatedDelDate1</td><td> ' . $row['initiator'] . ' </td><td>$FormatedOrderValue2</td><td> ' . $row['status'] . ' </td> ';
}
echo '<tr><td colspan="3">Total---</td><td colspan="2">$Total</td></tr></tbody>';
echo '</table></td>';
echo' </tr>
</table>
</div>';
Can somebody plz help me in this?
* EDITED *
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>';
echo ' <script type="text/javascript">
function drawChart() {
var jsonData = $.ajax({
url: "1getData.php",
dataType:"json",
async: false
}).responseText;
alert(jsonData);
var data = new google.visualization.DataTable(jsonData);
var view = new google.visualization.DataView(data);
view.setColumns([0, 3]);
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
chart.draw(view, {width:400, height:240});
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
</script>';
echo '</head>';
<div id="chart_div" ></div>
1getData.php
<?php
$PageSecurity=0;
include('includes/session.inc');
if (!isset($RootPath)){
$RootPath = dirname(htmlspecialchars($_SERVER['PHP_SELF']));
if ($RootPath == '/' or $RootPath == "\\") {
$RootPath = '';
}
}
$SQL = "SELECT workorders.wo, woitems.stockid, stockmaster.description, stockmaster.decimalplaces, woitems.qtyreqd, woitems.qtyrecd, workorders.requiredby, workorders.startdate
FROM workorders
INNER JOIN woitems ON workorders.wo = woitems.wo
INNER JOIN stockmaster ON woitems.stockid = stockmaster.stockid
ORDER BY workorders.wo";
$searchresult = DB_query($SQL, $db);
$table=array();
$table['cols']=array(
array('label'=>'ITEM', type=>'string'),
array('label'=>'Description', type=>'string'),
array('label'=> 'QTY Required', type=>'number'),
array('label'=>'QTY Outstanding', type=>'number')
);
$rows=array();
while ($row = DB_fetch_array($searchresult))
{
$qreq = locale_number_format($row['qtyreqd'],$row['decimalplaces']);
$qout = locale_number_format($row['qtyreqd']-$row['qtyrecd'],$row['decimalplaces']);
$temp=array();
$temp[]=array('v' => $row['stockid']);
$temp[]=array('v' => $row['description']);
$temp[]=array('v' => $row['qtyreqd']);
$temp[]=array('v' => ($row['qtyreqd']-$row['qtyrecd']));
$rows[]=array('c' => $temp);
}
$table['rows']=$rows;
$jsonTable = json_encode($table);
print $jsonTable;
?>
but it displays only two columns, where as i want to display 3
JAVA SCRIPT
<script type="text/javascript">
function drawChart() {
var jsonData = $.ajax({
url: "1getData.php",
dataType:"json",
async: false
}).responseText;
alert(jsonData);
var data = new google.visualization.DataTable(jsonData);
var view = new google.visualization.DataView(data);
view.setColumns([0,3]);
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
chart.draw(view, {width:400, height:240});
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
