बस कुछ लिखना चाहता हूं.: May 2009

yahoo chart api modifies the responseSchema after the call to chart widget,so if you try to change dynamically the passed schema to id you may face problems.
e.g. if the passed schema to chart widget is
myDataSource.responseSchema =
{
fields: [ "rupees", "share1", "share2","share3","share4"]
};

and after the call to chart widget you try to access the array responseSchema's named subscript fields' first element you may not get it, coz it gets gets changed to the key value pair.
If you want to change/update the schema dynamically you have to redraw the chart (if anyone knows better way - plz let me know).

below the example for creating a line chart using yui chart api and dynamically changing the schema to create a selectable graph.

download yui and install it as webapps in any server of your choice - i did it in tomcat

below code is for creating a line chart using YUI where using checkboxes you can select the data to show.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Learning Yahoo charts</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="assets/yui.css" >
<style>

/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}

</style>

<link rel="stylesheet" type="text/css" href="assets/dpSyntaxHighlighter.css">

<link rel="stylesheet" type="text/css" href="build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="build/dom/dom-min.js"></script>
<script type="text/javascript" src="build/event/event-min.js"></script>
<script type="text/javascript" src="build/json/json-min.js"></script>
<script type="text/javascript" src="build/element/element-min.js"></script>
<script type="text/javascript" src="build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="build/charts/charts-min.js"></script>
<script type="text/javascript" src="build/button/button-min.js"></script>


<style type="text/css">
#chart
{
width: 750px;
height: 350px;
}

.chart_title
{
display: block;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 0.4em;
}
</style>


<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
YAHOO.util.Event.throwErrors = true;
}
function changeMods(){
var fields = myDataSource.responseSchema.fields;
var modFields = new Array();
var schema = new Array(1);
var length = 0;
var count=0;

length = document.forms[0].mod.length;
modFields[count++] = "rupees";

for(var i=0;i<length; i++){
if(document.forms[0].mod[i].checked){
modFields[count++] = document.forms[0].mod[i].value;
}
}
schema['fields'] = modFields;
myDataSource.responseSchema = schema;
var mychart = new YAHOO.widget.LineChart( "chart", myDataSource, stfStyle);

return;

}

</script>
</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">

<div id="chart">
Unable to load Flash content.
The YUI Charts Control requires Flash Player 9.0.45 or higher.
You can download the latest version of Flash Player from the
<a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p>
</div>

<script type="text/javascript">

YAHOO.widget.Chart.SWFURL = "build/charts/assets/charts.swf";

//--- data

YAHOO.example.monthlyExpenses =
[
{ rupees: "1-Mar", share1: 80, share2: 70,share3:99,share4:60},
{ rupees: "2-Mar", share1: 90, share2: 80,share3:98,share4:70},
{ rupees: "3-Mar", share1: 100,share2: 81,share3:97,share4:80},
{ rupees: "4-mar", share1: 99, share2: 75,share3:99,share4:85},
{ rupees: "5-mar", share1: 95, share2: 85,share3:98,share4:90},
{ rupees: "6-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "7-Mar", share1: 80, share2: 70,share3:99,share4:60},
{ rupees: "8-Mar", share1: 90, share2: 80,share3:98,share4:70},
{ rupees: "9-Mar", share1: 100,share2: 81,share3:97,share4:80},
{ rupees: "10-mar", share1: 99, share2: 75,share3:99,share4:85},
{ rupees: "11-mar", share1: 95, share2: 85,share3:98,share4:90},
{ rupees: "12-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "13-mar", share1: 99, share2: 75,share3:99,share4:85},
{ rupees: "14-mar", share1: 95, share2: 85,share3:98,share4:90},
{ rupees: "15-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "16-mar", share1: 99, share2: 75,share3:99,share4:85},
{ rupees: "17-mar", share1: 95, share2: 85,share3:98,share4:90},
{ rupees: "18-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "19-mar", share1: 99, share2: 75,share3:99,share4:85},
{ rupees: "20-mar", share1: 95, share2: 85,share3:98,share4:90},
{ rupees: "21-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "22-mar", share1: 99, share2: 75,share3:99,share4:85},
{ rupees: "23-mar", share1: 95, share2: 85,share3:98,share4:90},
{ rupees: "24-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "25-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "26-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "27-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "29-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "30-mar", share1: 98, share2: 90,share3:100,share4:92},
{ rupees: "31-mar", share1: 98, share2: 90,share3:100,share4:92}
];

var mods = new Array();
mods[0] = "share1";
mods[1] = "share2";
mods[2] = "share3";
mods[3] = "share4";

var myDataSource = new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses );
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema =
{
fields: [ "rupees", "share1", "share2","share3","share4"]
};

//--- chart

var seriesDef =
[
{ displayName: "share1", yField: "share1" },
{ displayName: "share2", yField: "share2" },
{ displayName: "share3", yField: "share3" },
{ displayName: "share4", yField: "share4" }
];

getDataTipText = function( item, index, series )
{
var toolTipText = series.displayName + " for " + item.rupees;
toolTipText += "\n" + item[series.yField] ;

return toolTipText;
}

var currencyAxis = new YAHOO.widget.NumericAxis();

var stfStyle={
series: seriesDef,
xField: "rupees",
yAxis: currencyAxis,
dataTipFunction: getDataTipText,
style:
{
padding: 20,
legend:
{
display: "right",
padding: 10,
spacing: 5,
font:
{
family: "Arial",
size: 13
}
}
},
//only needed for flash player express install
expressInstall: "assets/expressinstall.swf"
};

var mychart = new YAHOO.widget.LineChart( "chart", myDataSource, stfStyle);

</script>

<form>
<input type="checkbox" name="mod" checked value="share1" onclick="changeMods()"> Share1
<input type="checkbox" name="mod" checked value="share2" onclick="changeMods()"> Share2
<input type="checkbox" name="mod" checked value="share4" onclick="changeMods()"> Share3
<input type="checkbox" name="mod" checked value="share3" onclick="changeMods()"> Share4
</form>

</body>
</html>

बस कुछ लिखना चाहता हूं.

Friday, May 01, 2009

creating a selectable chart in yui chart api.

बस कुछ लिखना चाहता हूं.

About Me

Previous Posts

Archives