본문 바로가기

Javascript

Javascript로 그래프 그리기 (VML)


<script src="DrawingCanvas.js" charset="utf-8" type="text/javascript"></script>
<script src="CommonAjax.js" charset="utf-8" type="text/javascript"></script>

<body leftmargin="10" topmargin="10">

<div id="PointGraph" style="background-color:#eee;width:181px;height:81px;"></div>

<script language = "JavaScript">
<!--
 var IntervalValue;
 IntervalValue = setInterval("InitGraph()",2000);

  //Ajax로 데이터를 요청
 function InitGraph()
 {
  document.getElementById('PointGraph').innerHTML = "";
   sendRequest(on_loaded1,'','GET','cnt.dat',true,true);
 }

  //콜백 함수 ( 수신시에 실행됩니다 )
  function on_loaded1(oj)
  {
    //응답을 취득
    var res  = oj.responseText;
    var rows = res.split('\n');

  var GraphCanvasWidth = 180;
  var GraphCanvasHeight = 80;
  var GraphWidthSpace = 20;
  var GraphHeightSpace = 20;

  var TextObj = document.getElementById("canvasLocation");
   
    //꺾은 선 그림
    var x    = 0;
    var lines = new DrawingCanvas( document.getElementById('PointGraph') , GraphCanvasWidth+1, GraphCanvasHeight+1);

    lines.container.setAttribute('style','position:absolute;top:10px;left:10px');
    lines.setBgColor("#eee");
   
    //랜덤그래프
  var x = 0;
  var RandY;
    lines.setLineColor("#ff0000");
    lines.setLineWidth(1);

    //랜덤그래프 - 빨강
  RandY = Math.random() * GraphCanvasHeight;
    lines.startLine(x, RandY);
    for (var i = 0; i <= GraphCanvasWidth / GraphWidthSpace; i++) {
   RandY = Math.random() * GraphCanvasHeight;
      lines.lineTo( x , RandY);
      x += GraphWidthSpace;
    }
    lines.endLine();
  x = 0;
    //랜덤그래프 - 파랑
    lines.setLineColor("#0000ff");
  RandY = Math.random() * GraphCanvasHeight;
    lines.startLine(x, RandY);
    for (var i = 0; i <= GraphCanvasWidth / GraphWidthSpace; i++) {
   RandY = Math.random() * GraphCanvasHeight;
      lines.lineTo( x , RandY);
      x += GraphWidthSpace;
    }
    lines.endLine();
  x = 0;
    //랜덤그래프 - 주황
    lines.setLineColor("#ffa500");
  RandY = Math.random() * GraphCanvasHeight;
    lines.startLine(x, RandY);
    for (var i = 0; i <= GraphCanvasWidth / GraphWidthSpace; i++) {
   RandY = Math.random() * GraphCanvasHeight;
      lines.lineTo( x , RandY);
      x += GraphWidthSpace;
    }
    lines.endLine();


    //축 그래프 세팅
    lines.setLineColor("#888");
    lines.setLineWidth(1);
    //수직축 그림
    for (var x = 0; x <= GraphCanvasWidth; x+=GraphWidthSpace) {
      lines.startLine(x,0);
      lines.lineTo( x , GraphCanvasHeight);
      lines.endLine();
    }
    //수평축 그림
    for (var y = 0; y <= GraphCanvasHeight; y+=GraphHeightSpace) {
      lines.startLine(0,y);
      lines.lineTo(GraphCanvasWidth, y);
      lines.endLine();
    }
  }


//-->
</script>


</body>