<?php
header("Content-Type: application/xhtml+xml; charset=utf-8");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xml; charset=utf-8" />
<title>SVGraph example</title>
</head>
<body>
<h1>NOTE! SVG support in browser is required for this page to be rendered correctly!</h1>
<p>
Known to work in Opera 9+ and Firefox 2+
</p>
<table style="width:100%"><tbody><tr>
<td style="width:30%;vertical-align:top;">
<h1 style="display:block;clear:both;">SVGraph example (PHP)</h1>
<?php
/* All the usage is exactly the same as for JavaScript class - see the above example */
require_once dirname(__FILE__) . '/../SVGraph.php';
$svg = new SVGraph(400, 300);
$svg->setLegend(0, 'Graphic 1')
->setLegend(1, 'Graphic 2')
->setLegend(2, 'Graphic 3')
->setLegend(3, 'Graphic 4')->setFactor(3, 1000)
->setLegend(4, 'Graphic 5')->setFactor(4, 100)
->setLegend(5, 'Graphic 6')->setFactor(5, 100);
$svg->load(array(
array("2007-10-01","174","97","13","150706","6938.00","3238.27"),
array("2007-10-02","178","89","15","162112","8003.00","3879.27"),
array("2007-10-03","164","101","20","145706","73456.00","4078.27"),
array("2007-10-04","135","24","22","112706","5432.00","5045.27"),
array("2007-10-05","190","23","12","178706","7143.00","2367.27")
));
$svg->render();
?>
</td>
<td style="width:70%;vertical-align:top;">
<h1>SVGraph example (JavaScript)</h1>
<div id="dia"></div>
<script src="../SVGraph.js"></script>
<script>
//<![CDATA[
/* Create new SVGraph instance */
window.svg = new SVGraph(400, 300);
/* Setup graphics: legengs & multiplying-factors */
window.svg.setLegend(0, 'Graphic 1').setLegend(1, 'Graphic 2').
setLegend(2, 'Graphic 3').
setLegend(3, 'Graphic 4').setFactor(3, 1000).
setLegend(4, 'Graphic 5').setFactor(4, 100).
setLegend(5, 'Graphic 6').setFactor(5, 100);
/**
* Import data.
* Data is an array, where each item is itself an array like this: [x, y1, y2,.. ,yN]
* As you may have guessed, the first element in a data-item represents value on the X-axis of the graphic,
* whereas y1, y2,.. ,yN - represent Y-axis values for lines ## 1, 2,.. N.
* In the below example, we have 6 lines in our graphic
*/
window.svg.load([["2007-10-01","174","97","13","150706","6938.00","3879.27"],
["2007-10-02","190","140","14","148376","8922.30","4305.73"],
["2007-10-03","164","101","20","145706","73456.00","4078.27"],
["2007-10-04","135","24","22","112706","5432.00","5045.27"],
["2007-10-05","190","23","12","178706","7143.00","2367.27"]]);
/* render graphic inside div#dia */
window.svg.render('dia');
//]]>
</script>
<p>Click the legends below the graphic to toggle lines' visibility.</p>
</td>
</tr></tbody></table>
<h2>About SVGraph</h2>
<p>
SVGraph is an opensource chartmaker available in JavaScript and PHP. Javascript version is completely client-side,
whilst PHP, in contrast, is completely server-side.
</p>
<p>
Both PHP anf JavaScript versions of SVGraph have the same API, feature-list etc.
</p>
<p>
The PHP version is no more than a port from Javascript. Should the graphics appear a bit clumsy -
that should be true for both versions.
</p>
<p>
SVGraph is in alpha stage. It lacks many fetures that obviously should be present. The first thing to work on
will be a detection of minimum value as well as maximimum - and adjusting the resulting graphic accordingly.
</p>
<p>
I'm gonna pay much attention to customization of the layout also - through custom CSS classes, extending the API etc.
</p>
<h2>A bit of history</h2>
<p>
I designed SVGraph for my own needs - one of my apps needed this kind of app, and I decided that JPGraph
is not that good - for me.
(ok guys, I know that JPGraph is an incomparably richer application, but isn't it good to have another one?)
</p>
<h2>About this example</h2>
<p>
One thing you should notice - is that the document is forced to be served as "application/xhtml+xml". Otherwise,
the PHP version will fail to render (at least in my Opera).
JavaScript version does not require application/xhtml+xml HTTP header.
</p>
<h2>Contact me</h2>
<p>
Please write your reviews, suggestions etc. - to <a href="mailto:[email protected]?subject=SVGraph">my email</a>.
My name is Victor Bolshov, I live in Obninsk, Russia.
</p>
</body>
</html>
|
Download
