YUI 3 is the one of the best opensource javascript framework that I found to use for my clientele requirements.
YUI 3 provides good auto labeling for charts, but occasionally those labels will be not be good. In such cases we can customize the labeling for chart axes.
In this post I would like to explain the work around to fix labeling problems.
Lets start with creating a simple DOM element to hold our chart and apply basic styles to it.
<style>
#myChartHolder {
margin:10px 10px 10px 10px;
width:90%;
max-width: 800px;
height:400px;
}
</style>
<div id="myChartHolder">
</div>
We need YUI 3 library for working on any charts. So just point to the latest YUI library in the html header section(i.e between <head></head> tags). Say,
<script src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"> </script>
Now to render the basic chart with minimum data we use YUI's "use" method, pasted below with example data
<script>
YUI().use('charts', function (Y) {
var myAxes = {
totals:{
keys:["total"],
position:"left",
type:"numeric",
styles:{
majorTicks:{
display: "none"
}
}
},
dateRange:{
keys:["date"],
position:"bottom",
type:"category",
styles:{
majorTicks:{
display: "none"
},
label: {
rotation:-45,
margin:{top:5}
}
}
}
};
var accountsGraph = new Y.Chart({
dataProvider: [{"date":"July","total":"1"},
{"date":"August","total":"1"},
{"date":"September","total":"1"},
{"date":"October","total":0},
{"date":"November","total":"1"},
{"date":"December","total":0},
{"date":"January","total":0},
{"date":"February","total":0},
{"date":"March","total":0},
{"date":"April","total":0},
{"date":"May","total":0},
{"date":"June","total":0}],
render: "#myChartHolder",
type: "column",
categoryKey: "date",
axes:myAxes,
horizontalGridlines:true
});
});
</script>
When you execute the above script, the result html chart would look like this,
If you observe the labels of the left Y-axis, some of the numbers are not good and we definitely do not want something like that.
In order to avoid any such long decimal or to replace with any custom content, we are gonna use "labelFunction" parameter.
In this function, we will force the decimal places to take only one using javascript's native function ".toFixed()".
In the axes definition, we have two variables "totals"(Y-axis) and "dataRange"(X-axis). Place the customLabel function for "totals" like below in between position and type parameters.
position:"left",
labelFunction: function (val) {
var display = val.toFixed(1);
// 0.9999999887 will be 0.9
return display;
},
type:"numeric",
If you execute the whole code, now your html result YUI chart should look like this.
Now that solves our problem for labeling errors in YUI 3 charts. If you have any questions, you can post them as comments, I will reply as soon as possible.
No comments:
Post a Comment