JavaScript Diagram Builder - Logarithmic Scale Example

To draw a coordinate diagram with a logarithmic scale, define a function-scale (like shown in the example below) and use GridDelta=1 (increasing values) or GridDelta=-1 (decreasing values) and use SubGrids=-1 to get a logatithmic sub-grid. Use the logarithmic values in the functions SetBorder and ScreenX or ScreenY, as it is shown below.
This diagram was generated by

<SCRIPT Language="JavaScript">
Hosts=new Array(28174, 80000, 290000, 500000, 727000, 1200000, 2217000, 4852000, 9472000,
16146000, 29670000, 43230000, 72398092, 109574429, 147344723);
function LogScale(vv)
{ if ((vv>3)||(vv<-3)) return("10<sup>"+vv+"</sup>");
  if (vv>=0) return(Math.round(Math.exp(vv*Math.LN10)));
  else return(1/Math.round(Math.exp(-vv*Math.LN10)));
}
 document.open();
var D=new Diagram();
D.SetFrame(100, 140, 580, 460);
D.SetBorder(1988, 2002, Math.log(Hosts[0])/Math.LN10, Math.log(Hosts[14])/Math.LN10);
D.SetText("Year", "Hosts", "<B>Internet growth</B>");
D.XGridDelta=2;
D.XSubGrids=2;
D.YGridDelta=1;
D.YSubGrids=-1;
D.YScale="function LogScale";
D.SetGridColor("#FFFFFF", "#EEEEEE");
D.Draw("#DDDDDD", "#000000", true);
for (var n=1; n<Hosts.length; n++)
{ new Line(D.ScreenX(1987+n), D.ScreenY(Math.log(Hosts[n-1])/Math.LN10),
           D.ScreenX(1988+n), D.ScreenY(Math.log(Hosts[n])/Math.LN10), "#0000ff", 2, "internet hosts");
}
for (n=0; n<Hosts.length; n++)
{ new Dot(D.ScreenX(1988+n), D.ScreenY(Math.log(Hosts[n])/Math.LN10), 10, 1, "#ff0000",
          eval(1988+n)+": "+Hosts[n]+" hosts");
}
document.close();
</SCRIPT>


« Relative Position Browser Support »