YUI Library Examples: Charts Control: Chart with 2 Numeric Axes

Create a DataSource

In this example the data provider for the LineChart is a standard JavaScript Array. Each object in this Array contains multiple values, any of which can be used for the series definition in the LineChart.


1	YAHOO.example.monthlyExpenses =
2	[
3	{ month: "January", rent: 3880.00, car: 298.68, power:56.98, cable:115.50 },
4	{ month: "February", rent: 3880.00, car: 298.68, power:68.99, cable:115.42 },
5	{ month: "March", rent: 3880.00, car: 298.68, power:46.85, cable:123.76 },
6	{ month: "April", rent: 3880.00, car: 315.71, power:42.52, cable:105.44 },
7	{ month: "May", rent: 4010.00, car: 315.71, power:59.67, cable:111.42 },
8	{ month: "June", rent: 4910.00, car: 315.71, power:68.98, cable:114.32 }
9	];
10
11	var myDataSource = new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses );
12	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
13	myDataSource.responseSchema =
14	{
15	fields: [ "month", "rent", "car", "power", "cable" ]
16	};
	view plain \| print \| ?

The Array is passed to a new DataSource instance, and fields are defined to specify which items will be used from the original source. In this case we'll use all of them: "month", "rent", "car", "power", and "cable".

Define our Text formatting functions

Next we will create methods to format the labels for our axes and data tip.


1	YAHOO.example.formatCurrencyAxisLabel = function( value )
2	{
3	return YAHOO.util.Number.format( value,
4	{
5	prefix: "$",
6	thousandsSeparator: ",",
7	decimalPlaces: 2
8	});
9	}
10
11	YAHOO.example.getDataTipText = function( item, index, series )
12	{
13	var toolTipText = series.displayName + " for " + item.month;
14	toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( item[series.yField] );
15	return toolTipText;
16	}
	view plain \| print \| ?

Create the Numeric Axes

We will use two y-axes in this chart, so we will need to create two NumericAxis instances. When using dual axes, you need to define a primary and a secondary axis. This is defined by the order property of the NumericAxis. The default value for order is "primary". The NumericAxis also has a position property that enables us to select where each axis will appear on the chart. When the NumericAxes are on the y-axis, the primary axis will default to the left side. When the NumericAxes are on the x-axis, the primary axis will default to the bottom. In our example, we will position the primary axis on the right by explicitly setting position on both axes.


1	var currencyAxis = new YAHOO.widget.NumericAxis();
2	currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
3	currencyAxis.alwaysShowZero = false;
4	currencyAxis.calculateByLabelSize = true;
5	currencyAxis.position = "right";
6	currencyAxis.title = "Utilities";
7
8	var currencyAxis2 = new YAHOO.widget.NumericAxis();
9	currencyAxis2.order = "secondary";
10	currencyAxis2.position = "left";
11	currencyAxis2.title = "Rent";
12	currencyAxis2.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
13	currencyAxis2.alwaysShowZero = false;
14
15	//place the two axis in an array to be passed to the chart as configuration attribute
16	var axes = new Array();
17	axes.push(currencyAxis);
18	axes.push(currencyAxis2);
	view plain \| print \| ?

Define a Series Definition

When using multiple axes, we bind each series to an axis with the axis property.


1	var seriesDef =
2	[
3	{displayName: "Rent", yField: "rent", axis: "secondary", style: {color:0x6238A7, size:8}},
4	{displayName: "Car", yField: "car", axis: "primary", style: {color:0x00E72E, size:8}},
5	{displayName: "Power", yField: "power", axis: "primary", style: {color:0xFFA329, size:8}},
6	{displayName: "Cable", yField: "cable", axis: "primary", style: {color:0xFF4AD8, size:8}}
7	];
	view plain \| print \| ?

In the series definition above, we bind the rent field to the secondary axis and the other fields to the primary axis.

Create the style definition for the chart.

When using two axes, the secondary axis will inherit styles from the primary axis. You can, however, override styles for the secondary axis. In our example, we will set the secondaryYAxis title rotation to 90 degrees.


1	var styleDef = {
2	padding:0,
3	border:{size:3, color:0x8899dd},
4	background:{color:0xaeb7dc},
5	dataTip:{font:{color:"#000000"}, background:{color:0x00E72E, alpha:.3}},
6	font:{color: "#eeeeee"},
7	yAxis:
8	{
9	labelDistance:0,
10	titleRotation:-90,
11	titleFont:{color:0xeeeeee},
12	minorTicks:{display:"none"},
13	majorGridLines:{color:0xeeeeee},
14	color:0xeeeeee,
15	majorTicks:{color:0xeeeeee}
16	},
17	secondaryYAxis:
18	{
19	titleRotation:90
20	},
21	xAxis:
22	{
23	majorTicks:{display:"none"},
24	labelRotation:-90,
25	size:0
26	}
27	}
	view plain \| print \| ?

Create the Chart

Because we have multiple axes, instead of using the yAxis attribute to set a single NumericAxis, we will use the yAxes attribute, passing our array of axes.


1	var mychart = new YAHOO.widget.LineChart( "chart", myDataSource,
2	{
3	constrainViewport:false,
4	series: seriesDef,
5	xField: "month",
6	yAxes: axes,
7	style: styleDef
8	});
	view plain \| print \| ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 131ms (+95) 11:12:40 PM:
LogReader  instance0
LogReader initialized

INFO 36ms (+0) 11:12:40 PM:

Get

Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js

INFO 36ms (+1) 11:12:40 PM:

Get

attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js

INFO 35ms (+35) 11:12:40 PM:
Get
_next: q0, loaded: undefined

INFO 0ms (+0) 11:12:40 PM:
global
Logger initialized

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

Reload with logging
and debugging disabled.