Charts mit JavaScript

2006-12-10T18:36:56Z

84.160.132.18:

Die nachfolgenden Skripte stammen von der Website: http://www.wpdfd.com/advanced/ch5_1.htm

== JAVASCRIPT CHARTS ==

By manipulating the height value of an image, it is possible to produce graphs and charts dynamically.

This function takes the Y-axis value (h), scales it to fit a given height, and document.writes it into a table cell in the specified colour (c).
<pre>
function drawBar(h,c)
{
h=10+(h*168/700);
var graph="<img src='rollover/" +c+ ".gif' width='20' height='"+h+"'>"
document.write(graph);
}
</pre>

It is called from within the cell like this

drawBar(450,"red");

The individual bars are small GIF files in various colours.

The next page shows a very basic application of the technique that only draws the bars. With a little more work, it would be possible to draw the whole graph including the title, the axis values and to vary the bar widths and spacing You could also do horizontal bars by varying the width of the GIFs instead of the height. See this in action on the survey stats page.

=== Common.js ===
Einige der wichtigen Grundfunktionen:

<pre>
// Common JavaScript routines for Advanced Techniques Section
// Web Page Design For Designers
// http://www.wpdfd.com/advanced/ch1_1.htm

var an=navigator.appName; // tells if Netscape or Explorer
var av=navigator.appVersion; // tells if Mac or PC
var cssFile=""; // initial CSS file
var currentStyle="no"; // initial style
var chapterNum=0; // initial page number
currentChapter=new MakeArray(6); // make array with each page set to false
currentChapter[chapterNum]=true; // set initial page to true
var currentInfo=null;

var msg1="Chapter 1"; // these appear in the status bar
var msg2="Chapter 2";
var msg3="Chapter 3";
var msg4="Chapter 4";
var msg5="Chapter 5";

if (an == "Netscape") // this is the Netscape browser sniffer
{
if (navigator.appVersion.indexOf("Macintosh") == -1)
{
cssFile='winnn.css';
currentStyle='Windows Netscape';
}
else
{
cssFile='macnn.css';
currentStyle='Macintosh Netscape';
}
}

if (an == "Microsoft Internet Explorer") // this is the MSIE browser sniffer
{
if (av.indexOf("Macintosh") == -1)
{
cssFile='winie.css';
currentStyle='Windows Explorer';
}
else
{
cssFile='macie.css';
currentStyle='Macintosh Explorer';
}
}

function init() // loads the appropriate style sheet and images
{
l=document.URL;
if(l.indexOf("ch3")==-1)
{
ss=cssFile; // loads the appropriate style sheet
}
else
{
ss="s"+cssFile; // special styles for Chapter 3
}
document.write("<link href='"+ss+"' rel='styleSheet' type='text/css'>");
preLoadImages(7);
}

function MakeImageArray(num) // initialises an array of images
{
if (document.images)
{
this.length = num;
for (var i=0; i<=num; i++)
{
this[i] = new Image();
}
return this;
}
}

function MakeArray(num) // initialises an array of words or numbers
{
this.length = num;
for (var i = 0; i<=num; i++)
{
this[i] = false;
}
return this;
}

function preLoadImages(num) // preloads all the button images
{
mOut=new MakeImageArray(num);
mOver=new MakeImageArray(num);
mOn=new MakeImageArray(num);

if(document.images)
{
for(i=1;i<=5;i++)
{
mOut[i].src='rollover/out'+i+'.gif';
mOver[i].src='rollover/over'+i+'.gif';
mOn[i].src='rollover/on'+i+'.gif';
}
}
}

function swapL(num,state) // swaps images on rollover
// num is the number of the button
// state is true for over, false for out

{
if(document.images)
{
if(!currentChapter[num]) // if not the current page
{ // normally, this can be omitteds
if(state) // if state is true
{
document.images['pos'+num].src=mOver[num].src;
// add additional rollovers here if needed
}
else
{
document.images['pos'+num].src=mOut[num].src;
// add additional rollovers here if needed
}
}
}
}

function mClickL(num) // latched click
{
if(document.images)
{
currentChapter[chapterNum]=false; // clear current chapter from array
swapL(chapterNum,false); // reset current button
chapterNum=num; // set new chapter number
currentChapter[num]=true; // set current chapter in array
document.images['pos'+num].src=mOn[num].src; // display button for new page
}
}

function writeStyle() // tells which style sheet is being used
{
return currentStyle;
}

function download(f) // downloads files for Mac or PC in appropriate format
{
if(cssFile.indexOf("mac")!= -1)
{
theFile=f+".hqx";
}
else
{
theFile=f+".zip";
}
window.location=theFile;
}

function showHelp(f,a) // opens the info window
{
window.open(f,a,"toolbar=no,width=600,height=200,directories=no,status=no,scrollbars=yes,resize=no,menubar=no,history=no");
window.blur();
}

