YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI 2: Charts

YUI 2: Charts

The YUI Charts Control visualizes tabular data on a web page in several possible formats including vertical columns, horizontal bars, lines, and pies. Notable features include support for the DataSource Utility, customizable series and axes, a customizable mouse-over datatip, combination charts, and skinning.

Important:

  • The Charts Control should always be served from an HTTP server due to Flash Player's restricted local security model.
  • The 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.

Getting Started

To use the Charts Control, include the following source files in your web page:

  1. <!-- Dependencies -->
  2. <script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  3. <script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
  4. <script src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
  5. <script src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js"></script>
  6. <script src="http://yui.yahooapis.com/2.9.0/build/swf/swf-min.js"></script>
  7. <!-- OPTIONAL: Connection (enables XHR) -->
  8. <script src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
  9. <!-- Source files -->
  10. <script src="http://yui.yahooapis.com/2.9.0/build/charts/charts-min.js"></script>
  11.  
<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/swf/swf-min.js"></script>
<!-- OPTIONAL: Connection (enables XHR) -->
<script src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
<!-- Source files -->
<script src="http://yui.yahooapis.com/2.9.0/build/charts/charts-min.js"></script>
 

Note: YUI 2.8.0 introduces a new dependency for the Charts. YUI SWF Utility is required to load the chart control.

By default, the file charts.swf is expected in the assets directory relative to the location of the HTML page in which a Charts Control instance will appear. If you wish use charts.swf from yui.yahooapis.com, or if you'd like to place charts.swf in a different location on your own server, you may specify a path (relative to the page or absolute) by setting the following variable:

Note: The charts.swf is a component of Charts Control and is not intended to be used independently. If you do use the charts.swf separately from the Charts Control, check the Release Notes when upgrading for changes that may affect your application.

  1. YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.9.0/build/charts/assets/charts.swf";
  2.  
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.9.0/build/charts/assets/charts.swf";
 

YUI dependency configurator.

YUI Dependency Configurator:

Instead of copying and pasting the filepaths above, try letting the YUI dependency Configurator determine the optimal file list for your desired components; the Configurator uses YUI Loader to write out the full HTML for including the precise files you need for your implementation.

Note: If you wish to include this component via the YUI Loader, its module name is charts. (Click here for the full list of module names for YUI Loader.)

Where these files come from: The files included using the text above will be served from Yahoo! servers. JavaScript files are minified, meaning that comments and white space have been removed to make them more efficient to download. To use the full, commented versions or the -debug versions of YUI JavaScript files, please download the library distribution and host the files on your own server.

Order matters: As is the case generally with JavaScript and CSS, order matters; these files should be included in the order specified above. If you include files in the wrong order, errors may result.

The Charts Control includes six different chart types:

  • YAHOO.widget.LineChart
  • YAHOO.widget.BarChart
  • YAHOO.widget.ColumnChart
  • YAHOO.widget.PieChart
  • YAHOO.widget.StackedBarChart
  • YAHOO.widget.StackedColumnChart

For the following example, we'll be using YAHOO.widget.ColumnChart.

Instantiating a DataSource

Just like the YUI DataTable Control, we use a DataSource object to structure the data that will populate the chart. In this example, the data for this chart lives in local memory within a JavaScript array:

  1. YAHOO.example.puppies = [
  2.    { name: "Ashley", breed: "German Shepherd", age: 12 },
  3.    { name: "Dirty Harry", breed: "Norwich Terrier", age: 5 },
  4.    { name: "Emma", breed: "Labrador Retriever", age: 9 },
  5.    { name: "Oscar", breed: "Yorkshire Terrier", age: 6 },
  6.    { name: "Riley", breed: "Golden Retriever", age: 6 },
  7.    { name: "Shannon", breed: "Greyhound", age: 12 },
  8.    { name: "Washington" ,breed: "English Bulldog", age: 8 },
  9.    { name: "Zoe", breed: "Labrador Retriever", age: 3 }
  10. ];
  11.  
