charts-objectstyles-source.mustache revision 2431f6aca1be7f7a136c5df34022e3f902490075
<html>
<head>
</head>
<body>
<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",
yKey:"miscellaneous",
xDisplayName:"Date",
yDisplayName:"Miscellaneous",
styles: {
border: {
weight: 1,
color: "#58006e"
},
over: {
fill: {
alpha: 0.7
}
}
}
},
{
type:"column",
xAxis:"dateRange",
yAxis:"financials",
xKey:"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",
yKey:"revenue",
xDisplayName:"Date",
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>
</body>
</html>