<div id="mychart"></div>
<script type="text/javascript">
(function() {
    YUI().use('charts', function (Y) 
    { 
        //dataProvider source
        var myDataValues = [ 
            {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
            {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100}, 
            {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500}, 
            {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800}, 
            {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
            {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200} 
        ];
        
        //Define our axes for the chart.
        var myAxes = {
            financials:{
                keys:["miscellaneous", "revenue", "expenses"],
                position:"right",
                type:"numeric",
                styles:{
                    majorTicks:{
                        display: "none"
                    }
                }
            },
            dateRange:{
                keys:["date"],
                position:"bottom",
                type:"category",
                styles:{
                    majorTicks:{
                        display: "none"
                    },
                    label: {
                        rotation:-45,
                        margin:{top:5}
                    }
                }
            }
        };
       
        //define the series 
        var seriesCollection = [
         {
                type:"column",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                xDisplayName:"Date",
                yKey:"miscellaneous",
                yDisplayName:"Miscellaneous",
                styles: {
                    border: {
                        weight: 1,
                        color: "#58006e"
                    },
                    over: {
                        fill: {
                            alpha: 0.7
                        }
                    }
                }
            },
            {
                type:"column",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                xDisplayName:"Date",
                yKey:"expenses",
                yDisplayName:"Expenses",
                styles: {
                    marker:{
                        fill: {
                            color: "#e0ddd0" 
                        },
                        border: {
                            weight: 1,
                            color: "#cbc8ba"
                        },
                        over: {
                            fill: {
                                alpha: 0.7
                            }
                        }
                    }
                }
            },
            {
                type:"combo",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                xDisplayName:"Date",
                yKey:"revenue",
                yDisplayName:"Deductions",
                    line: {
                        color: "#ff7200"
                    },
                marker: {
                    fill: {
                        color: "#ff9f3b"
                    },
                    border: {
                        color: "#ff7200",
                        weight: 1
                    },
                    over: {
                        width: 12,
                        height: 12
                    },
                    width:9,
                    height:9
                }
            }
        ];

        //instantiate the chart
        var myChart = new Y.Chart({
                            dataProvider:myDataValues, 
                            axes:myAxes, 
                            seriesCollection:seriesCollection, 
                            horizontalGridlines: true,
                            verticalGridlines: true,
                            render:"#mychart"
                        });
    });
})();
</script>
