memo.xight.org

Home > Changelogメモ > 2006-08 > 2006-08-22 > WebFX - グラフを描くためのJavaScriptライブラリ

2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12
2002 : 01 02 03 04 05 06 07 08 09 10 11 12

2006-08-22

WebFX - グラフを描くためのJavaScriptライブラリ

- Sample

<html>
	<head>
		<script type="text/javascript" src="includes/iecanvas.js"></script>
		<script type="text/javascript" src="includes/chart.js"></script>
		<script type="text/javascript" src="includes/canvaschartpainter.js"></script>
		<link rel="stylesheet" type="text/css" media="screen" href="includes/canvaschart.css" />
	</head>
	<body>
		<div id="chart" class="chart" style="width: 400px; height: 200px;"></div>
	</body>
</html>

function draw() {
	var c = new Chart(document.getElementById('chart'));
	c.setDefaultType(CHART_AREA | CHART_STACKED);
	c.setGridDensity(5, 5);
	c.setVerticalRange(0, 100);
	c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri']);
	c.add('Spam',            '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70, 60]);
	c.add('Innocent',        '#8080FF', [ 8,  7, 12, 20, 24, 16, 36, 28, 28, 45]);
	c.add('Missed Spam',     '#A5A5FF', [ 8,  7, 12, 20, 24, 16, 36, 36, 18,  5]);
	c.add('False Positives', '#DEDEFF', [ 1,  2,  3,  2,  1,  4, 18, 12,  8,  7]);
	c.draw();
}
 
window.onload = function() {
	ieCanvasInit('includes/iecanvas.htc');
	draw(); 
};

- Reference
Chart Usage (WebFX)
http://webfx.eae.net/dhtml/chart/usage.html

- via
phpspot開発日誌 - 2006-08-22 - JavaScriptでグラフを描画出来るライブラリ『WebFX』
http://phpspot.org/blog/archives/2006/08/javascriptwebfx.html