<div id="mychart"></div>
<script type="text/javascript">
(function() {
    YUI().use('charts', function (Y) 
    { 
        var myDataValues = [ 
            {category:"5/1/2010", Miscellaneous:2000, Expenses:3700, Revenue:2200}, 
            {category:"5/2/2010", Miscellaneous:50, Expenses:9100, Revenue:100}, 
            {category:"5/3/2010", Miscellaneous:400, Expenses:1100, Revenue:1500}, 
            {category:"5/4/2010", Miscellaneous:200, Expenses:1900, Revenue:2800}, 
            {category:"5/5/2010", Miscellaneous:5000, Expenses:5000, Revenue:2650}
        ];
        
        var myTooltip = {
            styles: { 
                backgroundColor: "#333",
                color: "#eee",
                borderColor: "#eee",
                textAlign: "center",
                padding: "2px 8px 2px 8px"
            },
            markerLabelFunction: function(categoryItem, valueItem, itemIndex, series, seriesIndex)
            {
                var msg = document.createElement("div"),
                    underlinedTextBlock = document.createElement("span"),
                    boldTextBlock = document.createElement("div");
                underlinedTextBlock.style.textDecoration = "underline";
                boldTextBlock.style.marginTop = "5px";
                boldTextBlock.style.fontWeight = "bold";
                underlinedTextBlock.appendChild(document.createTextNode(valueItem.displayName + " for " + 
                                                categoryItem.axis.get("labelFunction").apply(this, [categoryItem.value, categoryItem.axis.get("labelFormat")])));
                boldTextBlock.appendChild(document.createTextNode(valueItem.axis.get("labelFunction").apply(this, [valueItem.value, {prefix:"$", decimalPlaces:2}])));   
                msg.appendChild(underlinedTextBlock);
                msg.appendChild(document.createElement("br"));
                msg.appendChild(boldTextBlock); 
                return msg; 
            }
        };

        var mychart = new Y.Chart({
                            dataProvider:myDataValues, 
                            type:"bar",
                            render:"#mychart", 
                            tooltip: myTooltip
                        });
    });
})();
</script>