YAHOO.example.puppies = [
   { name: "Ashley", breed: "German Shepherd", age: 12 },
   { name: "Dirty Harry", breed: "Norwich Terrier", age: 5 },
   { name: "Emma", breed: "Labrador Retriever", age: 9 },
   { name: "Oscar", breed: "Yorkshire Terrier", age: 6 },
   { name: "Riley", breed: "Golden Retriever", age: 6 },
   { name: "Shannon", breed: "Greyhound", age: 12 },
   { name: "Washington" ,breed: "English Bulldog", age: 8 },
   { name: "Zoe", breed: "Labrador Retriever", age: 3 }
];
 

Pass in the array reference YAHOO.example.puppies to the DataSource constructor and set the responseType to be JavaScript array. Next, define the known data fields for the puppy objects — these fields will map to the keys you define for the axes and optionally to the series that you define.

  1. var myDataSource = new YAHOO.util.DataSource(YAHOO.example.puppies);
  2. myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
  3. myDataSource.responseSchema = {
  4.     fields: [ "name","breed","age" ]
  5. };
  6.  
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.puppies);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
    fields: [ "name","breed","age" ]
};
 

Instantiating a ColumnChart

Now you are ready to instantiate your ColumnChart by passing in

  1. the ID string or element reference of a container DIV element,
  2. your DataSource instance, and
  3. a set of configuration parameters, including the fields used by each axis to retrieve information from the DataSource.

Make sure the container DIV element is available in the DOM before instantiating your ColumnChart, either by placing the script in the HTML body after the markup has been rendered, or by using the Event Utility's onAvailable method to programmatically create your ColumnChart as soon as the container DIV element is available.

  1. var myChart = new YAHOO.widget.ColumnChart( "myContainer", myDataSource, {
  2.     xField: "name",
  3.     yField: "age"
  4. });
  5.  
var myChart = new YAHOO.widget.ColumnChart( "myContainer", myDataSource, {
    xField: "name",
    yField: "age"
});
 

Using Charts

The Charts Control provides many optional configuration parameters that help control how the your chart looks and behaves.

Defining Multiple Series

The first example above displayed a single series. Take a look at a more complex DataSource where we can extract more than one series to show in a chart.

  1. YAHOO.example.monthlyExpenses = [
  2.     { month: "January", rent: 880.00, utilities: 894.68 },
  3.     { month: "February", rent: 880.00, utilities: 901.35 },
  4.     { month: "March", rent: 880.00, utilities: 889.32 },
  5.     { month: "April", rent: 880.00, utilities: 884.71 },
  6.     { month: "May", rent: 910.00, utilities: 879.811 },
  7.     { month: "June", rent: 910.00, utilities: 897.95 }
  8. ];
  9. var myDataSource = new YAHOO.util.DataSource(YAHOO.example.monthlyExpenses);
  10. myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
  11. myDataSource.responseSchema = {
  12.     fields: [ "month", "rent", "utilities" ]
  13. };
  14.  
YAHOO.example.monthlyExpenses = [
    { month: "January", rent: 880.00, utilities: 894.68 },
    { month: "February", rent: 880.00, utilities: 901.35 },
    { month: "March", rent: 880.00, utilities: 889.32 },
    { month: "April", rent: 880.00, utilities: 884.71 },
    { month: "May", rent: 910.00, utilities: 879.811 },
    { month: "June", rent: 910.00, utilities: 897.95 }
];
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.monthlyExpenses);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
    fields: [ "month", "rent", "utilities" ]
};
 

By creating a set of series definitions, you can display multiple series in a single chart; moreover, each series can be individually customized. In particular, the series type, display name, styles, and the keys it uses to access data from the DataSource can be modified.

  1. var seriesDef = [
  2.     { displayName: "Rent", yField: "rent" },
  3.     { displayName: "Utilities", yField: "utilities" }
  4. ];
  5.  
