advancedusage.html revision 106cc795c2891f2d2d142772cadefbcb5975bcfa
<html>
<head>
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
</style>
<!-- BEGIN EXAMPLE CODE -->
<body>
<script>
var getData = function()
{
var bigArray = new Array();
var tempObj = new Object();
var i = (Math.floor(Math.random()*12)) + 1;
var end = i + 23;
var month;
var year;
var expensesValue = 8000;
for(i;i <= end; i++)
{
month = i;
year = 2009;
if(i > 24)
{
month = i -24;
year +=2;
}
else if(i > 12)
{
month = i - 12;
year +=1;
}
bigArray = bigArray.concat(getMonthOfDates(month, getNumberOfDays(month, year), year, expensesValue))
}
return bigArray;
}
function getNumberOfDays(mon, year)
{
if(mon == 4 || mon == 6 || mon == 9 || mon ==11)
{
return 30;
}
if(mon == 2)
{
return year%4==0?29:28;
}
return 31;
}
function getMonthOfDates(mon, max, year, value)
{
var month = new Array();
dValue = value;
for(var i = 1; i <= max; i++)
{
var obj = new Object();
dValue = dValue - 1;
}
return month;
}
</script>
<div>
<h1>Chart with Multiple Axes</h1>
<div id="testdiv" style="height:600px;width:900px">
This content will be replaced by an instance of a Flash player.
</div>
<div id="output"></div>
<script>
YUI().use('node', 'json', 'event-custom', 'swfdetect', 'swf', 'base', 'chart', function (Y)
{
// Create application level styles
var chartstyles = {
padding:{left:20, top:20, bottom:10, right:20}
};
var appstyles = {
background:{
fillColor:0x000000,
borderColor:0xff0000,
borderWidth:2
}
};
// Create data
var mydata = getData();
// Create bottom axis styles
var bottomaxisstyles = {
label:{
fontName:"Georgia",
fontSize:11,
color:0xBDD7EB,
rotation:-45,
margin:{top:5},
},
dataFormat:{
pattern:"%b %d, %y"
},
majorTicks:{
color:0xBDD7EB
},
line:{
color:0xBDD7EB
},
majorUnit:
{
count:30
}
};
// Create left axis styles
var leftaxisstyles = {
label:{
fontName:"Georgia",
fontSize:11,
color:0x5577AF,
margin:{right:5},
},
dataFormat:{
prefix:"$",
decimalPlaces:0
},
majorTicks:{
color:0xBDD7EB
},
line:{
color:0xBDD7EB
},
majorUnit:{
count:15
}
};
// Create right axis styles
var rightaxisstyles = {
label:{
fontName:"Georgia",
fontSize:11,
color:0xFF0000,
margin:{left:5},
},
dataFormat:{
prefix:"$",
decimalPlaces:0
},
majorTicks:{
color:0xBDD7EB
},
line:{
color:0xBDD7EB
},
majorUnit:{
count:15
}
};
var expensegraphstyles = {
color:0x5577AF,
marker:{fillColor:0x5577AF},
weight:"2",
showMarkers:true
};
// Add revenue graph styles
var revenuegraphstyles = {
color:0xFF0000,
marker:{fillcolor:0xff0000},
weight:"2",
showMarkers:true
}
var myapp = new Y.SWFApplication({parent:"#testdiv", swfurl:"/build/chart/assets/cartesiancanvas.swf", styles:appstyles});
myapp.set("dataProvider", mydata);
// Create chart and set dataProvider
var mychart = new Y.BorderContainer({parent:myapp, styles:chartstyles});
myapp.addItem(mychart);
mychart.on("renderComplete", Y.bind(function(e){
document.getElementById("output").innerHTML += "<br/>Graphs drawn.";
}, this));
// Create axes
var mybottomaxis = new Y.Axis({parent:mychart, axisType:"Time", styles:bottomaxisstyles});
var myleftaxis = new Y.Axis({parent:mychart, axisType:"Numeric", styles:leftaxisstyles});
var myrightaxis = new Y.Axis({parent:mychart, axisType:"Numeric", styles:rightaxisstyles});
// Add axes keys
mybottomaxis.addKey("date");
myleftaxis.addKey("expenses");
myrightaxis.addKey("revenue");
// Create graph
var mygraph = new Y.Graph({parent:mychart, seriesCollection:[
{
type:"line",
xAxisData:mybottomaxis,
yAxisData:myleftaxis,
xKey:"date",
yKey:"expenses",
hitTest:"horizontal",
displayName:"Expenses",
styles:expensegraphstyles
},
{
type:"line",
xAxisData:mybottomaxis,
yAxisData:myrightaxis,
xKey:"date",
yKey:"revenue",
hitTest:"horizontal",
displayName:"Revenue",
styles:revenuegraphstyles
}
],
handleEventListening:true
});
var mydatatip = new Y.DataTip({parent:myapp, graph:mygraph});
// Add items
mychart.addBottomItem(mybottomaxis);
mychart.addLeftItem(myleftaxis);
mychart.addRightItem(myrightaxis);
mychart.addCenterItem(mygraph);
});
</script>
<!-- END EXAMPLE CODE -->
<p><strong>Note:</strong> There is currently no finalized API for the charts package. The files and classes used to create this example are temporary JavaScript wrappers used to display and test the functionality of the current state of the charts package. The draft API will be announced when the first beta of the Charts component is released.</p>
<h3>Getting Started</h3>
<p>In the previous examples, we have created chart applications using the SimpleChart class. The advantage to using such a class is that it makes it easy to instantiate a chart with very little code. SimpleChart uses composition to build a chart with several different classes. If you want or need more control and flexibility in creating a chart application, you can use these individual classes to create your own custom chart. In the following example, we are going to create a chart with two vertical axes and two line graphs.</p>
<h3>The Building Blocks</h3>
<p>A Cartesian chart, in its purest form, consists of a graph and two axes. To build our application, we'll use the following classes:</p>
<ul>
<li>Chart: Aggregates and manages layout for the different pieces of a Cartesian chart.</li>
<li>Axis: Creates a horizontal or vertical axis to use in a Cartesian chart.</li>
<li>LineGraph: Create a line graph for a Cartesian chart.</li>
</ul>
<h3>Styles</h3>
<p>As with the previous examples, we'll start by defining the styles for our chart. Since we are using the individual classes, we'll create a style hash for each object.</p>
<pre>
// Create application level styles
var chartstyles = {
chart:{
padding:{left:20, top:20, bottom:10, right:20}
},
background:{
fillColor:0x000000,
borderColor:0xff0000,
borderWidth:2
}
};
// Create data
var mydata = getData();
// Create bottom axis styles
var bottomaxisstyles = {
label:{
fontName:"Georgia",
fontSize:11,
color:0xBDD7EB,
rotation:-45,
margin:{top:5},
},
dataFormat:{
pattern:"%b %d, %yyyy"
},
majorTicks:{
color:0xBDD7EB
},
line:{
color:0xBDD7EB
}
};
// Create left axis styles
var leftaxisstyles = {
label:{
fontName:"Georgia",
fontSize:11,
color:0x5577AF,
margin:{right:5},
},
dataFormat:{
prefix:"$",
decimalPlaces:0
},
majorTicks:{
color:0xBDD7EB
},
line:{
color:0xBDD7EB
}
};
// Create right axis styles
var rightaxisstyles =
{
label:{
fontName:"Georgia",
fontSize:11,
color:0xFF0000,
margin:{left:5},
},
dataFormat:{
prefix:"$",
decimalPlaces:0
},
majorTicks:{
color:0xBDD7EB
},
line:{
color:0xBDD7EB
}
};
// Add expense graph styles
var expensegraphstyles =
{
color:0x5577AF,
weight:"2"
};
// Add revenue graph styles
var revenuegraphstyles =
{
color:0xFF0000,
weight:"2"
}
</pre>
<h3>Create the Chart Application</h3>
<p>Now, we'll create an instance of <code>Y.Chart</code>, assigning the swf url and the application-level style object through the config argument:</p>
<pre>
var mychart = new Y.Chart("#testdiv", {swfurl:"/build/chart/assets/cartesiancanvas.swf", styles:chartstyles});
mychart.setDataProvider(mydata);
</pre>
<h3>Creating the Axes</h3>
<p>Now, we'll create two vertical (y) axes and a horizontal axis (x), and add the key names corresponding to the data that should be associated with each axis (more than one key can be added to each axis, but we are only using one per axis in this example):</p>
<pre>
var mybottomaxis = new Y.Axis(mychart, {axisType:"Time", styles:bottomaxisstyles});
var myleftaxis = new Y.Axis(mychart, {axisType:"Numeric", styles:leftaxisstyles});
var myrightaxis = new Y.Axis(mychart, {axisType:"Numeric", styles:rightaxisstyles});
mybottomaxis.addKey("date");
myleftaxis.addKey("expenses");
myrightaxis.addKey("revenue");
</pre>
<h3>Adding Graphs</h3>
<p>Now, we will create two graph instances, assigning the appropriate axes, keys and style objects to each one:</p>
<pre>
var myexpensegraph = new Y.LineGraph(mychart, {xaxis:mybottomaxis, yaxis:myleftaxis, xkey:"date", ykey:"expenses", styles:expensegraphstyles});
var myrevenuegraph = new Y.LineGraph(mychart, {xaxis:mybottomaxis, yaxis:myrightaxis, xkey:"date", ykey:"revenue", styles:revenuegraphstyles});
</pre>
<h3>Putting It All Together</h3>
<p>All that is left is to add each component to the application canvas, using the appropriate "add" method:</p>
<pre>
mychart.addBottomItem(mybottomaxis);
mychart.addLeftItem(myleftaxis);
mychart.addRightItem(myrightaxis);
mychart.addCenterItem(myexpensegraph);
mychart.addCenterItem(myrevenuegraph);
</pre>
</div>
</body>
</html>