Gallery

<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.02.09-21-32',
    modules: {
        'gallery-aui-skin-base': {
            fullpath: 'http://yui.yahooapis.com/gallery-2011.02.09-21-32/build/gallery-aui-skin-base/css/gallery-aui-skin-base-min.css',
            type: 'css'
        },
        'gallery-aui-skin-classic': {
            fullpath: 'http://yui.yahooapis.com/gallery-2011.02.09-21-32/build/gallery-aui-skin-classic/css/gallery-aui-skin-classic-min.css',
            type: 'css',
            requires: ['gallery-aui-skin-base']
        }
    }
}).use('gallery-aui-chart', function(Y) {
		var interestPaid = 30;
		var totalPaid = 100;
 
		var Examples = {};
 
		/*
			Basic Pie Chart
		*/
 
		Examples.PieChart = {
			theData: [
		        { response: 'Principle', count: totalPaid - interestPaid },
		        { response: 'Interest', count: interestPaid }
		    ],
			getLegendLabelText: function(value) {
				var instance = this;
 
				return 'yay?' + value;
			}
		};
 
		Examples.PieChart.dataSource = new Y.DataSource.Local(
			{
				source: Examples.PieChart.theData
			}
		).plug(
			{
				fn: Y.DataSourceJSONSchema,
				cfg: {
					resultFields: ['response', 'count']
				}
			}
		);
 
		Examples.PieChart.chart = new Y.PieChart(
			{
		        dataField: 'count',
				dataSource: Examples.PieChart.dataSource,
		        categoryField: 'response',
				width: 400,
				height: 300,
				legendLabelFunction: Examples.PieChart.getLegendLabelText,
				dataTipFunction: function(item, index, series) {
					var instance = this;
 
					var data = series.data;
 
					var total = 0;
					var current = item.count;
 
					for (var i = 0; i < data.length; i++) {
						total += data[i].count;
					}
 
					var percentage = (current / total) * 100;
 
					return item.response + ':\n' + Y.DataType.Number.format(
						current,
						{
							thousandsSeparator: ',',
							prefix: '$',
							decimalPlaces: 2
						}
					) + '\n' + Y.DataType.Number.format(
						percentage,
						{
							decimalPlaces: 2,
							suffix: '%'
						}
					);
				},
				style: {
					legend: {
						display: 'right',
						padding: 10,
						spacing: 5,
						font: {
							family: 'Arial',
							size: 13
						}
					}
				}
		    }
		   ).render();
 
			/*
				Basic Line Chart
			*/
 
		Examples.LineChart = {
			expenses: [
				{ month: 'January', rent: 880.00, utilities: 894.68 },
				{ month: 'February', rent: 880.00, utilities: 901.35 },
				{ month: 'March', rent: 880.00, utilities: 889.32 },
				{ month: 'April', rent: 880.00, utilities: 884.71 },
				{ month: 'May', rent: 910.00, utilities: 879.811 },
				{ month: 'June', rent: 910.00, utilities: 897.95 }
			],
			series: [
				{displayName: 'Rent', yField: 'rent'},
				{displayName: 'Utilities', yField: 'utilities'}
			],
			formatCurrencyAxisLabel: function(value) {
				return Y.DataType.Number.format(
					value,
					{
						prefix: '$',
						thousandsSeparator: ',',
						decimalPlaces: 2
					}
				);
			},
 
			getDataTipText: function(item, index, series) {
				var toolTipText = series.displayName + 'for' + item.month;
 
				toolTipText += '\n' + Examples.LineChart.formatCurrencyAxisLabel(item[series.yField]);
 
				return toolTipText;
			},
			currencyAxis: (new Y.Chart.NumericAxis())
		};
 
		Examples.LineChart.dataSource = new Y.DataSource.Local(
			{
				source: Examples.LineChart.expenses
			}
		).plug(
			{
				fn: Y.DataSourceJSONSchema,
				cfg: {
					resultFields: ['month', 'rent', 'utilities']
				}
			}
		);
 
		Examples.LineChart.currencyAxis.minimum = 800;
		Examples.LineChart.currencyAxis.labelFunction = Examples.LineChart.formatCurrencyAxisLabel;
 
		Examples.LineChart.chart = new Y.LineChart(
			{
				dataSource: Examples.LineChart.dataSource,
				series: Examples.LineChart.series,
				xField: 'month',
				yAxis: Examples.LineChart.currencyAxis,
				width: 400,
				height: 300,
				dataTipFunction: Examples.LineChart.getDataTipText
			}
		).render();
 
		/*
			Stacked Bar Chart
		*/
 
		Examples.StackedBarChart = {
			data: [
				{ year: 2004, internetsales: 246852, printsales: 2523359, tvsales: 3123493 },
				{ year: 2005, internetsales: 851876, printsales: 1084952, tvsales: 3166920 },
				{ year: 2006, internetsales: 3917246, printsales: 587151, tvsales: 2330095 },
				{ year: 2007, internetsales: 5318185, printsales: 307456, tvsales: 1830729 }
			],
			series: [
				{
					xField: 'internetsales',
					displayName: 'Internet Sales'
				},
				{
					xField: 'printsales',
					displayName: 'Print Sales'
				},
				{
					xField: 'tvsales',
					displayName: 'Television Sales'
				}
			],
			numberToCurrency: function(value) {
				return Y.DataType.Number.format(
					value,
					{
						prefix: '$',
						thousandsSeparator: ','
					}
				);
			},
			currencyAxis: (new Y.Chart.NumericAxis())
		};
 
		Examples.StackedBarChart.currencyAxis.stackingEnabled = true;
		Examples.StackedBarChart.currencyAxis.labelFunction = Examples.StackedBarChart.numberToCurrency;
 
		Examples.StackedBarChart.dataSource = new Y.DataSource.Local(
			{
				source: Examples.StackedBarChart.data
			}
		).plug(
			{
				fn: Y.DataSourceJSONSchema,
				cfg: {
					resultFields: ['year', 'internetsales', 'printsales', 'tvsales']
				}
			}
		);
 
		Examples.StackedBarChart.chart = new Y.StackedBarChart(
			{
				series: Examples.StackedBarChart.series,
				yField: 'year',
				dataSource: Examples.StackedBarChart.dataSource,
				xAxis: Examples.StackedBarChart.currencyAxis,
				width: 400,
				height: 300
			}
		).render();
 
		/*
			Series Customizations...
		*/
 
		Examples.SeriesCustomizations = {
			expenses: [
				{
					month: 'January',
					rent: -1280.00,
					utilities: -494.68,
					clientprofits: 292.00,
					clientcosts: -85.00,
					pay: 2450.00,
					incidentals: -654.32
				},
				{
					month: 'February',
					rent: -1280.00,
					utilities: -401.35,
					clientprofits: 292.00,
					clientcosts: -185.00,
					pay: 2450.00,
					incidentals: -432.26
				},
				{
					month: 'March',
					rent: -1280.00,
					utilities: -489.32,
					clientprofits: 292.00,
					clientcosts: -485.00,
					pay: 2450.00,
					incidentals: -523.33
				},
				{
					month: 'April',
					rent: -1280.00,
					utilities: -484.71,
					clientprofits: 292.00,
					clientcosts: -185.00,
					pay: 2450.00,
					incidentals: -765.45
				},
				{
					month: 'May',
					rent: -1310.00,
					utilities: -479.811,
					clientprofits: 292.00,
					clientcosts: -485.00,
					pay: 2450.00,
					incidentals: -555.11
				},
				{
					month: 'June',
					rent: -1310.00,
					utilities: -497.95,
					clientprofits: 292.00,
					clientcosts: -220.00,
					pay: 2450.00,
					incidentals: -633.48
				}
			],
			calculateNet: function(dataArray) {
				var len = dataArray.length;
				var obj, net;
 
				for(var i = 0; i < len; i++) {
					obj = dataArray[i];
					net = 0;
 
					for(var z in obj) {
						if (!isNaN(obj[z])) {
							net += obj[z];
						}
					}
 
					obj.net = net;
				}
 
				return dataArray;
			},
			formatCurrencyAxisLabel: function(value) {
				return Y.DataType.Number.format(
					value,
					{
						prefix: '$',
						thousandsSeparator: ',',
						decimalPlaces: 2
					}
				);
			},
			getClientLegendLabelText: function(value) {
				return value + ' (profits/costs)';
			},
			getLegendLabelText: function(value) {
				return value;
			},
			getDataTipText: function(item, index, series) {
				var toolTipText = series.displayName + ' for ' + item.month;
 
				toolTipText += '\n' + Examples.SeriesCustomizations.formatCurrencyAxisLabel( Math.abs(item[series.yField]) );
 
				return toolTipText;
			},
			gainsLossesDataTipFunction: function(item, index, series) {
				var amt = item[series.yField];
				var toolTipText = series.displayName + (amt >= 0 ? ' Profits' : ' Costs') + ' for ' + item.month;
 
				toolTipText += '\n' + Examples.SeriesCustomizations.formatCurrencyAxisLabel(Math.abs(amt));
 
				return toolTipText;
			},
			currencyAxis: (new Y.Chart.NumericAxis()),
			categoryAxis: (new Y.Chart.CategoryAxis()),
			styleDef: {
				font:{color:'#eeeeee'},
				background:{color: '#252e35'},
				border:{size:1, color: '#000000'},
				yAxis:
				{
					titleRotation:90,
					color:'#eeeeee',
					titleFont:{color:'#eeeeee'},
					majorGridLines:{color:'#eeeeee'},
					minorTicks:{display:'none'},
					majorTicks:{display:'none'}
				},
				xAxis:
				{
					color:'#eeeeee',
					titleFont:{color:'#eeeeee'}
				},
				legend:
				{
					display: 'bottom',
					padding: 10,
					spacing: 5,
					font:
					{
						color:'#eeeeee',
						family: 'Arial',
						size: 11
					}
				}
			}
		};
 
		Examples.SeriesCustomizations.series = [
			{
				displayName: 'Rent',
				yField: 'rent',
				style: {borderColor: '#006600'}
			},
			{
				displayName: 'Utilities',
				yField: 'utilities',
				style: {borderColor: '#006699'}
			},
			{
				displayName: 'Client Work',
				yField: 'clientprofits',
				style: {borderColor: '#000000', fillColor: '#ff0000'},
				legendLabelFunction: Examples.SeriesCustomizations.getClientLegendLabelText,
				dataTipFunction: Examples.SeriesCustomizations.gainsLossesDataTipFunction
			},
			{
				displayName: 'Client Work',
				yField: 'clientcosts',
				style: {borderColor: '#000000', fillColor: '#ff0000'},
				showInLegend: false,
				dataTipFunction: Examples.SeriesCustomizations.gainsLossesDataTipFunction
			 },
			{
				displayName: 'Pay',
				yField: 'pay',
				style: {borderColor: '#000000'}
			},
			{
				displayName: 'Misc.',
				yField: 'incidentals',
				style: {borderColor: '#660000'}
			},
			{
				type: 'line',
				displayName: 'Net',
				yField: 'net',
				style: {fillColor: '#dddeee', borderColor: '#0000ff', lineColor: '#0000ff', skin: 'DiamondSkin'},
				dataTipFunction: Examples.SeriesCustomizations.gainsLossesDataTipFunction
			}
		];
 
		Examples.SeriesCustomizations.dataSource = new Y.DataSource.Local(
			{
				source: Examples.SeriesCustomizations.calculateNet(Examples.SeriesCustomizations.expenses)
			}
		).plug(
			{
				fn: Y.DataSourceJSONSchema,
				cfg: {
					resultFields: ['month', 'rent', 'utilities', 'clientcosts', 'clientprofits', 'pay', 'incidentals', 'net']
				}
			}
		);
 
		Examples.SeriesCustomizations.currencyAxis.labelFunction = Examples.SeriesCustomizations.formatCurrencyAxisLabel;
		Examples.SeriesCustomizations.currencyAxis.title = 'Money Gained';
 
		Examples.SeriesCustomizations.categoryAxis.title = 'Month';
 
		Examples.SeriesCustomizations.chart = new Y.ColumnChart(
			{
				series: Examples.SeriesCustomizations.series,
				xField: 'month',
				dataSource: Examples.SeriesCustomizations.dataSource,
				yAxis: Examples.SeriesCustomizations.currencyAxis,
				xAxis: Examples.SeriesCustomizations.categoryAxis,
				style: Examples.SeriesCustomizations.styleDef,
				legendLabelFunction: Examples.SeriesCustomizations.getLegendLabelText,
				dataTipFunction: Examples.SeriesCustomizations.getDataTipText,
				width: 400,
				height: 300
			}
		).render();
 
});