YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Charts Control: Customize series items

# Charts Control: Customize series items

A YUI Charts Control can be configured at the Chart and series level. In this example, we'll use series properties to customize a combination chart.

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.

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

## Create a DataSource

In this example, we're going to use custom series properties to format and display series information differently. We'll start with a data source representing household income and expenses. Expenses are represented negative values while income is represented with positive values. We'll use these values to calculate net income/losses, and add the calculated information as an additional property in the data source.

YAHOO.example.monthlyExpenses = [ { month: "January", rent: -1280.00, utilities: -494.68, gamblingprofits:292.00, gamblinglosses:-85.00, pay:2450.00, incidentals:-654.32 }, { month: "February", rent: -1280.00, utilities: -401.35, gamblingprofits:292.00, gamblinglosses:-185.00, pay:2450.00, incidentals:-432.26 }, { month: "March", rent: -1280.00, utilities: -489.32, gamblingprofits:292.00, gamblinglosses:-485.00, pay:2450.00, incidentals:-523.33 }, { month: "April", rent: -1280.00, utilities: -484.71, gamblingprofits:292.00, gamblinglosses:-185.00, pay:2450.00, incidentals:-765.45 }, { month: "May", rent: -1310.00, utilities: -479.811, gamblingprofits:292.00, gamblinglosses:-485.00, pay:2450.00, incidentals:-555.11 }, { month: "June", rent: -1310.00, utilities: -497.95, gamblingprofits:292.00, gamblinglosses:-220.00, pay:2450.00, incidentals:-633.48 } ]; function calculateNet(dataArray) { var len = dataArray.length; var obj, net; for(var i = 0; i < len; i++) { obj = dataArray[i]; net = 0; for(var z in obj) { if (!isNaN(obj[z])) net += obj[z]; } obj.net = net; } return dataArray; } var myDataSource = new YAHOO.util.DataSource( calculateNet(YAHOO.example.monthlyExpenses) ); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: [ "month", "rent", "utilities", "gamblinglosses", "gamblingprofits", "pay", "incidentals", "net" ] };

## Define our Text formatting functions

We will create methods to format the labels for our axis, dataTip and legend.

YAHOO.example.formatCurrencyAxisLabel = function( value ) { return YAHOO.util.Number.format( value, { prefix: "$", thousandsSeparator: ",", decimalPlaces: 2 }); } YAHOO.example.getDataTipText = function( item, index, series ) { var toolTipText = series.displayName + " for " + item.month; toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( Math.abs(item[series.yField]) ); return toolTipText; } YAHOO.example.gainsLossesDataTipFunction = function( item, index, series ) { var amt = item[series.yField]; var toolTipText = series.displayName + (amt >= 0 ? " Gains" : " Losses") + " for " + item.month;; toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( Math.abs(amt) ); return toolTipText; } YAHOO.example.getLegendLabelText = function(value) { return value; } YAHOO.example.getGamblingLegendLabelText = function(value) { return value + " (wins/losses)"; }

Some series, such as pay and rent, will always be either positive or negative. Others, such as gambling and net, can either be positive or negative. As a result, we will need to specify different dataTip functions for different series. This is best accomplished by setting one method on the chart level, and then overriding these on the series level. In the code above, we have created a default dataTipFunction for income and expense series and an additional function for series that can render a gain or a loss.

## Define a Series Definition

We'll set a series definition to style each series. Additionally, we will use this series definition to specify which series will use the custom label functions created above.

var seriesDef = [ { displayName: "Rent", yField: "rent", style:{borderColor:0x006600} }, { displayName: "Utilities", yField: "utilities", style:{borderColor:0x006699} }, { displayName: "Gambling", yField:"gamblingprofits", style:{borderColor:0x000000, fillColor:0xff0000}, legendLabelFunction:YAHOO.example.getGamblingLegendLabelText, dataTipFunction:YAHOO.example.gainsLossesDataTipFunction }, { displayName: "Gambling", yField:"gamblinglosses", style:{borderColor:0x000000, fillColor:0xff0000}, showInLegend:false, dataTipFunction:YAHOO.example.gainsLossesDataTipFunction }, { displayName: "Pay", yField:"pay", style:{borderColor:0x000000} }, { displayName: "Misc.", yField:"incidentals", style:{borderColor:0x660000} }, { type:"line", displayName: "Net", yField:"net", style:{fillColor:0xdddeee, borderColor:0x0000ff, lineColor:0x0000ff, skin:"DiamondSkin"}, dataTipFunction:YAHOO.example.gainsLossesDataTipFunction } ];

In the above series definition, we have styled the properties `gamblinglosses` and `gamblingprofits` identically. We have also given them the same display name. In our chart, they will both be displayed as "gambling". We will use our custom dataTip function to differentiate between the series based on a positive or negative value. Since they both represent gambling, we only want one reference in the legend. We can use the `showInLegend` property to filter out one from the legend list. We'll also put in a custom legendLabelFunction for the gambling series displayed in the legend. Finally, we will attach the custom dataTip function to our net series.

## Add axes and styles

Next, we'll add our styles and axes.

var currencyAxis = new YAHOO.widget.NumericAxis(); currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel; currencyAxis.title = "Money Gained"; var categoryAxis = new YAHOO.widget.CategoryAxis(); categoryAxis.title = "Month"; var styleDef = { font:{color:0xeeeeee}, background:{color:0x677164}, border:{size:1, color:0x000000}, yAxis: { titleRotation:90, color:0xeeeeee, titleFont:{color:0xeeeeee}, majorGridLines:{color:0xeeeeee}, minorTicks:{display:"none"}, majorTicks:{display:"none"} }, xAxis: { color:0xeeeeee, titleFont:{color:0xeeeeee} }, legend: { display: "bottom", padding: 10, spacing: 5, font: { color:0xeeeeee, family: "Arial", size: 11 } } }

## Create the Chart

Finally, we'll create a chart, setting our default dataTip and legendLabel methods.

var mychart = new YAHOO.widget.ColumnChart( "chart", myDataSource, { series: seriesDef, xField: "month", yAxis: currencyAxis, xAxis: categoryAxis, style: styleDef, legendLabelFunction: YAHOO.example.getLegendLabelText, dataTipFunction: YAHOO.example.getDataTipText, //only needed for flash player express install expressInstall: "assets/expressinstall.swf" });

## 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: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

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