YUI Library Examples: Charts Control: Hide series in a chart.

Add checkboxes for toggling visibility.

First, we'll add two checkboxes, one for each series in the chart. These will be used to toggle the visibility of each series. Listening for the checkboxes' onclick events, we'll use the Chart's setSeriesStylesByIndex method to update the visibility style of each series.


1	<table>
2	<tr>
3	<td>Show Revenue Data:</td>
4	<td><input id="checkbutton1" type="checkbox" name="series1" value="1" checked="true" onclick='mychart.setSeriesStylesByIndex(0,{visibility:this.checked?"visible":"hidden"});'></td>
5	</tr>
6	<tr>
7	<td>Show Expenses Data:</td>
8	<td><input id="checkbutton2" type="checkbox" name="series2" value="2" checked="true" onclick='mychart.setSeriesStylesByIndex(1,{visibility:this.checked?"visible":"hidden"});'></td>
9	</tr>
10	</table>
	view plain \| print \| ?

Create a DataSource

For our data, let's start with a json formatted data source that contains two fields, one for revenue and one for expenses.


1	var sampleData =
2	{
3	"Results":
4	[
5	{"date":"5/1/2008", "revenue":"856.00", "expenses":"838.00"},
6	{"date":"5/15/2008", "revenue":"888.00", "expenses":"873.00"},
7	{"date":"6/1/2008", "revenue":"817.00", "expenses":"891.00"},
8	{"date":"6/15/2008", "revenue":"810.00", "expenses":"849.00"},
9	{"date":"7/1/2008", "revenue":"854.00", "expenses":"802.00"},
10	{"date":"7/15/2008", "revenue":"881.00", "expenses":"858.00"},
11	{"date":"8/1/2008", "revenue":"859.00", "expenses":"828.00"},
12	{"date":"8/15/2008", "revenue":"859.00", "expenses":"807.00"},
13	{"date":"9/1/2008", "revenue":"874.00", "expenses":"857.00"},
14	{"date":"9/15/2008", "revenue":"847.00", "expenses":"820.00"},
15	{"date":"10/1/2008", "revenue":"871.00", "expenses":"817.00"},
16	{"date":"10/15/2008", "revenue":"806.00", "expenses":"801.00"},
17	{"date":"11/1/2008", "revenue":"832.00", "expenses":"872.00"},
18	{"date":"11/15/2008", "revenue":"872.00", "expenses":"885.00"},
19	{"date":"12/1/2008", "revenue":"861.00", "expenses":"833.00"},
20	{"date":"12/15/2008", "revenue":"807.00", "expenses":"874.00"},
21	{"date":"1/1/2009", "revenue":"813.00", "expenses":"887.00"},
22	{"date":"1/15/2009", "revenue":"857.00", "expenses":"858.00"},
23	{"date":"2/1/2009", "revenue":"823.00", "expenses":"893.00"},
24	{"date":"2/15/2009", "revenue":"858.00", "expenses":"854.00"},
25	{"date":"3/1/2009", "revenue":"808.00", "expenses":"853.00"},
26	{"date":"3/15/2009", "revenue":"877.00", "expenses":"868.00"},
27	{"date":"4/1/2009", "revenue":"846.00", "expenses":"855.00"},
28	{"date":"4/15/2009", "revenue":"852.00", "expenses":"821.00"}
29	]
30	};
31
32	//data source
33	var jsonData = new YAHOO.util.DataSource( sampleData );
34	jsonData.responseType = YAHOO.util.DataSource.TYPE_JSON;
35	jsonData.responseSchema =
36	{
37	resultsList: "Results",
38	fields: [
39	"date",
40	{key:"revenue", parser:"number"},
41	{key:"expenses", parser:"number"}
42	]
43	};
	view plain \| print \| ?

var sampleData =
	{
		"Results":
		[
			{"date":"5/1/2008", "revenue":"856.00", "expenses":"838.00"},
			{"date":"5/15/2008", "revenue":"888.00", "expenses":"873.00"},
			{"date":"6/1/2008", "revenue":"817.00", "expenses":"891.00"},
			{"date":"6/15/2008", "revenue":"810.00", "expenses":"849.00"},
			{"date":"7/1/2008", "revenue":"854.00", "expenses":"802.00"},
			{"date":"7/15/2008", "revenue":"881.00", "expenses":"858.00"},
			{"date":"8/1/2008", "revenue":"859.00", "expenses":"828.00"},
			{"date":"8/15/2008", "revenue":"859.00", "expenses":"807.00"},
			{"date":"9/1/2008", "revenue":"874.00", "expenses":"857.00"},
			{"date":"9/15/2008", "revenue":"847.00", "expenses":"820.00"},
			{"date":"10/1/2008", "revenue":"871.00", "expenses":"817.00"},
			{"date":"10/15/2008", "revenue":"806.00", "expenses":"801.00"},
			{"date":"11/1/2008", "revenue":"832.00", "expenses":"872.00"},
			{"date":"11/15/2008", "revenue":"872.00", "expenses":"885.00"},
			{"date":"12/1/2008", "revenue":"861.00", "expenses":"833.00"},
			{"date":"12/15/2008", "revenue":"807.00", "expenses":"874.00"},
			{"date":"1/1/2009", "revenue":"813.00", "expenses":"887.00"},
			{"date":"1/15/2009", "revenue":"857.00", "expenses":"858.00"},
			{"date":"2/1/2009", "revenue":"823.00", "expenses":"893.00"},
			{"date":"2/15/2009", "revenue":"858.00", "expenses":"854.00"},
			{"date":"3/1/2009", "revenue":"808.00", "expenses":"853.00"},
			{"date":"3/15/2009", "revenue":"877.00", "expenses":"868.00"},
			{"date":"4/1/2009", "revenue":"846.00", "expenses":"855.00"},
			{"date":"4/15/2009", "revenue":"852.00", "expenses":"821.00"}
		]
	};

