Description
Test of the Chart Webfx JavaScript charting module, by Emil A Eklund. References the chart_webfx_test_js snippet, where the actual JS code to generate the charts is.
Run
| View code [+] | 
Create a snippet based on this »
View in new window »
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Chart Demo (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://www.kogbox.com/stylesheets/default.css" media="screen" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.kogbox.com/chart/excanvas.js"></script>
<script type="text/javascript" src="http://www.kogbox.com/chart/wz_jsgraphics.js"></script>
<script type="text/javascript" src="http://www.kogbox.com/chart/chart.js"></script>
<script type="text/javascript" src="http://www.kogbox.com/chart/canvaschartpainter.js"></script>
<script type="text/javascript" src="http://www.kogbox.com/chart/jgchartpainter.js.js"></script>
<script type="text/javascript" src="http://run.kogbox.com/php/1/chart_webfx_text_js"></script>
<link rel="stylesheet" type="text/css" href="http://www.kogbox.com/chart/canvaschart.css" />
<style type="text/css">
.chart { margin-left: 20px; }
</style>
</head>
<body onload="demo();">
<div class="webfx-main-body">
<h2>Demo</h2>
<p>
A few demonstrations of the chart competent, using the
<code>CanvasChartPainter</code> painter implementation.
</p>
<p>
Tested in Mozilla Firefox 1.5, Opera 9 and Internet Explorer 6 however
any browser with JS, DOM and Canvas support should be able to handle it.
Internet Explorer requires a canvas implementation, such as the
<a href="http://developer.novell.com/xforms/">Novell XForms plugin</a> or
the <a href="http://me.eae.net/archive/2005/12/29/canvas-in-ie/">IECanvas</a>
emulation script (used here).
</p>
<h3>Stacked Area, Line and Bar</h3>
<p>
A stacked area chart, complete with labels and a legend. Also includes a
line and two bars.
<div id="chart" class="chart" style="width: 700px; height: 400px;"></div>
</p>
<h3>Stacked Area, Line, Smaller</h3>
<p>
Smaller version of the above chart, without the bars and with reduced
grid density.
<div id="chart2" class="chart" style="width: 400px; height: 200px;"></div>
</p>
<h3>Lines</h3>
<p>
Line chart, without the legend.
<div id="chart3" class="chart" style="width: 400px; height: 200px;"></div>
</p>
<h3>Bars</h3>
<p>
Bar chart, without legend and labels.
<div id="chart4" class="chart" style="width: 200px; height: 100px;"></div>
</p>
<p class="author">Author: Emil A Eklund</p>
<!-- end webfx-main-body -->
</div>
</body>
</html>
Post to Twitter
Comments (1) | View comments for all versions (1)
jeff (author) said: 7 Jan
See http://webfx.eae.net/dhtml/chart/chart.html for notes on usage.
Log in if you have a Kogbox account.