Building a chart application using YUI library
In this task we will use a UI library developed by Yahoo! to build a chart.
Getting ready
The YUI library is available for download on Yahoo!'s developer website (http://developer.yahoo.com/yui/3). After we save it in our js folder, we are ready to start programming.
How to do it...
We have to start by including the YUI library in the
<head>tag of our document along with styles for the placeholder of our chart:<script type="text/javascript" src="js/yui-min.js"></script> <style> #mychart { margin:10px; width:90%; max-width: 800px; height:400px; } </style>We will place our HTML in the
<body>tag to mark where our chart will be placed:<div id="mychart"></div>
Our JavaScript is as follows:
<script type="text/javascript"> (function() { YUI().use('charts', function (Y){ //dataProvider source var myDataValues = [ {date:"January" , windows:2000, mac:800, linux:200}, {date:"February", windows:3000, mac:1200, linux:300}, {date:"March" , windows:3500, mac:1900, linux:1400}, {date:"April" , windows:3000, mac:2800, linux:200}, {date:"May" , windows:1500, mac:3500, linux:700}, {date:"June" , windows:2000, mac:3000, linux:250} ]; //Define our axes for the chart. var myAxes = { financials:{ keys:["windows", "mac", "linux"], position:"right", type:"numeric" }, dateRange:{ keys:["date"], position:"bottom",type:"category" } }; //instantiate the chart var myChart = new Y.Chart({ type:"column", categoryKey:"date", dataProvider:myDataValues, axes:myAxes, horizontalGridlines: true, verticalGridlines: true, render:"#mychart" }); }); })();</script>The results after saving and opening our HTML document are as follows:
How it works...
YUI Charts are defined in the Chart object. For the "document ready" function we will use the (function(){...})() syntax. We need to specify that we want to use YUI() 'charts'.
The main part is creating a Y.Chart object. We can define how this chart will be rendered, how our gridlines will look, where to display our chart, and which data to display. We will define axes with the myAxes object, which handles the legend on the sides. Our data are stored in the myDataValues object.
There's more...
There are many possibilities and ways to style our charts. We can split the chart to the smallest parts and set each property. For example, rotation of the label or margin:
styles:{
label: {rotation:-45, margin:{top:5}}
}YUI also covers an AJAX functionality. This is how a simple AJAX call will look:
<div id="content">
<p>Place for a replacing text</p>
</div>
<p><a href="ajax/content.html" onclick="return callAjax();">Call Ajax</a></p>
<script type="text/javascript">
//<![CDATA[
function callAjax(){
var sUrl = "ajax/content.html";
var callback = {
success: function(o) {
document.getElementById('content')
.innerHTML = o.responseText;
},
failure: function(o) {
alert("Request failed.");
}
}
var transaction = YAHOO.util.Connect
.asyncRequest('GET', sUrl, callback, null);
return false;
}
//]]>
</script>We created the callAjax() function, which is triggered by clicking on the Call Ajax hyperlink. The Ajax call is provided by YAHOO.util.Connect.asyngRequest(). We defined the HTTP method (GET), requested URL ajax/content.html, and callback functionality with the success method, which displays response text in the 'content' <div>.
