YUI Library Home

Site Search (YDN & YUIBlog):

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

# Charts Control: Hide series in a chart.

A YUI Charts Control allows you to dynamically change series styles. In this example, we will allow for the hiding of each series.

Please note: The YUI Charts Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the Adobe Flash Player Download Center.

View example in new window.

Bi-Monthly Numbers
Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the Adobe Flash Player Download Center.

Show Expenses Data: |
Show Revenue Data: |

## 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.

<table> <tr> <td>Show Expenses Data:</td> <td><input id="checkbutton1" type="checkbox" name="series1" value="1" checked="true" onclick='mychart.setSeriesStylesByIndex(0,{visibility:this.checked?"visible":"hidden"});'></td> </tr> <tr> <td>Show Revenue Data:</td> <td><input id="checkbutton2" type="checkbox" name="series2" value="2" checked="true" onclick='mychart.setSeriesStylesByIndex(1,{visibility:this.checked?"visible":"hidden"});'></td> </tr> </table>

## 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.

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.

YAHOO.example.formatTimeData = function(value, major) { var formattedData = YAHOO.util.Date.format(new Date(value), {format:"%b, %Y"}); return formattedData.toString(); } YAHOO.example.formatCurrencyAxisLabel = function( value ) { return YAHOO.util.Number.format( value, { prefix: "$", thousandsSeparator: ",", decimalPlaces: 2 }); } YAHOO.example.formatDataTipText = function(item, index, series) { var str = "Date: " + item.date; str += "\n" + series.displayName + ": " + YAHOO.example.formatCurrencyAxisLabel(item[series.yField]); return str; }

## 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.

var seriesDef = [ {displayName:"Revenue", yField:"revenue", style:{color:0xffcc66}}, {displayName:"Expenses", yField:"expenses", style:{color:0xa1c3e1}} ];

## 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.

//Create a TimeAxis var myTimeAxis = new YAHOO.widget.TimeAxis(); myTimeAxis.labelFunction = YAHOO.example.formatTimeData; myTimeAxis.majorTimeUnit = "month"; //Create a NumericAxis myCurrencyAxis = new YAHOO.widget.NumericAxis(); myCurrencyAxis.alwaysShowZero = false; myCurrencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;

## 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.

var styleDef = { padding:0, border:{size:4, color:0x8899dd}, background:{color:0xd5d5d5}, xAxis: { labelRotation:-90, majorTicks:{display:"inside", length:6}, minorTicks:{display:"inside", size:1}, padding:5 }, yAxis: { zeroGridLine:{size:5, color:0xff0000}, labelRotation:0, minorTicks:{display:"none", length:12} } };

## 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.

var mychart = new YAHOO.widget.LineChart("chart", jsonData, { series: seriesDef, style: styleDef, xField: "date", xAxis: myTimeAxis, yAxis: myCurrencyAxis, dataTipFunction:YAHOO.example.formatDataTipText }); mychart.on("contentReady", updateForm); function updateForm() { var series = mychart.get("series"); var check1 = document.getElementById("checkbutton1"); var check2 = document.getElementById("checkbutton2"); if(series[0] && series[0].style && series[0].style.visibility && series[0].style.visibility == "hidden") { check1.checked = false; } else { check1.checked = true; } if(series[1] && series[1].style && series[1].style.visibility && series[1].style.visibility == "hidden") { check2.checked = false; } else { check2.checked = true; } }

## 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:

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:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings