charts-objectstyles-source.mustache revision d676c69348c891c2a261a6dbd4f450ddb2e312f3
13a38bdc4d36b2fedfc970e1242ea1cb2f0ea45dTripp<div id="mychart"></div>
13a38bdc4d36b2fedfc970e1242ea1cb2f0ea45dTripp<script type="text/javascript">
13a38bdc4d36b2fedfc970e1242ea1cb2f0ea45dTripp(function() {
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp YUI({filter:"raw"}).use('charts', function (Y)
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp {
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp //dataProvider source
0840bd474bb5fecfd054f5b3108cae39db23fc46Tripp var myDataValues = [
27e10204fa1c387af7fbdfb903256c11f0a9436cTripp {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
27e10204fa1c387af7fbdfb903256c11f0a9436cTripp {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100},
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500},
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800},
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200}
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp ];
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp //Define our axes for the chart.
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp var myAxes = {
7bfd053ef384b14ed963b9d1ea3af3124cf120adTripp financials:{
feb1dc670b0d4e1c6fcff58b35b36da3dfc5f18cJenny Donnelly keys:["miscellaneous", "revenue", "expenses"],
feb1dc670b0d4e1c6fcff58b35b36da3dfc5f18cJenny Donnelly position:"right",
feb1dc670b0d4e1c6fcff58b35b36da3dfc5f18cJenny Donnelly type:"numeric",
feb1dc670b0d4e1c6fcff58b35b36da3dfc5f18cJenny Donnelly styles:{
feb1dc670b0d4e1c6fcff58b35b36da3dfc5f18cJenny Donnelly majorTicks:{
feb1dc670b0d4e1c6fcff58b35b36da3dfc5f18cJenny Donnelly display: "none"
13a38bdc4d36b2fedfc970e1242ea1cb2f0ea45dTripp }
13a38bdc4d36b2fedfc970e1242ea1cb2f0ea45dTripp }
13a38bdc4d36b2fedfc970e1242ea1cb2f0ea45dTripp },
13a38bdc4d36b2fedfc970e1242ea1cb2f0ea45dTripp 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>