var seriesDef = [
    { displayName: "Rent", yField: "rent" },
    { displayName: "Utilities", yField: "utilities" }
];
 

To pass a series definition to the chart, use the series attribute. Attributes may be set using the configuration hash in the constructor or by using the set() function.

  1. new YAHOO.widget.LineChart( "myContainer", myDataSource, {
  2.     xField: "month",
  3.     series: seriesDef
  4. });
  5.  
new YAHOO.widget.LineChart( "myContainer", myDataSource, {
    xField: "month",
    series: seriesDef
});
 

Specifying NumericAxis Bounds

By default, charts with x and y axes automatically determine the minimum and maximum values based on the data that is being displayed. However, at times you might desire specific bounds on an axis. An axis object can be created and passed to the chart using either the xAxis or yAxis attributes, repectively.

  1. var axisWithMinimum = new YAHOO.widget.NumericAxis();
  2. axisWithMinimum.minimum = 800;
  3. myChart.set( "yAxis", axisWithMinimum );
  4.  
var axisWithMinimum = new YAHOO.widget.NumericAxis();
axisWithMinimum.minimum = 800;
myChart.set( "yAxis", axisWithMinimum );
 

Customizing Axis Labels

An axis exposes the ability to customize the text that appears in each label that appears along its length. This is exposed through the labelFunction property.

  1. var currencyAxis = new YAHOO.widget.NumericAxis();
  2. currencyAxis.labelFunction = "formatCurrencyAxisLabel";
  3. function formatCurrencyAxisLabel(value) {
  4.     return YAHOO.util.Number.format(value, {
  5.         prefix: "$",
  6.         thousandsSeparator: ",",
  7.         decimalPlaces: 2
  8.     });
  9. }
  10. myChart.set("yAxis", currencyAxis);
  11.  
var currencyAxis = new YAHOO.widget.NumericAxis();
currencyAxis.labelFunction = "formatCurrencyAxisLabel";
function formatCurrencyAxisLabel(value) {
    return YAHOO.util.Number.format(value, {
        prefix: "$",
        thousandsSeparator: ",",
        decimalPlaces: 2
    });
}
myChart.set("yAxis", currencyAxis);
 

Note: This function may be passed by name as a String or as a function reference.

Custom Data Tip Text

By default, the mouse-over data tip displays the name of the series the item appears within (if present), and the item data for each axis. Data tips on PieCharts also includes percentage information. If an axis has a labelFunction, the same function will be called to receive formatting.

With a dataTipFunction, developers have full control over the text that appears within the data tip.

  1. function getDataTipText( item, index, series ) {
  2.     var toolTipText = series.displayName + " for " + item.month;
  3.     toolTipText += "\n" + formatCurrencyAxisLabel( item[series.yField] );
  4.     return toolTipText;
  5. }
  6. chart.set( "dataTipFunction", getDataTipText );
  7.  
function getDataTipText( item, index, series ) {
    var toolTipText = series.displayName + " for " + item.month;
    toolTipText += "\n" + formatCurrencyAxisLabel( item[series.yField] );
    return toolTipText;
}
chart.set( "dataTipFunction", getDataTipText );
 

Note: This function may be passed by name as a String or as a function reference.

Basic Styling

Because the Charts Control is powered by Flash Player, standard browser CSS is not available for styling individual subcomponents of a chart. Instead, styleable properties are exposed through a style attribute on the chart itself. This hash accepts a standardized set of style values for things like border, background, fonts, padding, axis styles, and datatip styles.

  1. new YAHOO.widget.LineChart("myContainer", myDataSource, {
  2.     xField: "month",
  3.     series: seriesDef,
  4.     style: {
  5.         padding: 20,
  6.         animationEnabled: false,
  7.         border: {
  8.             color: 0x995566,
  9.             size: 2
  10.         },
  11.         font: {
  12.             name: "Verdana",
  13.             color: 0x995566,
  14.             size: 12
  15.         }
  16.     }
  17. });
  18.  
