2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp#custom-doc { width: 95%; min-width: 950px; }

2431f6aca1be7f7a136c5df34022e3f902490075Tripp#pagetitle {background-image: url(../../assets/bg_hd.gif);}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp#mychart {

2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp width:90%;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp max-width: 800px;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</style>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">

d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to use `Charts` to create a basic chart.</p>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">

2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-simple-source}}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Creating a simple `Chart` instance</h3>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>The Charts module allows you to create and customize different chart types. All you need to get started is a data provider (array), one line of code and a dom element (div) in which to

2431f6aca1be7f7a136c5df34022e3f902490075Tripprender the Chart.</p>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp```

2431f6aca1be7f7a136c5df34022e3f902490075TrippYUI().use('charts', function (Y)

2431f6aca1be7f7a136c5df34022e3f902490075Tripp{

2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myDataValues = [

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/1/2010", values:2000},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/2/2010", values:50},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/3/2010", values:400},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/4/2010", values:200},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/5/2010", values:5000}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp ];

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});

2431f6aca1be7f7a136c5df34022e3f902490075Tripp});

2431f6aca1be7f7a136c5df34022e3f902490075Tripp```

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>The `dataProvider` attribute accepts either an array of object literals or a multi-dimensional array. Below is an alternative `dataProvider` source for the above chart.</p>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp```

2431f6aca1be7f7a136c5df34022e3f902490075Trippvar myDataValues = [

2431f6aca1be7f7a136c5df34022e3f902490075Tripp ["5/1/2010", "5/2/2010", "5/3/2010", "5/4/2010", "5/5/2010"],

2431f6aca1be7f7a136c5df34022e3f902490075Tripp [2000, 50, 400, 200, 5000]

2431f6aca1be7f7a136c5df34022e3f902490075Tripp];

2431f6aca1be7f7a136c5df34022e3f902490075Tripp```