creating a selectable chart in yui chart api.
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">
<!--Script and CSS includes for YUI dependencies on this page-->
<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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
<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>
posted by सुरेश Suresh नागर Nagar @ 1:30 AM
0 comments