new YAHOO.widget.LineChart("myContainer", myDataSource, {
    xField: "month",
    series: seriesDef,
    style: {
        padding: 20,
        animationEnabled: false,
        border: {
            color: 0x995566,
            size: 2
        },
        font: {
            name: "Verdana",
            color: 0x995566,
            size: 12
        }
    }
});
 

The following section describes each of the top-level chart styles along with any substyles that may be available.

padding

A numeric value that specifies the spacing around the edge of the chart's contents. Unlike CSS padding in HTML, the chart's padding does not increase the dimensions of the chart.

animationEnabled

A Boolean value that specifies whether marker animations are enabled or not. The default value is true, meaning that markers will animate when data changes.

font

One may declare a font style to customize the default axis text, including the font name, size, color and more. It is represented as an Object value that contains several substyles.

name
Accepts a String that is either the name of the font or a list of comma-delimited font names, similar to the way font-family works in CSS.
color
Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000.
size
Accepts a numeric value for the point size. No other font size units are available.
bold
Boolean value to set if the font is displayed in bold.
italic
Boolean value to set if the font is displayed in italics.
underline
Boolean value to set if the font is displayed with an underline.

border

The border style allows a developer to add a colored border around the chart. The chart itself will decrease in dimensions to accomodate the border. It is represented as an Object value that contains several substyles.

color
Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000.
size
the border thickness in pixels

background

The background style allows one to customize the background color or image. It is represented as an Object value that contains several substyles.

color
Specifies the background fill color. If an image is present, this fill color will appear behind the image. Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000.
alpha
A value from 0.0 to 1.0 that refers to the transparency of the background color. This is most useful when used on the data tip background.
image
The URL of a JPG, PNG, GIF, or SWF image. May be relative or absolute. Relative URLs are relative to the HTML document in which the chart is embedded.
mode
The method used to display the background image. May be "repeat" (default), "repeat-x", "repeat-y", "no-repeat", or "stretch".

The mode value will be covered in more detail below in the Advanced Skinning section.

legend

The legend style lets a developer customize the appearance of the legend. It is represented as an Object value that contains several substyles.

display
Specifies the location where the legend will be drawn. Accepted values include "none", "left", "right", "top", and "bottom". The default value is "none".
spacing
A value that specifies the number of pixels between each of the items displayed in the legend.
padding
A numeric value that specifies the spacing around the edge of the legend's contents. Unlike CSS padding in HTML, the legend's padding does not increase the dimensions of the legend.
border
Same as the border style described above.
Border for the legend. Contains the same substyles as the border style in the Basic Styling Section.
background
Background for the legend. Contains the same substyles as the background style in the Basic Styling Section.
font
Object containing styles for the legend text. Contains the same substyles as the font style in the Basic Styling Section. Available only on a series of type "pie".

dataTip

The dataTip style lets a developer customize the appearance of the data tip. It is represented as an Object value that contains several substyles.

padding
A numeric value that specifies the spacing around the edge of the dataTip's contents. Unlike CSS padding in HTML, the dataTip's padding does not increase the dimensions of the dataTip.
border
Border for the dataTip. Contains the same substyles as the border style in the Basic Styling Section.
background
Background for the dataTip. Contains the same substyles as the background style in the Basic Styling Section.
font
Object containing styles for the dataTip text. Contains the same substyles as the font style in the Basic Styling Section.

xAxis and yAxis

The xAxis and yAxis styles allow one to customize the appearance of either axis. They are represented as Object values that contain several substyles.

