YUI Library Home

YUI Library Examples: Charts Control (experimental): Styling Lines, Borders and Fills

Charts Control (experimental): Styling Lines, Borders and Fills

The YUI Charts Control offers customization through its style and series style objects. This example demonstrates one way to customize a Line 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.

January Daily Profits
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.

Data

Our data will include an array of objects, containing values for the date, expenses and revenue. We will create a function that calculates and adds a profits field to each of these items in the array, and will pass this to our datasource.

1//revenue and expenses per day 
2var dailyFinancials = 
3
4    {date:"1/1/2009", revenue:14002, expenses:15000}, 
5    {date:"1/2/2009", revenue:14027, expenses:16527}, 
6    {date:"1/3/2009", revenue:15083, expenses:17283}, 
7    {date:"1/4/2009", revenue:15006, expenses:18694}, 
8    {date:"1/5/2009", revenue:15035, expenses:18235}, 
9    {date:"1/6/2009", revenue:17871, expenses:18371}, 
10    {date:"1/7/2009", revenue:25887, expenses:17787}, 
11    {date:"1/8/2009", revenue:16149, expenses:16149}, 
12    {date:"1/9/2009", revenue:17366, expenses:15666}, 
13    {date:"1/10/2009", revenue:16424, expenses:15776}, 
14    {date:"1/11/2009", revenue:15817, expenses:18717}, 
15    {date:"1/12/2009", revenue:13554, expenses:18154}, 
16    {date:"1/13/2009", revenue:19782, expenses:18182}, 
17    {date:"1/14/2009", revenue:24400, expenses:18600}, 
18    {date:"1/15/2009", revenue:21780, expenses:18480}, 
19    {date:"1/16/2009", revenue:16681, expenses:21581}, 
20    {date:"1/17/2009", revenue:24645, expenses:21745}, 
21    {date:"1/18/2009", revenue:22212, expenses:20388}, 
22    {date:"1/19/2009", revenue:24026, expenses:24726}, 
23    {date:"1/20/2009", revenue:29264, expenses:24864}, 
24    {date:"1/21/2009", revenue:19922, expenses:23622}, 
25    {date:"1/22/2009", revenue:12373, expenses:18773}, 
26    {date:"1/23/2009", revenue:11944, expenses:18444}, 
27    {date:"1/24/2009", revenue:23741, expenses:18641}, 
28    {date:"1/25/2009", revenue:24758, expenses:19758}, 
29    {date:"1/26/2009", revenue:31611, expenses:19611}, 
30    {date:"1/27/2009", revenue:25612, expenses:18212}, 
31    {date:"1/28/2009", revenue:26830, expenses:18330}, 
32    {date:"1/29/2009", revenue:27929, expenses:19029}, 
33    {date:"1/30/2009", revenue:28153, expenses:19953}, 
34    {date:"1/31/2009", revenue:28018, expenses:18118} 
35]; 
36 
37//calculate profits from revenue and expenses 
38function calculateProfits(dataArray) 
39
40    var dataLength = dataArray.length; 
41    for(var i = 0; i < dataLength; i++) 
42    { 
43        var dataObj = dataArray[i]; 
44        dataObj.profits = dataObj.revenue - dataObj.expenses; 
45    } 
46 
47    return dataArray; 
48
49 
50var myDataSource = new YAHOO.util.DataSource(calculateProfits(dailyFinancials)); 
51myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
52myDataSource.responseSchema = 
53
54    fields: 
55    [ 
56        "date"
57        "expenses"
58        "revenue"
59        "profits" 
60    ] 
61}; 
view plain | print | ?

Series and Styles

Our series definition will include a series for expenses, revenue and profits. Each series will have a style block in which we will style the line, border and fill.

1//series definition 
2var seriesDef = [ 
3    { 
4        displayName:"Expenses"
5        yField:"expenses"
6        style: 
7        { 
8            lineColor:0xB5BAC8, 
9            lineAlpha:.5, 
10            borderColor:0xB5BAC8, 
11            fillColor:0xB5BAC8 
12        } 
13    }, 
14    { 
15        displayName:"Revenue"
16        yField:"revenue"
17        style: 
18        { 
19            lineColor:0xB5BAC8, 
20            lineAlpha:.5, 
21            borderColor:0xB5BAC8, 
22            fillColor:0xffffff 
23        } 
24    }, 
25    { 
26        displayName:"Profits"
27        yField:"profits"
28        style: 
29        { 
30            lineColor:0x79839B, 
31            borderColor:0x79839B, 
32            fillColor:0x79839B 
33        } 
34    } 
35]; 
view plain | print | ?

Since we are dealing with negative values, we want to have the ability to highlight them. The Cartesian Charts include a style called zeroGridline. If an axis contains positive and negative values, the zeroGridline style can be used to highlight the gridline that corresponds to zero on the axis. These properties will only take affect if the zero appears beyond the origin of an axis.

1//Style object 
2var styleDef = 
3
4    xAxis: 
5    { 
6        majorTicks: 
7        { 
8            display:"inside"
9            length:3, 
10            size:1 
11        }, 
12        minorTicks: 
13        { 
14            display:"inside"
15            length:2 
16        }, 
17        labelRotation: -90 
18    }, 
19    yAxis: 
20    { 
21        zeroGridLine: 
22        { 
23            size:2, 
24            color:0xff0000 
25        }, 
26        minorTicks:{display:"none"
27    } 
28
view plain | print | ?

Chart

Next, we'll add methods for formatting our axis labels and datatip.

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

Create axes and set their label functions.

1//Create a TimeAxis for displaying dates 
2var myTimeAxis = new YAHOO.widget.TimeAxis(); 
3myTimeAxis.labelFunction = YAHOO.example.formatTimeData; 
4myTimeAxis.majorTimeUnit = "day"
5 
6//create a Numeric Axis for displaying dollars 
7myCurrencyAxis = new YAHOO.widget.NumericAxis(); 
8myCurrencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel; 
view plain | print | ?

Finally, we'll add our chart, setting its series definition, styles, axes and datatip function.

1//create a Chart 
2var mychart = new YAHOO.widget.LineChart("chart", myDataSource, 
3
4    series: seriesDef, 
5    style: styleDef, 
6    xField: "date"
7    xAxis: myTimeAxis, 
8    yAxis: myCurrencyAxis, 
9    dataTipFunction:YAHOO.example.formatDataTipText, 
10    //only needed for flash player express install 
11    expressInstall: "assets/expressinstall.swf" 
12}); 
view plain | print | ?

For full details about styles and series styles, read the Charts Control User's Guide.

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.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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