//data source
	var jsonData = new YAHOO.util.DataSource( sampleData );
	jsonData.responseType = YAHOO.util.DataSource.TYPE_JSON;
	jsonData.responseSchema =
	{
		resultsList: "Results",
		fields: [
				"date",
				{key:"revenue", parser:"number"},
				{key:"expenses", parser:"number"}
			]
	};

Define our Text formatting functions

Next we'll create a few methods to format the labels for our axes and data tips.


1	YAHOO.example.formatTimeData = function(value, major)
2	{
3	var formattedData = YAHOO.util.Date.format(new Date(value), {format:"%b, %Y"});
4	return formattedData.toString();
5	}
6
7	YAHOO.example.formatCurrencyAxisLabel = function( value )
8	{
9	return YAHOO.util.Number.format( value,
10	{
11	prefix: "$",
12	thousandsSeparator: ",",
13	decimalPlaces: 2
14	});
15	}
16
17	YAHOO.example.formatDataTipText = function(item, index, series)
18	{
19	var str = "Date: " + item.date;
20	str += "\n" + series.displayName + ": " + YAHOO.example.formatCurrencyAxisLabel(item[series.yField]);
21	return str;
22	}
	view plain \| print \| ?

Define a Series Definition

Now we can set a series definition on the chart, designating two series--one for revenue and one for expenses. We'll specify a different color for each series to help differentiate them.


1	var seriesDef = [
2	{displayName:"Revenue", yField:"revenue", style:{color:0xffcc66}},
3	{displayName:"Expenses", yField:"expenses", style:{color:0xa1c3e1}}
4	];
	view plain \| print \| ?

Create the x and y axes

Now we'll create the axes, a TimeAxis for our x-axis and a NumericAxis for our y-axis. This will allow us to display each series on a timeline. Using the text formatting functions we previously created, we'll be able to display the revenue and expenses as dollar amounts, and the timeline in a localized date format.


1	//Create a TimeAxis
2	var myTimeAxis = new YAHOO.widget.TimeAxis();
3	myTimeAxis.labelFunction = YAHOO.example.formatTimeData;
4	myTimeAxis.majorTimeUnit = "month";
5
6	//Create a NumericAxis
7	myCurrencyAxis = new YAHOO.widget.NumericAxis();
8	myCurrencyAxis.alwaysShowZero = false;
9	myCurrencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
	view plain \| print \| ?

Create the style definition for the chart.

To further improve the look of the chart as a whole, we'll create a style definition and modify the background color and the border. We'll also make some axis-independent style adjustments, for things like label rotation and data ticks.


1	var styleDef =
2	{
3	padding:0,
4	border:{size:4, color:0x8899dd},
5	background:{color:0xd5d5d5},
6	xAxis:
7	{
8	labelRotation:-90,
9	majorTicks:{display:"inside", length:6},
10	minorTicks:{display:"inside", size:1},
11	padding:5
12	},
13	yAxis:
14	{
15	zeroGridLine:{size:5, color:0xff0000},
16	labelRotation:0,
17	minorTicks:{display:"none", length:12}
18	}
19	};
	view plain \| print \| ?

Create the Chart

Finally, we'll initialize the chart, passing it the series and style definitions. We'll also make sure to reset the checkboxes to unchecked when the contentReady event fires and our chart displays.


1	var mychart = new YAHOO.widget.LineChart("chart", jsonData,
2	{
3	series: seriesDef,
4	style: styleDef,
5	xField: "date",
6	xAxis: myTimeAxis,
7	yAxis: myCurrencyAxis,
8	dataTipFunction:YAHOO.example.formatDataTipText
9	});
10
11	mychart.on("contentReady", updateForm);
12
13	function updateForm()
14	{
15	var series = mychart.get("series");
16	var check1 = document.getElementById("checkbutton1");
17	var check2 = document.getElementById("checkbutton2");
18	if(series[0] && series[0].style && series[0].style.visibility && series[0].style.visibility == "hidden")
19	{
20	check1.checked = false;
21	}
22	else
23	{
24	check1.checked = true;
25	}
26	if(series[1] && series[1].style && series[1].style.visibility && series[1].style.visibility == "hidden")
27	{
28	check2.checked = false;
29	}
30	else
31	{
32	check2.checked = true;
33	}
34	}
	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.