function parseName(u) // converts coded window name to anchor
{
theURL="";
len=u.length-1;
for(i=0;i<=len;i++)
{
c=u.charAt(i);
if(c!="_")
{
theURL=theURL+c;
}
else
{
if(u.charAt(i+1)=="_")
{
x=".";
i++;
}
if(u.charAt(i+1)=="_")
{
x="#";
i++;
}
theURL=theURL+x;
}
}
return theURL;
}

</pre>

Die folgende Technik beruht auf das auseinanderziehen von gif Grafiken:

===graph.js===
<pre>
// JavaScript for drawing dynamic charts
// by Joe Gillespie

function drawBar(h,c) // h is the y axis value, c the colour of the bar
{
h=10+(h*168/700);
var graph="<img src='rollover/"+c+".gif' width='20' height='"+h+"'>"
document.write(graph);
}

function drawBld(h,n) // for 'building block' approach
{
t=Math.floor(1+(h*(168/350)-26)/13);
document.write("<img src='rollover/bld"+n+"t.gif' width='55' height='14'><br>"); // roof
for(i=1;i<=t;i++)
{
document.write("<img src='rollover/bld"+n+".gif' width='55' height='14'><br>"); // floors
}
document.write("<img src='rollover/bld"+n+"b.gif' width='55' height='14'><br>"); // ground floor
}
</pre>

Und aufgerufen wird das Ganze folgendermaßen:
<pre>
<nowiki>
...
<h4>USING STRETCHED GIFS FOR COLUMNS<br>
<br>

</h4>
<table border='2' cellspacing='0' cellpadding='5'>
<tr>
<td>
<table border='0' cellspacing='0' cellpadding='5' width='350' bgcolor='#000066' name='graf'>
<tr>
<td colspan="8" valign='bottom' align='center'>
<h3><b><font color="#FFFFCC" face="Verdana, Geneva, Arial, sans-serif">Sales
1996 - 2001</font></b></h3>
</td>

</tr>
<tr>
<td valign='bottom' align='right'>
<pre><b>$M</b></pre>
<pre>700-</pre>
<pre>600-</pre>
<pre>500-</pre>
<pre>400-</pre>

<pre>300-</pre>
<pre>200-</pre>
<pre>100-
</pre>
</td>
<td align='center' valign='bottom'>
<script language="JavaScript" type="text/javascript">


</script>
</td>

<td align='center' valign='bottom'>
<script language="JavaScript" type="text/javascript">


</script>
</td>
<td align='center' valign='bottom'>
<script language="JavaScript" type="text/javascript">


</script>
</td>
<td align='center' valign='bottom'>
<script language="JavaScript" type="text/javascript">


</script>
</td>

<td align='center' valign='bottom'>
<script language="JavaScript" type="text/javascript">


</script>
</td>
<td align='center' valign='bottom'>
<script language="JavaScript" type="text/javascript">


</script>
</td>
<td align='center' valign='bottom' width='5'>
<h5> </h5>
</td>

</tr>
<tr valign="middle" align="center">
<td valign='bottom' align='right'> </td>
<td>
<pre>1996</pre>
</td>
<td>
<pre>1997</pre>
</td>

<td>
<pre>1998</pre>
</td>
<td >
<pre>1999</pre>
</td>
<td>
<pre>2000</pre>
</td>

<td >
<pre>2001</pre>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="4">
<tr>
<td> </td>
</tr>
</table>
</td>

</table>
</td>
</tr>
</table>
  </td>
</tr>
</table>
</td>

</tr>
<tr height="24">
<td height="24" valign="bottom" width="280"></td>
<td height="24" valign="bottom">
<p><font color="#3300ff">  Using
<script language="JavaScript" type="text/javascript">
</script>
Style</font></p>
</td>
<td height="24" align="right" valign="bottom" width="250">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="bottom"><a href="../index.htm"><img src="../images/wpdicon.gif" width="70" height="20" border="0"></a></td>
<td align="right" valign="bottom"><a href="ch5_1.htm"><img height="15" width="15" src="../images/prevar.gif" border="0" alt=""></a><img height="15" width="50" src="../images/page2.gif" alt=""><a href="ch5_3.htm"><img height="15" width="15" src="../images/nextar.gif" border="0" alt=""></a></td>
</tr>
</table>
</td>
</tr>
<tr height="24">

<td height="24" valign="bottom" width="280"></td>
<td height="24" valign="bottom" width="250"> </td>
<td height="24" align="right" valign="bottom">  </td>
</tr>
</table>
</nowiki>
</pre>

Scripts

2006-12-10T18:26:05Z

84.160.132.18:

In diesem Kapitel finden sich Beispiele für nützliche Scripts vor allem kleine JavaScript Schnipsel und Anwendungsmöglichkeiten.

[[Charts mit JavaScript]]

Wikizone - Benutzerbeiträge [de]

Charts mit JavaScript

Scripts