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.

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.

Define our Text formatting functions

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

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.

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

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.

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.