color
The color of the axis itself. Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000.
size
A numeric value that represents the thickness of the axis itself. A value of 0 will hide the axis (but not the labels).
showLabels
If true, the labels are displayed. If false, they are hidden.
hideOverlappingLabels
Indicates whether or not to hide overlapping labels. This style will be used on the Category Axis when calculateCategoryCount is false. The style will be used on the TimeAxis and NumericAxis when the user specifies the majorUnit. Otherwise, the axes will place the labels so that they do not overlap.
labelRotation
Indicates the rotation of the labels on the axis. Acceptable values are -90 through 90. Labels will display most clearly when set to 90, -90 or 0. The default value is 0.
labelSpacing
The distance, in pixels, between labels on an axis. The default value is 2.
labelDistance
The distance, in pixels, between a label and the axis. The default value is 2.
titleRotation
Indicates the rotation of the title on the axis.
titleDistance
The distance, in pixels, between a title and the axis labels. The default value is 2.
majorGridLines
Described below.
minorGridLines
Described below.
zeroGridLine
Described below.
majorTicks
Described below.
minorTicks
Described below.

majorGridLines and minorGridLines

The majorGridLines and minorGridLines styles have a couple of substyles that need extra explanation. As shown above, majorGridLines and minorGridLines are substyles of the xAxis and yAxis styles.

color
The color of the grid lines. Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000.
size
A numeric value that represents the thickness of the grid lines. To hide the grid lines, set the size substyle to 0 (zero). If the grid lines are hidden by default, a thickness greater than zero must be specified to show them.

zeroGridLine

The zeroGridLine style allows for emphasis on the zero grid line when it falls beyond the origin of the axis. The zeroGridLine style has the following substyles:

color
The color of the zero grid line. Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000.
size
A numeric value that represents the thickness of the zero grid line. To hide the grid line, set the size substyle to 0.

majorTicks and minorTicks

The majorTicks and minorTicks styles have a couple of substyles that need extra explanation. As shown above, majorTicks and minorTicks are substyles of the xAxis and yAxis styles.

color
The color of the ticks. Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000.
size
A numeric value that represents the thickness of the ticks. This style may need to be set to a valid numeric value greater than zero if the ticks are not shown by default.
length
The number of pixels the ticks extend from the axis. This style may need to be set to a valid numeric value greater than zero if the ticks are not shown by default.
display
Specifies how the ticks are drawn. Accepted values include "none", "inside", "outside", and "cross". In many cases, "none" is the default.

Note: Under certain conditions, even if the display substyle for minorTicks is a value other than "none", it is possible that no minor ticks will be drawn. The algorithm that calculates the minor divisions may determine that no minor divisions is the most ideal way to draw the chart.

Styling Series and Markers

Each individual series defined in the chart's series definition may be customized with a style attribute. The following example code expands the series definition created previously.

  1. var seriesDef = [
  2.     {
  3.         displayName: "Rent",
  4.         yField: "rent",
  5.         style: {
  6.             color: 0xff0000,
  7.             size: 20
  8.         }
  9.     },
  10.     {
  11.         displayName: "Utilities",
  12.         yField: "utilities",
  13.         style: {
  14.             color: 0x0000ff,
  15.             size: 30
  16.         }
  17.     }
  18. ];
  19.  
var seriesDef = [
    {
        displayName: "Rent",
        yField: "rent",
        style: {
            color: 0xff0000,
            size: 20
        }
    },
    {
        displayName: "Utilities",
        yField: "utilities",
        style: {
            color: 0x0000ff,
            size: 30
        }
    }
];
 

The styles defined above sets unique colors for each series, and the size of their markers.

Series Styles

The following styles are available for series definitions.

