DEVseo

The above shows an example of a YUI 2 chart. There are many reason why you might want a chart such as this on your website, such as showing data to users in a more friendly way, publishing commercial content that isnt just in a static table, or even just to add some colour in the form of a funky little widget showing using the latest trends on Twitter.

Whatever your reason for having a chart, I have found the YUI 2 charts library a very successful and easy-to-use component that allows you to fully customise your chart however you see fit, from changing the type of chart to show, whether it be a pie chart, or bar chart, to customise most of the detail in the chart such as the colours, the data tip, and the legend. There is so much you can do! So here is a simple guide to get you started.

So what do I need to get started?

Firstly, you will need an HTML page and a couple of files... or in my case a pre-configured truncated and minfied file containing everything you'll need (the full file list can be found in comments at the top of the script, feel free to remove any files you don't need). Here's one I made earlier. Once you have the file all you will need to do is add the following to the head of your HTML page ensuring that the paths to your file are correct:

<script type="text/javascript" src="/path/to/script/utilities.js"></script>

Once you have that your page is now ready to be charted! Open a new text document using the text editor of choice and we'll begin the javascript magic!

I've got all that, let's get started!

The script that is used to generate the chart above looks something like the following:

// new namespace for features javascript
YAHOO.namespace("stats");
// Namespace 3, ratings
YAHOO.stats.main = {
	YE: YAHOO.util.Event,
	Dom: YAHOO.util.Dom,
	$: YAHOO.util.Dom.get,
	genNo: 0,

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

		stats.stat_page = stats.$('chart-ex');
		if(stats.stat_page){
			stats.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(stats.puppies);
			myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

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

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

stats = YAHOO.stats.main;
stats.YE.onDOMReady(stats.init);

It may look a bit daunting to start with, but it is generally quite simple. All you need to know is what you want the chart to show and how you want that data to be presented. I have used a very simple JSON array for this example, simply because it is the easiest method for charts to extract data from. This array can be built on the server and passed to the chart by ajax, or a later example uses a table in the page to pull the correct information and display it in a chart. The YUI's datatable can be used in conjunction with the charts component to do just that, but that's for another day.

The first thing to look at is our array of values, which I have called "stats.puppies" ("stats" being the namespace used to encapsulate the script and stop it conflicting with others). As you can see this is a simple JSON array showing the name, breed and age of 8 random dogs. This data could be potentially anything, as long as it has values that can be charted.

The next few lines define the type of data we are using for our chart and what we want our chart to show. The most important part of this is the responseScheme, which must match the match of the variables in the JSON array so that the chart knows what information to pick out of the array. The final few lines instantiate our chart making it visible to readers of the page. All we have to define is the element that the chart replaces (in this case an empty div, but could be anything, I usually use the table that I got the values from), the source of our information, and the x and y fields. Et voila! We have a chart.

That is fundamentally it, in it's very simplest form. The great thing about charts is that they require no styling. Because the chart component itself is actually flash, all styling can be controlled in the javascript, which then passes that information to the flash, which renders it.

I know that YUI3 has recently been released (YAY!), but currently there is no charts component as it is still in development but I hope to see same functionality as we see here in YUI 2 with a lot more besides.

Below is an example of something a little more complicated that you can do with your chart. For a full code sample, and a few more examples please click here. As you can see in this example there are mutliple columns and a line going through the middle. This example shows the in and out goings of a finance company, and the red line is the overall equity left each month.

The example above is a little more complicated because the information has actually come from a table in the page (which you will see without javascript/in the source code for this page) and all of the values are pulled out in the script. If you check out the examples here you will see the script used to generate this chart. I have also included some styling, such as changing the colour of the columns, and adding a legend.

As you can see, the charts component is a powerful one and the great thing is, in most case you can create one function to handle multiple charts, all you have to do is pass the right variables through et voila! You have a chart.