f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<style scoped>

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

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

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp#mychart {

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp margin:10px 10px 10px 10px;

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp width:90%;

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp max-width: 800px;

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp height:400px;

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp}

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp</style>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<div class="intro">

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

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp</div>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<div class="example">

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp{{>charts-simple-source}}

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp</div>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<h3>Creating a simple `Chart` instance</h3>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<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

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripprender the Chart.</p>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp```

f095a571b21c645c423de8ecc101dbd4612d6ef9TrippYUI().use('charts', function (Y)

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp{

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp var myDataValues = [

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

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

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

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

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp {category:"5/5/2010", values:5000}

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp ];

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp

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

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp});

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp```

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<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>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp```

f095a571b21c645c423de8ecc101dbd4612d6ef9Trippvar myDataValues = [

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp ["5/1/2010", "5/2/2010", "5/3/2010", "5/4/2010", "5/5/2010"],

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp [2000, 50, 400, 200, 5000]

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp];

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp```

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp