YUI Library Examples: Charts Control: Column Chart with Rotated Title and Labels

Data

We will start by adding our data for the charts.


1	YAHOO.example.monthlyExpenses =
2	[
3	{ month: "January", rent: 1350.00, utilities: 941.68 },
4	{ month: "February", rent: 1350.00, utilities: 901.35 },
5	{ month: "March", rent: 1350.00, utilities: 789.32 },
6	{ month: "April", rent: 1350.00, utilities: 684.71 },
7	{ month: "May", rent: 1500.00, utilities: 779.811 },
8	{ month: "June", rent: 1500.00, utilities: 897.95 },
9	{ month: "July", rent: 1500.00, utilities: 919.811 },
10	{ month: "August", rent: 1500.00, utilities: 937.95 },
11	{ month: "September", rent: 1500.00, utilities: 779.811 },
12	{ month: "October", rent: 1500.00, utilities: 697.95 },
13	{ month: "November", rent: 1500.00, utilities: 679.811 },
14	{ month: "December", rent: 1500.00, utilities: 897.95 }
15	];
16
17	var myDataSource = new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses );
18	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
19	myDataSource.responseSchema =
20	{
21	fields: [ "month", "rent", "utilities" ]
22	};
	view plain \| print \| ?

Series and Styles

Next we'll add a series to our chart, and give it a style.


1	//series definition for chart
2	var seriesDef =
3	[
4	{
5	displayName: "Rent",
6	yField: "rent",
7	style:{size:10}
8	},
9	{
10	displayName: "Utilities",
11	yField: "utilities",
12	style:{size:10}
13	}
14	];
	view plain \| print \| ?

In the styles for our x-axis and y-axis, we'll set the corresponding labelRotation and titleRotation to -90. This will make the title on the y-axis and the labels on the x-axis to be rotated -90 degrees (counterclockwise). While both styles accept values between -90 and 90, it is generally recomended to only use the values -90, 90 or 0 (default), as text fields will display more clearly at these settings.


1	//Style object for chart
2	var styleDef =
3	{
4	xAxis:
5	{
6	labelRotation:-90
7	},
8	yAxis:
9	{
10	titleRotation:-90
11	}
12	}
	view plain \| print \| ?

Chart

Add our axes and label formatting methods.


1	//format currency
2	YAHOO.example.formatCurrencyAxisLabel = function( value )
3	{
4	return YAHOO.util.Number.format( value,
5	{
6	prefix: "$",
7	thousandsSeparator: ",",
8	decimalPlaces: 2
9	});
10	}
11
12	//DataTip function for the chart
13	YAHOO.example.getDataTipText = function( item, index, series )
14	{
15	var toolTipText = series.displayName + " for " + item.month;
16	toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( item[series.yField] );
17	return toolTipText;
18	}
19
20	//create a Numeric Axis for displaying dollars
21	var currencyAxis = new YAHOO.widget.NumericAxis();
22	currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
23	currencyAxis.title = "Money Spent";
24
25	//create Category Axis to specify a title for the months
26	var categoryAxis = new YAHOO.widget.CategoryAxis();
27	categoryAxis.title = "Month";
	view plain \| print \| ?

Finally, we'll add the chart and call it good.


1	//create a Chart
2	var mychart = new YAHOO.widget.ColumnChart( "chart", myDataSource,
3	{
4	series: seriesDef,
5	xField: "month",
6	yAxis: currencyAxis,
7	xAxis: categoryAxis,
8	style: styleDef,
9	dataTipFunction: YAHOO.example.getDataTipText
10	});
	view plain \| print \| ?

There are even more styles available for the axes than we've covered in this tutorial. For full details about the axes styles, read the Charts Control User's Guide.

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

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.