<HTML>
<HEAD>
<TITLE>Graphs and Charts</TITLE>
<STYLE TYPE="text/css">
BODY, LI {font-family: Arial, Verdana, Sans-Serif; font-size: 8pt; text-align: left;}
#banner {font-family: Arial, Verdana, Sans-Serif; font-size: 24pt; text-align: center; color: #FFFFFF; background: brown; font-weight: 800; height: 60px; position: absolute: top: 0px; left: 0px; padding: 20px;}
.mini {font-family: Small Fonts, Smalls; font-size: 7pt; text-align: left;}
.minir {font-family: Small Fonts, Smalls; font-size: 7pt; text-align: right;}
.avg {font-family: Arial, Verdana, Sans-Serif; font-size: 8pt; text-align: left;}
.red {font-family: Arial, Verdana, Sans-Serif; font-size: 8pt; color: #FF0000; font-weight: 800;}
.description {font-family: Arial, Verdana, Sans-Serif; font-size: 9pt; text-align: left;}
</STYLE>
<SCRIPT LANGUAGE="javascript">
function f_openclose(aobj, as_div)
{
document.getElementById(as_div).style.display = (aobj.src.indexOf("closed") > -1) ? "block" : "none" ;
aobj.src = (aobj.src.indexOf("closed") > -1) ? aobj.src.replace("closed", "open") : aobj.src.replace("open", "closed") ;
}
function f_load_image(ai)
{
var ls_href;
ls_href = document.getElementById("theurl0" + ai).value;
document.getElementById("img0" + ai).src = ls_href;
}
function f_example(aobj)
{
document.getElementById('theurl01').value=aobj.value;
f_load_image(1);
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<DIV ID=banner>Graphics: Creating Graphics on-the-fly</DIV>
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD CLASS="avg">
<BR />
It is now very simple to create graphics on the fly dynamically.
<BR />
Simply use the <B><IMG></B> tag and change its <B>SRC</B> to point to the relavent <B>ashx</B> file with the required parameters.
</TD>
</TR>
<TR>
<TD ALIGN="left">
<BR />Examples:
<SELECT ONCHANGE="f_example(this)" STYLE="font-family: Arial, Verdana, Sans-Serif; font-size: 8pt; width: 160px;">
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&caption=Dragons%20and%20Dungeons&xaxis=pushes&yaxis=pulls&background=beige&graph=10,20,30,40,50,60,70,80,90,100,100,90,110,80,120,70,130,0;&">Graph</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&caption=Dragons%20and%20Dungeons&xaxis=tricks&yaxis=fails&background=tan&bullgraph=10,20,30,40,50,60,70,80,90,100,100,90,110,80,120,70,130,0;&">Bull Graph</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&caption=Dragons%20and%20Dungeons&xaxis=fiddle&yaxis=fuddle&background=lightsteelblue&circlegraph=10,20,30,40,50,60,70,80,90,100,100,90,110,80,120,70,130,0;&">Circle Graph</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&caption=Dragons%20and%20Dungeons&xaxis=diddle&yaxis=duddle&background=azure&squares=10,20,30,40,50,60,70,80,90,100,100,90,110,80,120,70,130,0;&">Squares</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&caption=Dragons%20and%20Dungeons&xaxis=micros&yaxis=micros&background=pink&bullseyes=10,20,30,40,50,60,70,80,90,100,100,90,110,80,120,70,130,0;&">Bullseyes</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&caption=Dragons%20and%20Dungeons&xaxis=a%20cat&yaxis=fiddle&background=yellow&dots=10,20,30,40,50,60,70,80,90,100,100,90,110,80,120,70,130,0;&">Dots</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?background=lightgray&width=400&height=200&barchart=10,20,30,40,50,60,70,80,90,100,110,120,120,45,30,16,76,180;&titles=one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen,sixteen,seventeen,eighteen,nineteen,twenty;&" SELECTED>BarChart Titles</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?background=lightgray&width=400&height=200&caption=Dragons%20and%20Dungeons&xaxis=pushes&yaxis=pulls&barchart=10,20,30,40,50,60,70,80,90,100,110,120,120,45,30,16,76,180;&titles=one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen,sixteen,seventeen,eighteen,nineteen,twenty;&">BarChart Titles+</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&caption=Dragons%20and%20Dungeons&xaxis=wonder&yaxis=world&background=salmon&barchart=10,20,30,40,50,60,70,80,90,120,45,30,16,76,180;&">BarChart No Titles</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&xaxis=pushes&yaxis=pulls&background=powderblue&piechart=20,30,10,10,25,5;&titles=one,two,three,four,five,six,seven,eight,nine,ten;&">PieChart Titles</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&xaxis=pushes&yaxis=pulls&background=azure&piechart=5,10,15,20,25,15,10;&">PieChart No Titles</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&xaxis=pushes&yaxis=pulls&background=cyan&rectangles=0,0,399,199;50,20,300,180;60,30,200,150;250,30,350,90;&">Rectangles</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&xaxis=pushes&yaxis=pulls&background=steelblue&bars=50,50,125,red;100,50,25,green;150,50,100,blue;&" >Bars</OPTION>
<OPTION VALUE="ashx/DrawIt.ashx?width=400&height=200&xaxis=pushes&yaxis=pulls&background=whitesmoke&rectangles=0,0,399,199;50,20,300,180;60,30,200,150;250,30,350,90;&bars=50,50,125,red;100,50,25,green;150,50,100,blue;&" >Rectangles and Bars</OPTION>
</SELECT>
Experiment by altering the parameters below and then press: <INPUT TYPE="button" VALUE="Go" ONCLICK="f_load_image(1)" />
<BR /><BR />
<SPAN CLASS="mini">
<IMG SRC="<INPUT ID="theurl01" VALUE="ashx/DrawIt.ashx?background=lightgray&width=400&height=200&barchart=10,20,30,40,50,60,70,80,90,100,110,120,120,45,30,16,76,180;&titles=one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen,sixteen,seventeen,eighteen,nineteen,twenty;&" CLASS="mini" STYLE="width: 800px;" /> " />
</SPAN>
</TD>
</TR>
<TR><TD STYLE="height: 20px"> </TD></TR>
<TR>
<TD VALIGN='top' COLSPAN="2" ALIGN="center">
<IMG ID="img01" SRC="ashx/DrawIt.ashx?background=lightgray&width=400&height=200&barchart=10,20,30,40,50,60,70,80,90,100,110,120,120,45,30,16,76,180;&titles=one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen,sixteen,seventeen,eighteen,nineteen,twenty;&" />
</TD>
</TR>
</TABLE>
</CENTER>
<TABLE STYLE="margin-left: 10px">
<TR>
<TD CLASS="description" WIDTH="100%">
<IMG SRC="rsrcs/images/sights_closed.gif" onClick="f_openclose(this,'blurb')" /> Explanation
<DIV ID="blurb" STYLE="display: none; padding-left: 10px; font-size: 8pt;">
<!-- BEGIN ContentPlaceHolder ID="blurb" //-->
<LI>Only the <B><IMG></B> tag with its <B>SRC</B> pointing to an <B>ashx</B> file is required for graphics</LI>
<LI>So plain <B>HTML</B> pages can be used to create graphics</LI>
<LI>Graphics can be altered <B>dynamically</B> without reloading the whole page</LI>
<LI>Graphics can be created <B>without</B> any aspx pages or codebehind</LI>
<LI><I>Of course, if necessay the <B>SRC</B> for graphics can be created in aspx pages with codebehind</I></LI>
<!-- END ContentPlaceHolder "blurb" //-->
</DIV>
</TD>
</TR>
<TR>
<TD CLASS="description" WIDTH="100%">
<IMG SRC="rsrcs/images/sights_closed.gif" onClick="f_openclose(this,'thecode')" /> Code
<BR />
<DIV ID="thecode" STYLE="display: none; padding-left: 10px; font-size: 8pt;">
<!-- BEGIN ContentPlaceHolder ID="Code" //-->
<TABLE>
<TR><TD CLASS="avg" COLSPAN="4">Parameters for the <B><IMG SRC=</B> ... /> attribute: </TD></TR>
<TR><TD CLASS="avg" COLSPAN="4"><U>For Graphics Use: <B>DrawIt.ashx</B> </U></TD></TR>
<TR><TD CLASS="mini" WIDTH="100px"><B>barchart no titles</B>: </TD><TD CLASS="minir" WIDTH
MyGraphsAndCharts
需积分: 16 126 浏览量
2008-10-28
16:19:58
上传
评论
收藏 19KB ZIP 举报
MyGraphsAndCharts.zip （14个子文件） 
MyGraphsAndCharts App_Themes Skin01 
Skin01.css 8KB default.htm 17KB MasterPages masterOneAfterOther.master 3KB masterOneAfterOther.master.cs 390B rsrcs images 
sights_open.gif 97B pc_closed.gif 875B sights_closed.gif 87B pc_open.gif 883B App_Code DrawAll.cs 15KB ChartsAndGraphics.aspx 6KB ashx DrawIt.ashx 7KB includes GraphicsInstall.inc 2KB GraphicsMedleyDesc.inc 469B GraphicsMedleyCode.inc 7KB
评论0