YUI Library Examples: Charts Control: Styling Lines, Borders and Fills

Data

Our data will include an array of objects, containing values for the date, expenses and revenue. We will create a function that calculates and adds a profits field to each of these items in the array, and will pass this to our datasource.

//revenue and expenses per day
var dailyFinancials =
[
	{date:"1/1/2009", revenue:14002, expenses:15000},
	{date:"1/2/2009", revenue:14027, expenses:16527},
	{date:"1/3/2009", revenue:15083, expenses:17283},
	{date:"1/4/2009", revenue:15006, expenses:18694},
	{date:"1/5/2009", revenue:15035, expenses:18235},
	{date:"1/6/2009", revenue:17871, expenses:18371},
	{date:"1/7/2009", revenue:25887, expenses:17787},
	{date:"1/8/2009", revenue:16149, expenses:16149},
	{date:"1/9/2009", revenue:17366, expenses:15666},
	{date:"1/10/2009", revenue:16424, expenses:15776},
	{date:"1/11/2009", revenue:15817, expenses:18717},
	{date:"1/12/2009", revenue:13554, expenses:18154},
	{date:"1/13/2009", revenue:19782, expenses:18182},
	{date:"1/14/2009", revenue:24400, expenses:18600},
	{date:"1/15/2009", revenue:21780, expenses:18480},
	{date:"1/16/2009", revenue:16681, expenses:21581},
	{date:"1/17/2009", revenue:24645, expenses:21745},
	{date:"1/18/2009", revenue:22212, expenses:20388},
	{date:"1/19/2009", revenue:24026, expenses:24726},
	{date:"1/20/2009", revenue:29264, expenses:24864},
	{date:"1/21/2009", revenue:19922, expenses:23622},
	{date:"1/22/2009", revenue:12373, expenses:18773},
	{date:"1/23/2009", revenue:11944, expenses:18444},
	{date:"1/24/2009", revenue:23741, expenses:18641},
	{date:"1/25/2009", revenue:24758, expenses:19758},
	{date:"1/26/2009", revenue:31611, expenses:19611},
	{date:"1/27/2009", revenue:25612, expenses:18212},
	{date:"1/28/2009", revenue:26830, expenses:18330},
	{date:"1/29/2009", revenue:27929, expenses:19029},
	{date:"1/30/2009", revenue:28153, expenses:19953},
	{date:"1/31/2009", revenue:28018, expenses:18118}
];

//calculate profits from revenue and expenses
function calculateProfits(dataArray)
{
	var dataLength = dataArray.length;
	for(var i = 0; i < dataLength; i++)
	{
		var dataObj = dataArray[i];
		dataObj.profits = dataObj.revenue - dataObj.expenses;
	}

return dataArray;
}

var myDataSource = new YAHOO.util.DataSource(calculateProfits(dailyFinancials));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema =
{
	fields:
	[
		"date",
		"expenses",
		"revenue",
		"profits"
	]
};

Series and Styles

Our series definition will include a series for expenses, revenue and profits. Each series will have a style block in which we will style the line, border and fill.

Since we are dealing with negative values, we want to have the ability to highlight them. The Cartesian Charts include a style called zeroGridline. If an axis contains positive and negative values, the zeroGridline style can be used to highlight the gridline that corresponds to zero on the axis. These properties will only take affect if the zero appears beyond the origin of an axis.

Chart

Next, we'll add methods for formatting our axis labels and datatip.

Create axes and set their label functions.

Finally, we'll add our chart, setting its series definition, styles, axes and datatip function.

For full details about styles and series styles, read the Charts Control User's Guide.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

Charts Control Examples:

More Charts Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.