4070N/A<style scoped>

4070N/A#custom-doc { width: 95%; min-width: 950px; }

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

4070N/A#mychart {

4070N/A margin:10px 10px 10px 10px;

4070N/A width:90%;

4070N/A max-width: 800px;

4070N/A height:400px;

4070N/A}

4070N/A</style>

4070N/A<div class="intro">

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

4070N/A</div>

4070N/A<div class="example">

4070N/A{{>charts-simple-source}}

4070N/A</div>

4070N/A<h3>Creating a simple `Chart` instance</h3>

4070N/A

4070N/A

4070N/A<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

4070N/Arender the Chart.</p>

4070N/A

4070N/A```

4070N/AYUI().use('charts', function (Y)

4070N/A{

4070N/A var myDataValues = [

4070N/A {category:"5/1/2010", values:2000},

4070N/A {category:"5/2/2010", values:50},

4070N/A {category:"5/3/2010", values:400},

4070N/A {category:"5/4/2010", values:200},

4070N/A {category:"5/5/2010", values:5000}

4070N/A ];

4070N/A

4070N/A var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});

4070N/A});

4070N/A```

4070N/A

4070N/A<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>

4070N/A

4070N/A```

4070N/Avar myDataValues = [

4070N/A ["5/1/2010", "5/2/2010", "5/3/2010", "5/4/2010", "5/5/2010"],

4070N/A [2000, 50, 400, 200, 5000]

4070N/A];

4070N/A```

4070N/A