color
The color of the markers (and lines, where applicable) that appear in the series. Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000.
colors
An Array of color values formatted as described by the color style. Used by the PieChart
size
A numeric value that represents the size of the markers in the series.
alpha
A numeric value, 0.0 to 1.0, that represents the alpha of the markers in the series.
borderColor
The border color of the markers in a series. Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000. If not specified, the marker border color is determined by the color style.
borderAlpha
A numeric value, 0.0 to 1.0, that represents the border alpha of the markers in the series.
fillColor
The fill color of the markers in a series. Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000. If not specified, the marker fill color is determined by the color style.
fillAlpha
A numeric value, 0.0 to 1.0, that represents the fill alpha of the markers in the series.
lineSize
A numeric value that represents the thickness of the lines in a line series. Available only on a series of type "line".
lineColor
The color of lines in a line series. Accepts a hex-formatted string or number value like "#ff0000", "ff0000" or 0xff0000. Available only on a series of type "line".
lineAlpha
A numeric value, 0.0 to 1.0, that represents the alpha value of lines in a line series. Available only on a series of type "line".
showAreaFill
Indicates whether to add an area fill to a line series. Available only on a series of type "line".
areaFillAlpha
A numeric value, 0.0 to 1.0, that represents the alpha value of the area fill in a line series when showAreaFill is set to true. Available only on a series of type "line".
image
The URL of a JPG, PNG, GIF, or SWF image. May be relative or absolute. Relative URLs are relative to the HTML document in which the chart is embedded.
images
An Array of image URLs formatted as described by the image style. Used by the PieChart
mode
The method used to display the background image(s). May be "repeat" (default), "repeat-x", "repeat-y", "no-repeat", or "stretch".
connectPoints
A Boolean value that specifies whether lines are drawn between points on a line series. If false, a line series will only display markers, with no lines connecting those markers. Available only on a series of type "line".
connectDiscontinuousPoints
When true, a dashed line is drawn between points appearing before and after bad data (generally null or NaN values). Available only on a series of type "line".
discontinuousDashLength
A numeric value that represents the length of dashes on a discontinous line, in pixels. Available only on a series of type "line".
skin
Allows for specifying a pre-defined marker shape for a series. Available skins are CircleSkin, DiamondSkin, TriangleSkin and RectangleSkin. Available only on a series of type "line".
visibility
Allows a series to be hidden. Possible values are hidden and visible.
showInLegend
Indicates whether the series will appear in the Chart's legend. The default value is true. This style is not available for a series of type pie.
showLabels
When set to true, value labels will appear in the wedges of a pie series. Available only on a series of type "pie".
font
Object containing styles for labels on a Pie Chart when showLabels is set to true. Contains the same substyles as the font style in the Basic Styling Section. Available only on a series of type "pie".

For more information about using the image-related styles, see the Advanced Skinning section below.

Advanced Skinning

The Charts Control accepts image URLs for background image styles (supported filetypes include JPG, PNG, GIF, and SWF). In an effort to mimic browser background image behavior, several image modes are available, including repeat, repeat-x, repeat-y, and no-repeat. An additional mode named stretch will increase the image dimensions to fill the entire background area.

  1. style: {
  2.     background:
  3.     {
  4.         image: "images/tile.png",
  5.         mode: "repeat",
  6.         color: 0xcc9900
  7.     }
  8. }
  9.  
style: {
    background:
    {
        image: "images/tile.png",
        mode: "repeat",
        color: 0xcc9900
    }
}
 

Note: Due to the cross-domain restrictions enforced by Adobe Flash Player, and the methods used to tile and layout background images, if you are loading the Charts Control from yui.yahooapis.com, the domain from which you load image assets must provide a crossdomain.xml to allow yui.yahooapis.com to load and manipulate image files. If no crossdomain.xml file is provided, your images will not be displayed. Again, this only applies if you are loading the Charts Control from yui.yahooapis.com. If the Charts Control is loaded from the same subdomain as the HTML page from which it is being used, cross-domain restrictions will not affect you.

The following is an example of the minimal crossdomain.xml file required to allow charts.swf to load images from your domain.

  1. <?xml version="1.0"?>
  2. <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
  3. <cross-domain-policy>
  4.     <allow-access-from domain="yui.yahooapis.com"/>
  5. </cross-domain-policy>
  6.  
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <allow-access-from domain="yui.yahooapis.com"/>
</cross-domain-policy>
 

Image Modes

The following modes are accepted for background images used by the Charts control.

repeat
The image is tiled vertically and horizontally to cover the entire background area.
repeat-x
The image is tiled in one row horizontally.
repeat-y
The image is tiled in one column vertically.
no-repeat
The image is displayed once in the top-left corner.
stretch
The image is stretched to fill the entire background area. When using stretch, the image may distort if the aspect ratio of the Charts Control is different than that of the image.

