Scatter Graphs

[Total: 0    Average: 0/5]

This will draw a graph.

Body Code:

<table>
   <tr><td>Change value for view result</td></tr>
   <tr><td><form><input value="100" onchange="tg.onchange(this.value)"><input type=button value="change"></form> [-100..100]</td></tr>
  </table>
  <script type=text/javascript language=javascript>


function Scatter() {

 this.range = [0,1];
 this.top = 0;
 this.id = "myChart";
 this.left = 0;
 this.height = 30;
 this.width  = 400;
 this.borderWidth = 2;
 this.borderStyle = "outset";
 this.lineWidth = 2;
 this.parent = null;
 this.hilightColor = "navy";

 this.k = 100;

 this.onchange = function (newValue) {
  newValue = parseInt(newValue);
  if(newValue>=-100 && newValue<=100) {
   this.k = newValue;
   this.redraw();
  }
 }

 this.getWrapperHTML = function () {
  with(this)
   return "<div style='position:absolute;left:" + left + "px;" + 
                     "top:" + top + "px;" +
                     "width:" + width + "px;" +
                     "height:" + height + "px;" +
                     "border-style:" + borderStyle + ";" +
                     "border-width:" + borderWidth + "px;'" +
                     " id=" + id + "></div>";
 }

 this.values = [[0,0]];

 this.redraw = function() {
  var tempstr = "";
  with(this) {
   values = []
   for(var i=0;i<290;i++) {
    x = i;
    y = 150 + k * Math.sin (i/30);
    values[values.length] = [x, y];
   }



   for(var i=0; i<values.length; i++) {
    tempstr += "<div style='position:absolute;background-Color:" + hilightColor +
     ";left:" + (borderWidth + parseInt(values[i][0])) + "px;" +
     "top:" + (height - 2 * borderWidth - parseInt(values[i][1])) + "px;" +
     "width:" + lineWidth + "px;height:" + lineWidth + "px;font-size:0px'></div>";

   }
   document.getElementById(this.id).innerHTML = tempstr;
  }
 }

 this.create  = function() {
  document.body.innerHTML += this.getWrapperHTML();
  this.redraw();
 }
}

var tg;
function delay_this(){
tg = new Scatter();
with(tg) {
 top = 70;
 left = 15;
 width = 300;
 height = 300;
 create();
}}
setTimeout("delay_this()",3000);
/*
 * It is possible to remove this delay call call the delay_this() routine
 * directly here
 *
 * delay_this();
 */

</script>

<BR>
Note:<BR>
This script has a delay of 3 seconds.

Times Viewed: 7

Leave a Reply

Your email address will not be published. Required fields are marked *