charts-objectstyles.mustache revision d676c69348c891c2a261a6dbd4f450ddb2e312f3
223N/A<style scoped>
223N/A#mychart {
223N/A margin:10px 10px 10px 10px;
223N/A width:90%;
223N/A max-width: 800px;
223N/A height:400px;
223N/A}
223N/A</style>
223N/A<div class="intro">
223N/A<p>This example shows how to explicitly define the axes and series for a `Chart`.</p>
223N/A</div>
223N/A<div class="example">
223N/A{{>charts-objectstyles-source}}
223N/A</div>
223N/A<h3>Defining the axes and series for a `Chart` instance</h3>
223N/A
223N/A<p>As we have seen from previous examples, the `Chart` class allows you to create and customize multiple chart types with very little code. Sometimes you'll want more control
223N/Aover the `Chart`. Suppose you want to place your value axis on the right or you need different series types in the same chart. Charts allows you to explicitly define your series and axes objects. You can either declare
223N/Aan axis or series directly or define them with an object literal and allow the `Chart` instance to build them for you. In this example, we are going to define our axes and series with
223N/Aobject literals. This will allow us to place our value axis on the right and build a chart with columns and lines.</p>
223N/A
223N/A```
3996N/AYUI().use('charts', function (Y)
223N/A{
223N/A //dataProvider source
223N/A var myDataValues = [
223N/A {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
223N/A {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100},
2350N/A {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500},
223N/A {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800},
223N/A {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
223N/A {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200}
844N/A ];
2350N/A
2350N/A //Define our axes for the chart.
1273N/A var myAxes = {
223N/A financials:{
3661N/A keys:["miscellaneous", "revenue", "expenses"],
3661N/A position:"right",
3996N/A type:"numeric",
3996N/A styles:{
3996N/A majorTicks:{
223N/A display: "none"
223N/A }
223N/A }
223N/A },
223N/A dateRange:{
223N/A keys:["date"],
223N/A position:"bottom",
223N/A type:"category",
223N/A styles:{
223N/A majorTicks:{
813N/A display: "none"
813N/A },
223N/A label: {
2498N/A rotation:-45,
2498N/A margin:{top:5}
2498N/A }
2498N/A }
2498N/A }
2498N/A };
2498N/A
223N/A //define the series
223N/A var seriesCollection = [
223N/A {
223N/A type:"column",
2350N/A xAxis:"dateRange",
2350N/A yAxis:"financials",
223N/A xKey:"date",
223N/A yKey:"miscellaneous",
223N/A xDisplayName:"Date",
223N/A yDisplayName:"Miscellaneous",
223N/A styles: {
223N/A border: {
223N/A weight: 1,
223N/A color: "#58006e"
3996N/A },
3996N/A over: {
3996N/A fill: {
3996N/A alpha: 0.7
3996N/A }
}
}
},
{
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"
});
});
```