Javascript/HTML scatter graph

@vwphillipsJul 14.2008 — #all acording what features you require, best to post an image of an example and what features you require.

A quick play
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 <style type="text/css">
 <!--
 .tst {
 position:relative;width:600px;height:300px;background-Color:#FFFFCC;padding-Left:20px;padding-Top:20px;padding-Bottom:20px;
 }
 
 .DTclass{
 color:#339900;font-Size:18px;width:100px;
 }
 .DDclass {
 color:#FFCC66;width:100px;text-Align:center;
 }
 .DDclassMark {
 color:#FFCC66;width:20px;height:20px;background-Color:#333399;
 }
 
 .DDclassPop {
 color:#000000;width:200px;height:30px;background-Color:#CCFFFF;text-Align:center;
 }
 
 -->
 </style>
 
 <script language="JavaScript" type="text/javascript">
 <!--
 
 function zxcChart(zxcid,zxcnmelft){
 var zxcp=document.getElementById(zxcid);
 var zxcnames=zxcp.getElementsByTagName('DT');
 var zxcdates=zxcp.getElementsByTagName('DD');
 for (var zxcnmew=0,zxcary=[],zxc0=0;zxc0<zxcnames.length;zxc0++){
 if (zxcdates[zxc0]){
 var zxcmark=zxcGetbyClassName(zxcdates[zxc0],zxcdates[zxc0].className+'Mark');
 var zxcpop=zxcGetbyClassName(zxcdates[zxc0],zxcdates[zxc0].className+'Pop');
 zxcnmew=Math.max(zxcnames[zxc0].offsetWidth,zxcnmew);
 zxcary.push([zxcnames[zxc0].firstChild.data.replace(/s/g,''),zxcnames[zxc0].className,zxcdates[zxc0].firstChild.data.replace(/s/g,''),zxcdates[zxc0].className,zxcmark?zxcmark.cloneNode(true):false,zxcpop?zxcpop.cloneNode(true):false]);
 }
 }
 while (zxcp.firstChild) zxcp.removeChild(zxcp.firstChild);
 var zxcy=zxcp.offsetHeight/zxcary.length,zxcx=zxcp.offsetWidth/zxcary.length,zxclft=parseInt(zxcStyleValue(zxcp,'padding-Left')),zxctop=parseInt(zxcStyleValue(zxcp,'padding-Top')),zxcbot=parseInt(zxcStyleValue(zxcp,'padding-Bottom'));
 for (var zxc1=0;zxc1<zxcary.length;zxc1++){
 var zxcname=zxcES('DIV',{position:'absolute',left:zxclft+'px',top:zxc1*zxcy+zxctop+'px'},zxcp,zxcary[zxc1][0]);
 zxcname.className=zxcary[zxc1][1];
 var zxcxline=zxcES('DIV',{position:'absolute',overflow:'hidden',left:zxclft+'px',top:zxc1*zxcy+parseInt(zxcStyleValue(zxcname,'font-Size'))+zxctop+'px',width:zxcp.offsetWidth-zxclft*2+'px',height:'1px',backgroundColor:zxcStyleValue(zxcname,'color')},zxcp)
 var zxcdate=zxcES('DIV',{position:'absolute'},zxcp,zxcary[zxc1][2]);
 zxcdate.className=zxcary[zxc1][2];
 zxcES(zxcdate,{left:zxc1*zxcx+zxcnmew-zxcdate.offsetWidth/2+'px',top:zxcp.offsetHeight-zxcbot-parseInt(zxcStyleValue(zxcdate,'font-Size'))+'px'});
 var zxcyline=zxcES('DIV',{position:'absolute',overflow:'hidden',top:zxctop+'px',left:zxc1*zxcx+zxcnmew+'px',width:'1px',height:zxcp.offsetHeight-zxctop*2-parseInt(zxcStyleValue(zxcdate,'font-Size'))+'px',backgroundColor:zxcStyleValue(zxcdate,'color')},zxcp)
 if (zxcary[zxc1][4]){
 zxcES(zxcary[zxc1][4],{position:'absolute'},zxcp);
 zxcES(zxcary[zxc1][4],{position:'absolute',left:zxcyline.offsetLeft-zxcary[zxc1][4].offsetWidth/2+'px',top:zxcxline.offsetTop-zxcary[zxc1][4].offsetHeight/2+'px'},zxcp);
 if (zxcary[zxc1][5]){
 zxcES(zxcary[zxc1][5],{position:'absolute'},zxcp);
 zxcES(zxcary[zxc1][5],{position:'absolute',visibility:'hidden',left:zxcyline.offsetLeft-zxcary[zxc1][5].offsetWidth/2+'px',top:zxcary[zxc1][4].offsetTop+zxcary[zxc1][4].offsetHeight+'px'},zxcp);
 zxcES(zxcary[zxc1][4],{cursor:'pointer'});
 zxcary[zxc1][4].pop=zxcary[zxc1][5];
 zxcary[zxc1][4].onmouseover=function(){ zxcES(this.pop,{visibility:'visible'}); }
 zxcary[zxc1][4].onmouseout=function(){ zxcES(this.pop,{visibility:'hidden'}); }
 }
 }
 }
 }
 
 function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
 if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
 for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
 if (zxcp) zxcp.appendChild(zxcele);
 if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
 return zxcele;
 }
 
 function zxcGetbyClassName(zxcobj,zxccls){
 var zxcclds=zxcobj.childNodes;
 for (var zxca=0;zxca<zxcclds.length;zxca++){
 if (zxcclds[zxca].className&&zxcclds[zxca].className==zxccls) return zxcclds[zxca];
 }
 return false;
 }
 
 function zxcStyleValue(zxcobj,zxcp){
 if (zxcobj.style[zxcp.replace(/-/g,'')]) return zxcobj.style[zxcp.replace(/-/g,'')];
 if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace(/-/g,'')];
 return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
 }
 
 
 
 //-->
 </script>
 
 </head>
 
 <body onload="zxcChart('tst');" >
 http://www.webdeveloper.com/forum/showthread.php?t=186289
 <div id="tst" class="tst" >
 <DL>
 
 <DT class="DTclass" >Tom</DT>
 <DD class="DDclass" >
 2008:07:10
 <div class="DDclassMark"></div>
 </DD>
 <DT class="DTclass" >Dick</DT>
 <DD class="DDclass" >
 2008:06:10
 <div class="DDclassMark"></div>
 <div class="DDclassPop">Some text</div>
 </DD>
 <DT class="DTclass" >Harry</DT>
 <DD class="DDclass" >
 2008:08:10
 <div class="DDclassMark"></div>
 </DD>
 
 
 </DL>
 </div>
 <script> vic=0; </script>
 <form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
 <input size=100 name=Show0 >
 <input size=10 name=Show1 >
 <input size=10 name=Show2 >
 <input size=10 name=Show3 >
 <input size=10 name=Show4 >
 <input size=10 name=Show5 >
 <input size=10 name=Show6 >
 <input size=10 name=Show7 >
 <input size=10 name=Show8 >
 <input size=10 name=Show9 ><br>
 <textarea name=TA rows=1 cols=100 ></textarea>
 </form>
 
 </body>
 
 </html>[/CODE]
Javascript/HTML scatter graph

1 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript/HTML scatter graph

1 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

1 Comments(s) _↴

Also in #JavaScript _↴
