create plots/charts dynamically on a web page

19 Years Ago jarn 0 108 Views

Use layers to create plots within a browser. Each point to be plotted is rendered via a layer (using the DIV tag). Mozilla/Firefox/IE seem to handle thousands of layers without any problem. Can attach event handler to each point for additional interactivity. Snippet example is housed within a JSP at the location below.

Same technique can be used to create lines between rendered objects on the fly. Compute the equation of a line between two rendered objects. Plot the line point by point and render via div's.

Have fun....
Code source and demo are at
http://www.datacorner.com/coding

click on the jsp for the demo.
click on the txt file and then view source to see the code.

seems to work just fine on IE5.0 or greater / MOZILLA / FIREFOX

java

<%@ page import="java.util.*" %>
<%@ page import="java.util.zip.*" %>
<%@ page import="java.io.*" %>
<%@ page import="java.lang.*" %>
<%@ page import="java.lang.Math" %>
<%@ page import="java.net.*" %>

<html>
<head>
<title>XY Plotter</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2">
<!--
// MODIFIED 10-25-04 fixed scaling JA
function showID(layerID)
{
        document.Show.Symbol.value = layerID
        return true
}

function postInfo(buttonState)
{
        document.Show.hiddenState.value=buttonState;
        document.Show.submit();
}

//-->
</script>

</head>
<body>

<script language="JavaScript1.2">
<!--
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0
var symB = "text"
//-->
</script>

<%!
// /*************  start of utility routines  ****************/

protected boolean stopRequested = false;
public int qIndex[]=new int[10000];
int BUFFER = 2048;

// compute sample data to be plotted (odd sinusoid harmonics)
public int makeData( Float[] data, String tempFile, int ORDER) {
        int count=0;

        for (int i=0;i<BUFFER;i++){
                float sinArg=(new Float(6.28).floatValue())*(new Float(i).floatValue())/(new Float(BUFFER).floatValue());
                float dummy=0;
                for (int m=1;m<=ORDER;m+=2){
                        dummy+=new Float(Math.sin(m*sinArg)).floatValue()/(new Float(m).floatValue());
                }
                data[i]=new Float(dummy);
        }
        count=BUFFER;
        return count;
}

%>
<%

// /*************  start of main routine  ****************/
String fName="";
String tempFile="c:/temp/tempFile";
Float floatXBuf[]=new Float[10000];
Float floatYBuf[]=new Float[10000];
String passBuf []=new String[10000];
String[] argSet1;
String[] argSet2;
String fOrder="";
String fState="";
int count=0;
float maxYval=0;
float minYval=0;
float maxXval=0;
float minXval=0;
int ORDER = 17;
int MAX_X=450;     // max x axis expanse
int MAX_Y=250;     // max y axis expanse
int Y_DIDDLE=25;   // tweak the y values down a bit

// get form data if this is an interactive call
boolean formEntry=false;
if (request.getParameterValues("hiddenState")!=null) {
        argSet1 = request.getParameterValues("hiddenState");
        fState=argSet1[0];
        formEntry=true;
}
if (request.getParameterValues("hiddenOrder")!=null) {
        argSet2= request.getParameterValues("hiddenOrder");
        fOrder=argSet2[0];
        formEntry=true;
}
if (formEntry){
        Integer fOrderInt=new Integer(fOrder);
        // order of the harmonics we are computing
        ORDER=fOrderInt.intValue()+2;
        if (fState.indexOf("rst")!=-1)
        ORDER=1;
}

