Using php-RGraph on your website
Prepare your webpage
php-RGraph uses for displaying charts the javascript framework jQuery.
If you do not use it already you will have to add the javascript library for it.
The php-RGraph package has stored this library in directory "../RGraph/js".
In addition to this you must add suitable RGraph javascript libraries for the
type and properties of your chart. If you do not know what libraries you need, you may
add "RGraph.all.lib.js" which contains almost all libraries. So your code
to be added may looks like:
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../libraries/RGraph.common.lib.js" type="text/javascript"></script>
how it works
php-RGraph uses for displaying charts the javascript framework
jQuery. It uses two components for every chart:
- the jQuery.load function
- a div element for placement of chart
jQuery.load is an Ajax-implementation done by jQuery.
With Ajax, web applications can send data to and retrieve from a server asynchronously
(in the background) without interfering with the display and behavior
of the existing page.
To use jQuery.load, you have to code is only a few lines of javascript code:
<script type="text/javascript">
jQuery(document).ready(function() {
var url = "../samples/logo.php";
jQuery("#show-sample").load( url, function() {
});
});
</script>
jQuery.load loads the url "../samples/logo.php", which is a chart script from my samples.
For it you need to add a div element with id "show-sample" which will be then
used for displaying the chart:
<div id="show-sample" style="float:right"></div>
You can see the result of this implementation with bar chart displayed on this page. Chart
is loaded and displayed, when the page has been loaded (when event "document.ready" triggers).
But you may also display charts interactively using jQuery.load. If you click following link you will
cause a display of a meter chart. The bar-chart will then
be replaced by this chart.
How did I do that? I just added these little pieces of code:
With the html a-tag for the link, I added an "onlick" attribute to trigger script "show_chart()".
This script has been added to the script-tag:
function show_chart() {
var url = "../samples/meter.php";
jQuery("#show-sample" ).load( url, function() {
});
}
As it uses the same div-id as for the bar chart it replaces the bar chart.