JavaScript Draw sine curve

The main use of CSS is the absolute positioning , the principle is to use a lot of small div to spell a graph

Html

<DivID= "Context">    <DivID= "X-coordinate">        <DivID= "X-arrow"></Div>    </Div>    <DivID= "Y-coordinate">        <DivID= "Y-arrow"></Div>    </Div></Div>    

Css

#context{width:500px;Height:320px;margin:150px Auto;position:relative;}#x-coordinate, #y-coordinate{position:Absolute; Left:0;Background-color:#0000FF;Z-index: +;}#x-coordinate{width:500px;Height:1px;Top:160px;}#x-arrow, #y-arrow{width:0px;Height:0px;Border:5px Solid Transparent;position:Absolute;}#x-arrow{Border-left-color:#0000FF; Right:-5px;Top:-5px;}#y-arrow{Border-bottom-color:#0000FF; Left:-5px;Top:-5px;}#y-coordinate{width:1px;Height:320px;Top:0;}. Metadiv{width:1px;Height:240px;Border-top:2px solid #0000FF;}

Js

var metaradian= (math.pi*2)/450; var amplitude=120; var metadivs= '; var context=document.getelementbyid ("context");  for (var i=0,len=450;i<len;i++) {    var top_offset=160-math.ceil (Math.sin (i* Metaradian) *120);    Metadivs+ = "<div class= ' metadiv ' style= ' position:absolute;left:" +i+ "Px;top:" +top_offset+ "px ' ></div > ";} context.innerhtml+=metadivs;

JavaScript Draw sine curve