// compute the sample data to be plotted
count=makeData(floatYBuf,tempFile,ORDER);
// start the scaling to fit the data on the plot surface
//    first compute min/max
for (int i=0;i<count;i++) {
        floatXBuf[i]=new Float(i);
        if (floatYBuf[i].floatValue()>maxYval)
             maxYval=floatYBuf[i].floatValue();
        if (floatYBuf[i].floatValue()<minYval)
             minYval=floatYBuf[i].floatValue();
}
maxXval=count;
minXval=0;
//  now scale using the min/max values and plot surface size to fit in the plot area
String tableHeader= new String("XY Plotter");
int xPosition=0;
int yPosition=0;
float yScale=MAX_Y/(maxYval-minYval) ;
float yOffs=(maxYval-minYval)/2;
float xScale=MAX_X/(maxXval-minXval) ;
float xOffs=(maxXval-minXval)/2;
for (int i=0;i<count;i++) {
        floatXBuf[i]=new Float(xScale*(floatXBuf[i].floatValue()-xOffs));
        floatYBuf[i]=new Float(yScale*(floatYBuf[i].floatValue()-yOffs));
}
%>
<form name="Show" action="./doPlotGRF.jsp" method="get">
<!-- <input type="text" name="MouseX" value="0" size="4"> X<br>
<input type="text" name="MouseY" value="0" size="4">Y<br>
-->
<input type="hidden" name="hiddenOrder" value="<%=ORDER%>">
<input type="hidden" name="hiddenState" >
<div id="parent" style="position:absolute; width:510px; height:300px; z-index:2;  top: 13px; left: 20px; background-color: #CCCCFF; layer-background-color: 

#CCCCFF; border: 1px none #000000; visibility: visible"">

<div id="addHarmonic" style="position:absolute; width:21px; height:14px; z-index:3; left: 432px; top: 280px; background-color: #000099; 

layer-background-color: #000099; border: 1px none #000000" onmousedown="postInfo('add')">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1" color="#FFFFFF">add</font></div>
</div>

<div id="resetHarmonic" style="position:absolute; width:21px; height:14px; z-index:3; left: 465px; top: 280px; background-color: #000099; 

layer-background-color: #000099; border: 1px none #000000" onmousedown="postInfo('rst')">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1" color="#FFFFFF">reset</font></div>
</div>

<div id="SymbolID" style="position:absolute; width:41px; height:22px; z-index:3; left: 1px; top: 22px;">
<input type="text" name="Symbol" value="NAN" size="6">
</div>

<div id="SymbolLabel" style="position:absolute; width:41px; height:22px; z-index:3; left: 58px; top: 29px;"> <strong><font color="#000066" size="1" 

face="Arial, Helvetica, sans-serif">COORD</font></strong></div>

<div id="Label-1" style="position:absolute; left:447px; top:23px; width:53px; height:17px; z-index:3"><font color="#000066" size="1" face="Arial, Helvetica, 

sans-serif">High / High</font></div>

<div id="Label-2" style="position:absolute; left:6px; top:281px; width:48px; height:17px; z-index:3"><font color="#000066" size="1" face="Arial, Helvetica, 

sans-serif">Low / Low</font></div>

<div id="tHeader" style="position:absolute; width:510px; height:15px; z-index:2; top: 0px; left: 0px; background-color: #000066; visibility: visible;"><font 

color="#FFFFff" size="2" face="Arial, Helvetica, sans-serif"><strong><%=tableHeader%></strong></font></div>

<div id="divider1" style="position:absolute; width:510px; height:2px; z-index:2;   top: 15px; left: 0px; background-color: #FFFFFF; visibility: visible"><img 

src="image/greenDot.gif" width="1" height="1"></div>

<div id="divider2" style="position:absolute; width:510px; height:2px; z-index:2;   top: 300px; left: 0px; background-color: #000066; visibility: visible"><img 

src="image/greenDot.gif" width="1" height="1"></div>

<%
// dump the output up to now
out.flush();
// and now start plotting points, one layer for each point
// the div ID is the point position
for (int i=0;i<count;i++) {
xPosition=MAX_X/2+floatXBuf[i].intValue();
yPosition=MAX_Y+floatYBuf[i].intValue()+Y_DIDDLE;
%>
<div id="<%=i%>" style="position:absolute;width:5;height:5;top:<%=yPosition%>;left:<%=xPosition%>" onmouseover="showID(this.id);">
<img src="blueDot.gif" width="3" height="3"></> </div>
<%
}
%>
</div>
</form>
</body>
</html>

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.