chart/tests/canvasgraph.html

	canvasgraph.html revision 106cc795c2891f2d2d142772cadefbcb5975bcfa
5fb13eb51bf641a3434828947e137e1a5f2d7eb2Lennart Poettering<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
12b42c76672a66c2d4ea7212c14f8f1b5a62b78dTom Gundersen<html>
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips<head>
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips<meta http-equiv="content-type" content="text/html; charset=utf-8">
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips<style>
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips/*Supplemental CSS for the YUI distribution*/
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips#custom-doc { width: 95%; min-width: 950px; }
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips#pagetitle {background-image: url(/assets/bg_hd.gif);}
5430f7f2bc7330f3088b894166bf3524a067e3d8Lennart Poettering</style>
5430f7f2bc7330f3088b894166bf3524a067e3d8Lennart Poettering<!-- BEGIN EXAMPLE CODE -->
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips	<script type="text/javascript" src="/build/yui/yui.js"></script>
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips    <script type="text/javascript" src="/build/infographics/infographics.js"></script>
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips<body>
5430f7f2bc7330f3088b894166bf3524a067e3d8Lennart Poettering
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips	<script>
5430f7f2bc7330f3088b894166bf3524a067e3d8Lennart Poettering		var starttime;
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips		var mydate = new Date();
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips		starttime = mydate.valueOf();
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips		function writeToDiv(message)
4149f86d816fc0fef41d35de5beb09bfe81e0d6aBrandon Philips		{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			var mydate = new Date();
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			var diff = mydate.valueOf() - starttime;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			message += ": " + diff;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			document.getElementById("output").innerHTML += "<br/>" + message;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek		}
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			var getData = function()
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				var bigArray = new Array();
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				var tempObj = new Object();
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				var i = (Math.floor(Math.random()*12)) + 1;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				var end = i + 23;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				var month;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				var year;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				var expensesValue = 8000;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				for(i;i <= end; i++)
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					month = i;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					year = 2009;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					expensesValue = Math.floor(expensesValue * .9);
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					if(i > 24)
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek						month = i -24;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek						year +=2;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					}
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					else if(i > 12)
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek						month = i - 12;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek						year +=1;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					}
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					bigArray  = bigArray.concat(getMonthOfDates(month, getNumberOfDays(month, year), year, expensesValue))
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				}
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				return bigArray;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			}
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			function getNumberOfDays(mon, year)
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				if(mon == 4 || mon == 6 || mon == 9 || mon ==11)
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					return 30;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				}
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				if(mon == 2)
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					return year%4==0?29:28;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				}
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				return 31;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			}
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			function getMonthOfDates(mon, max, year, value)
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				var month = new Array();
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				dValue = value;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				for(var i = 1; i <= max; i++)
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					var obj = new Object();
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					obj.date = mon + "/" + i + "/" + year;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					var div = ((Math.random()*5))
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					var cont = (Math.random() * 101) * div;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					obj.revenue = (cont + Math.floor((Math.random() * 101))).toFixed(2);
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					dValue = dValue - 1;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					obj.expenses = (cont + Math.floor((Math.random() * 101))).toFixed(2);
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					month[month.length] = obj;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				}
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				return month;
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			}
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek		</script>
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek<div>
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek		<h1>Chart with Multiple Axes</h1>
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			<div id="chart" style="width:800px;height:400px;background-color:#ffffff;border:2px solid #5577AF"></div>
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek		<div id="output"></div>
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek		<script>
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek			YUI({}).use('node', 'json', 'event-custom', 'base', 'graphic', 'infographics', function (Y)
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek				{
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					// Create data
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					var mydata = getData();
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					var expensegraphstyles = {
6d785b6d07767834a7a00209b5de376ea42075feLennart Poettering						color:"#5577AF",
6d785b6d07767834a7a00209b5de376ea42075feLennart Poettering						marker:{fillColor:"#5577AF"},
b938cb902c3b5bca807a94b277672c64d6767886Jan Engelhardt						weight:"2",
b938cb902c3b5bca807a94b277672c64d6767886Jan Engelhardt						showMarkers:false
6d785b6d07767834a7a00209b5de376ea42075feLennart Poettering					};
6d785b6d07767834a7a00209b5de376ea42075feLennart Poettering
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					// Add revenue graph styles
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					var revenuegraphstyles = {
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek						color:"#FF0000",
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek						marker:{fillcolor:"#ff0000"},
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek						weight:"2",
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek						showMarkers:false
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					};
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					var dataProvider = {data:mydata};
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					var timeaxis = new Y.TimeAxis({dataProvider:dataProvider});
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					var numericaxis = new Y.NumericAxis({dataProvider:dataProvider});
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					timeaxis.addKey("date");
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek					numericaxis.addKey("revenue");
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek
657cf7f4f8d376e082db48022d2be193ff647d06daurnimator					var linegraph = new Y.LineSeries({parent:"chart", xAxis:timeaxis, yAxis:numericaxis, xKey:"date", yKey:"revenue", styles:expensegraphstyles});
657cf7f4f8d376e082db48022d2be193ff647d06daurnimator				});
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek</script>
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek<!-- END EXAMPLE CODE -->
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek</div>
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek</body>
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek</html>
302fbdf29eb0ad4ca1fe8ee18755edad7db11b37Zbigniew Jędrzejewski-Szmek