Plotting a grpah in code

sist_si · 13 Nov 2008 at 10:18

Hi guys,
I'm looking to plot a graph programmatically...hopefully using an API or javascript. I have four points to plot which will form a kind of 'lozenge' shape. I've taken a look at Google chart and also FLOT as well but I'm not 100% sure they can do what I need.
I have a couple of questions - is there anything that can do this?
Also, what type of graph is this??

Here is an e.g. of what it would look like.

SimonCHere · 13 Nov 2008 at 11:35

OK nicked off someone else and fiddled with to work:

Code:

<html>

<head>
<title>Vector Line Demo</title>
</head>

<body>

<script language="javascript">

function DrawLinHor( x, y, size, color){
var str;
  if (x>=0 && y>=0 && size>0){
    str = '<div style="position:absolute; left:' + x + 'px; top:' + y + 'px;width:' + size + 'px; height:1px;background-color:' + color + '"><table height=1 width=' + size + '></table></div>\n';
  } else {
    str = '';
  }
  document.write(str);
}

function DrawLinVert( x, y, size, color){
var str;
if (x>=0 && y>=0 && size>0){
str = '<div style="position:absolute; left:' + x + 'px; top:' + y + 'px;width:1px; height:' + size + 'px;background-color:' + color + '"><table height=' + size + ' width=1></table></div>\n';
} else {
str = '';
}
document.write(str);
}

function DrawLine( x1, y1, x2, y2, color ){
deltax=Math.abs(x2-x1);
deltay=Math.abs(y2-y1);

if (deltax>=deltay){
  if (y2<y1) {
    help=x1;
    x1=x2;
    x2=help;
    help=y1;
    y1=y2;
    y2=help;
  }

  deltax=x2-x1;
  deltay=y2-y1;
  dstep=deltax/(deltay+1);

  x=x1;
  if (dstep<0){
    x=x+dstep;
  }


  for (y=y1;y<=y2;y++){

    size=((x+dstep)-(x));
    if (dstep<0) {
     DrawLinHor( (x)-(dstep)+(size),(y),Math.abs(size),color );
    } else {
      DrawLinHor( (x),(y),Math.abs(size),color );
    }
    x=x+dstep;
  }
}
else {
  if (x2<x1) {
    help=x1;
    x1=x2;
    x2=help;
    help=y1;
    y1=y2;
    y2=help;
  }

deltax=x2-x1;
deltay=y2-y1;
dstep=deltay/(deltax+1);

y=y1;
if (dstep<0){
y=y+dstep;
}

for (x=x1;x<=x2;x++){
size=((y+dstep)-(y))
if (dstep<0){
DrawLinVert( (x),(y)-(dstep)+(size),Math.abs(size),color );
} else {
DrawLinVert( (x),(y),Math.abs(size),color );
}
y=y+dstep;
}
}
}
DrawLine(300,50,300,600,"#0000FF");
DrawLine(50,300,600,300,"#0000FF");
DrawLine(150,300,300,220,"#FF00FF");
</script>

</body>
</html>

Original Source http://bytes.com/forum/thread88771.html
It's not very efficient but it works
Simon

sist_si · 13 Nov 2008 at 11:54

Cheers Simon.
I'll have a blast!

SimonCHere · 13 Nov 2008 at 12:15

Good luck.
As the what the graph is call I have no idea!

sist_si · 13 Nov 2008 at 12:18

I've actually managed to plot it using the Google Chart API. It's classed as a 'Radar' graph.
Oooooo....fancy!