If the image mode is set to repeat-x or repeat-y, or the background image contains transparency, the background color will be displayed through the areas that are not covered by the image.

For futher exploration of skinning the Charts control, please review the Charts Skinning Example.

Known Issues

  • Issue with using YUI2 Charts in YUI3

    The underlying charts swf needs a global object to communicate with the DOM. As a result, the YAHOO global object needs to be declared outside of the YUI3 use statement.

    1. var YAHOO;
    2.  
    3. YUI().use('node', 'yui2-utilities', 'yui2-datasource', 'yui2-json', 'yui2-swf', 'yui2-charts', function (Y) {
    4.     YAHOO = Y.YUI2;
    5.     ...
    6. });
    var YAHOO;
 
YUI().use('node', 'yui2-utilities', 'yui2-datasource', 'yui2-json', 'yui2-swf', 'yui2-charts', function (Y) {
    YAHOO = Y.YUI2;
    ...
});

  • Charts appear on top of other content

    When other page content (such as Menu controls) overlap the Charts control, the Charts control may always appear on top in IE and Gecko-based browsers. To fix this problem, set the "wmode" of the Flash movie to either "transparent" or "opaque" using the wmode initialization attribute:

    1. var myChart = new YAHOO.widget.ColumnChart("myContainer", myDataSource, { wmode: "opaque" });
    2.  
    var myChart = new YAHOO.widget.ColumnChart("myContainer", myDataSource, { wmode: "opaque" });
 

  • Hyphens cannot be used in DataSource field names

    Due to a bug in Adobe Flash Player's ExternalInterface, fields retrieved from the DataSource used by the chart may not contain hyphens. In the following example, the "dateofbirth" field is valid, but the "first-name" and "last-name" fields will cause errors.

    1. var myDataSource = new YAHOO.util.DataSource( YAHOO.example.employees );
    2. myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    3. myDataSource.responseSchema = {
    4.     fields: [ "first-name", "last-name", "dateofbirth" ]
    5. };
    6.  
    var myDataSource = new YAHOO.util.DataSource( YAHOO.example.employees );
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
    fields: [ "first-name", "last-name", "dateofbirth" ]
};
 

    If this bug is fixed in a future version of Flash Player, no modifications will be needed to the Charts Control to begin working with hyphenated field names, except to possibly change the minimum required version of Flash Player.

  • Charts don't work inside a <form> tag with Internet Explorer

    SWFs embedded in HTML forms will not be initialized correctly when the page is viewed in Internet Explorer. When trying to embed a YUI chart into any descendant of a <form> tag, you may see an error that says yuigen0 not found and the chart will not be drawn. This problem has been fixed in Adobe Flash Player starting with version 9.0.115. If you must display a chart in an HTML form, you should override the version attribute to require a newer version of Flash Player:

    1. var myChart = new YAHOO.widget.ColumnChart("myContainer", myDataSource, { version: "9.0.115" });
    2.  
    var myChart = new YAHOO.widget.ColumnChart("myContainer", myDataSource, { version: "9.0.115" });
 

  • Issues with Charts using Logarithmic scaling

    There have been some issues in previous releases with charts that use a logarithmic scale. Changes in the 2.7.0 made these issues more apparent in some use cases.

Support & Community

The YUI Library and related topics are discussed on the on the YUILibrary.com forums.

Also be sure to check out YUIBlog for updates and articles about the YUI Library written by the library's developers.

Filing Bugs & Feature Requests

The YUI Library's public bug tracking and feature request repositories are located on the YUILibrary.com site. Before filing new feature requests or bug reports, please review our reporting guidelines.

YUI Charts Control Cheat Sheet:

Cheat Sheet for the YUI Charts Control.

Download full set of cheat sheets.

More Reading about the YUI Charts Control:

YUI Charts on del.icio.us:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings