diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/docs/charts/charts-simple.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/charts/charts-simple.html Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,262 @@ + + + + + Example: Basic Charts Implementation + + + + + + + + + + +
+
+

+
+ + +

Example: Basic Charts Implementation

+
+
+
+
+
+

This example shows how to use Charts to create a basic chart.

+
+
+
+ + +
+

Creating a simple Chart instance

+ + +

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 +render the Chart.

+ +

CSS

+
#mychart {
+    margin:10px 10px 10px 10px;
+    width:90%;
+    max-width: 800px;
+    height:400px;
+}
+ + +

HTML

+
<div id="mychart"></div>
+ + +

JavaScript

+
YUI().use('charts', function (Y) 
+{ 
+    var myDataValues = [ 
+        {category:"5/1/2010", values:2000}, 
+        {category:"5/2/2010", values:50}, 
+        {category:"5/3/2010", values:400}, 
+        {category:"5/4/2010", values:200}, 
+        {category:"5/5/2010", values:5000}
+    ];
+    
+    var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});
+});
+ + +

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.

+ +
var myDataValues = [
+    ["5/1/2010", "5/2/2010", "5/3/2010", "5/4/2010", "5/5/2010"],
+    [2000, 50, 400, 200, 5000]
+];
+ +
+
+
+ +
+
+ + + +
+
+

Examples

+
+ +
+ +
+
+ + + +
+
+
+
+ + + + + + + + + + +