The jqChart...
<?php
require_once '../../../tabs.php';
?>
<!DOCTYPE html>
<html>
<head>
<style type="text">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 62.5%;
}
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
}
#tags {z-index: 900}
</style>
<title>jqChart and jqGrid PHP Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../../themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../../themes/ui.jqgrid.css" />
<script src="../../../js/jquery.js" type="text/javascript"></script>
<script src="../../../js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../../../js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../../js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="../../../js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript"> var mychart; </script>
</head>
<body>
<?php include ("chart.php");?>
<div style="margin: 0 auto; width:720px">
<table id="grid"></table>
<div id="pager"></div>
</div>
<br/>
<?php tabs(array("chart.php"));?>
</body>
</html>
chart.php.
<?php
require_once '../../../jq-config.php';
//require_once ABSPATH."php/jqUtils.php";
require_once ABSPATH."php/jqGrid.php";
//require_once ABSPATH."php/jqGridArray.php";
//require_once ABSPATH."php/jqGridPdo.php";
require_once ABSPATH."php/jqChart.php";
ini_set("display_errors","1");
// get your data manually and build the array
$myconn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
$myconn->query("SET NAMES utf8");
$sth = $myconn->prepare("SELECT CustomerID, SUM(Freight) AS Freight FROM orders WHERE (CustomerID ='BERGS' OR CustomerID ='WHITC' ) AND OrderDate BETWEEN '1997-01-01' AND '1997-12-31' GROUP BY CustomerID");
$sth->execute();
$customers = $sth->fetchAll(PDO::FETCH_ASSOC);
$chart = new jqChart( );
$chart->setChartOptions(array("defaultSeriesType"=>"bar"))
->setTitle(array('text'=>'Freight 1997'))
->setyAxis(array("title"=>array("text"=>"Freight")))
->setJSCode("mychart = chart;")
->setTooltip(array("formatter"=>"function(){return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y;}"))
// set the series from the array
->addSeries($customers[0]['CustomerID'], array($customers[0]['Freight'] ))
->addSeries($customers[1]['CustomerID'], array($customers[1]['Freight'] ));
echo $chart->renderChart('',true,700, 350);
// building the grid
$grid = new jqGridRender(null);
$grid->setColModel(array(array("name"=>"CustomerID", "key"=>true), array("name"=>"Freight")));
$grid->setUrl('grid.php');
$grid->setGridOptions(array(
// this is needed to tell the grid that the data is local
"datatype"=>"local",
// and here is the local data
"data"=>$customers
));
$grid->navigator = false;
$grid->renderGrid('#grid','#pager',true, null, null, false,false);
// Enjoy
?>