Using The YUI Chart Component

Basic Chart Example

Here is the example page for the YUI Chart Component blog that I have written as a tutorial for you to implement a chart from data on your website with ease. In this example you can see the code used to create the charts and how you can either use remote, static or in-page data to actually build the chart. I'm also working on a generic JavaScript chart class that will allow you to build any chart with only a few parameters. Watch this space!

The Article

And the code for this looks like:

YAHOO.namespace('chart_example');
YAHOO.chart_example.main = {
	YE: YAHOO.util.Event,
	Dom: YAHOO.util.Dom,
	$: YAHOO.util.Dom.get,

	init: function(){
		// Get the chart swf file
		YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf";

		ce.stat_page = ce.$('chart-ex');
		if(ce.stat_page){
			ce.puppies =
				[
				   { name: "Ashley", breed: "German Shepherd", age: 12 },
				   { name: "Dirty Harry", breed: "Norwich Terrier", age: 5 },
				   { name: "Emma", breed: "Labrador Retriever", age: 9 },
				   { name: "Oscar", breed: "Yorkshire Terrier", age: 6 },
				   { name: "Riley", breed: "Golden Retriever", age: 6 },
				   { name: "Shannon", breed: "Greyhound", age: 12 },
				   { name: "Washington" ,breed: "English Bulldog", age: 8 },
				   { name: "Zoe", breed: "Labrador Retriever", age: 3 }
				];
			// Get the data from the page
			myDataSource = new YAHOO.util.DataSource(ce.puppies);
			myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

			myDataSource.responseSchema =
			{
			    fields: ["name","breed","age"]
			};

			var myChart = new YAHOO.widget.ColumnChart(ce.stat_page, myDataSource, {
			    xField: "name",
			    yField: "age"
			});
		}
	}
}

ce = YAHOO.chart_example.main;
ce.YE.onDOMReady(ce.init);

Financial Chart Example

Below is something a little more complicated that you can do with your chart. The chart is actually a table on the page that I have used as my datasource. With a bit of JavaScript traversal we can easily get the information out of the table for our chart.

The Table

Month Income Mortgage Utilities Finance Other
August 1200.00 -350.00 -500.00 -250.00 -150.00
September 1084.56 -350.00 -650.00 -250.00 -450.00
October 1224.36 -350.00 -360.50 -380.12 50

The Chart

Month Income Mortgage Utilities Finance Other
August 1200.00 -350.00 -500.00 -250.00 -150.00
September 1084.56 -350.00 -650.00 -250.00 -450.00
October 1224.36 -350.00 -360.50 -380.12 50
YAHOO.namespace('financial_chart');
YAHOO.financial_chart.main = {

	YE: YAHOO.util.Event,
	Dom: YAHOO.util.Dom,
	$: YAHOO.util.Dom.get,

	init: function(){
		// Get the chart swf file
		YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf";

		// Get details from the table in the page

		var chartView = [];

		var elRef = fc.$('financial-chart');
		var xTitle = 'Months';
		var yTitle = 'Costs';
		var chartHeight = 500;

		var statTr = elRef.getElementsByTagName('tr');
		var statTrLen = statTr.length;
		var j = 0;
		var field = [];
		for(var i=1;i<statTrLen;i++){
			var statTd = statTr[i].getElementsByTagName('td');

			var theMonth = statTd[0].innerHTML;
			var income = parseFloat(statTd[1].innerHTML);
			var mortgage = parseFloat(statTd[2].innerHTML);
			var utilities = parseFloat(statTd[3].innerHTML);
			var finance = parseFloat(statTd[4].innerHTML);
			var other = parseFloat(statTd[5].innerHTML);
			var net = income + (mortgage + utilities + finance + other);
			chartView[j] = {
				field1: theMonth,
				field2: income,
				field3: mortgage,
				field4: utilities,
				field5: finance,
				field6: other,
				field7: net
			};
			j++;
		}

		// Get the data from the page
		myDataSource = new YAHOO.util.DataSource(chartView);
		myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

		myDataSource.responseSchema =
			{
				resultsList: "Results",
			    fields: ["field1", "field2", "field3", "field4", "field5", "field6", "field7"]
			};
		var seriesDef =
			[
				{
					yField: "field2",
					displayName: "Income",
					style: {
						lineColor:0x666666,
			            lineAlpha:.5,
			            borderColor:0xD4C198,
			            fillColor:0xD1AF75
					}
				},
				{
					yField: "field3",
					displayName: "Mortgage",
					style: {
						lineColor:0xEC0289,
			            lineAlpha:.5,
			            borderColor:0xD4C198,
			            fillColor:0xD1BF75
					}
				},
				{
					yField: "field4",
					displayName: "Utilities",
					style: {
						lineColor:0x68BF28,
			            lineAlpha:.6,
			            borderColor:0xD4C198,
			            fillColor:0xD1CE75
					}
				},
				{
					yField: "field5",
					displayName: "Finance",
					style: {
						lineColor:0x98292B,
			            lineAlpha:.6,
			            borderColor:0xD4C198,
			            fillColor:0xC5D175
					}
				},
				{
					yField: "field6",
					displayName: "Other",
					style: {
						lineColor:0xB7C553,
			            lineAlpha:.6,
			            borderColor:0xD4C198,
			            fillColor:0xB5D175
					}
				},
				{
					type: "line",
					yField: "field7",
					displayName: "Net",
					style: {
						lineColor:0xF00F00,
			            lineAlpha:.6,
			            borderColor:0xD4C198,
			            fillColor:0xF00F00
					}
				}
			];
		var styleDef =
		{
			background:{color:0xFFFFFF},
			border: {size: 1, color:0x654495},
		    xAxis:
		    {
		        labelRotation:-90
		    },
		    yAxis:
		    {
		        titleRotation:-90
		    },
		    legend:
		    {
		        display: "bottom",
		        padding: 10,
		        spacing: 5,
		        background:{color:0xFFFFFF},
		        font:
		        {
		            color:0x666666,
		            family: "Arial",
		            size: 11
		        }
		    }
		}

		formatCurrencyAxisLabel = function( value ){
		    return YAHOO.util.Number.format( value,
		    {
		        prefix: "",
		        thousandsSeparator: ",",
		        decimalPlaces: 0
		    });
		}
		//DataTip function for the chart
		formatDataTipText = function(item, index, series){
		    var str = series.displayName + " for " + item.field1;
		    str += "\nú" + formatCurrencyAxisLabel(item[(series.yField)]);
		    return str;
		}

		var countAxis = new YAHOO.widget.NumericAxis();
		countAxis.title = yTitle;

		var dateAxis = new YAHOO.widget.CategoryAxis();
		dateAxis.title = xTitle;

		var mychart = new YAHOO.widget.ColumnChart(elRef, myDataSource,
			{
				series: seriesDef,
				xField: "field1",
				yAxis: countAxis,
				xAxis: dateAxis,
				wmode: "transparent",
				dataTipFunction:formatDataTipText,
				style: styleDef
			});
	}
}

fc = YAHOO.financial_chart.main;
fc.YE.onDOMReady(fc.init);