2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp max-width: 800px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to explicitly define the axes and series for a `Chart`.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-objectstyles-source}}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Defining the axes and series for a `Chart` instance</h3>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<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
d676c69348c891c2a261a6dbd4f450ddb2e312f3Trippover 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
2431f6aca1be7f7a136c5df34022e3f902490075Trippan 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
2431f6aca1be7f7a136c5df34022e3f902490075Trippobject literals. This will allow us to place our value axis on the right and build a chart with columns and lines.</p>
2431f6aca1be7f7a136c5df34022e3f902490075TrippYUI().use('charts', function (Y)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //dataProvider source
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myDataValues = [
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //Define our axes for the chart.
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myAxes = {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp financials:{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp keys:["miscellaneous", "revenue", "expenses"],
2431f6aca1be7f7a136c5df34022e3f902490075Tripp position:"right",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"numeric",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp majorTicks:{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp display: "none"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp dateRange:{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp keys:["date"],
2431f6aca1be7f7a136c5df34022e3f902490075Tripp position:"bottom",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"category",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp majorTicks:{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp display: "none"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp rotation:-45,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:{top:5}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //define the series
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var seriesCollection = [
2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"column",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xAxis:"dateRange",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yAxis:"financials",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xKey:"date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yKey:"miscellaneous",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xDisplayName:"Date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yDisplayName:"Miscellaneous",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#58006e"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"column",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xAxis:"dateRange",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yAxis:"financials",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xKey:"date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yKey:"expenses",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yDisplayName:"Expenses",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#e0ddd0"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#cbc8ba"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"combo",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xAxis:"dateRange",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yAxis:"financials",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xKey:"date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yKey:"revenue",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xDisplayName:"Date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yDisplayName:"Deductions",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#ff7200"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#ff9f3b"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#ff7200",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //instantiate the chart
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myChart = new Y.Chart({
2431f6aca1be7f7a136c5df34022e3f902490075Tripp dataProvider:myDataValues,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp axes:myAxes,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp seriesCollection:seriesCollection,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp horizontalGridlines: true,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp verticalGridlines: true,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp render:"#mychart"