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