떵꺼리 & 수샤

OpenApi를 이용하여 웹페이지를 제작중에 구글에서 제공하는 Chart Api를 이용해보려 했다.

구글 차트 예제
<img src="http://chart.apis.google.com/chart?
chs=200x125
&amp;chd=s:helloWorld
&amp;cht=lc
&amp;chxt=x,y
&amp;chxl=0:|Mar|Apr|May|June|July|1:||50+Kb"
alt="Sample chart" />


웹 페이지에서 버튼을 클릭하면 AJAX를 이용하여
Chart에 필요한 데이타를 받아와 현재 보고 있는 페이지에 DOM스크립트를 이용해서
그래프나 차트를 동적으로 보여주려 했지만 이미지가 표시되지 않았다.

웹페이지 코드

<div id="google_chart_box"></div>

동작하지 않는 DOM 코드

//동적으로 받아온 구글 Chart Api의 src
var txtDoc         = newsRequest.responseText;

var imgElement = document.createElement("img")
imgElement.setAttribute("src", txtDoc);
imgElement.setAttribute("alt", "스타의 활동 지수");

var chartBox     = document.getElementById("google_chart_box");
chartBox.appendChild(imgElement);

그래서 방법을 찾던 중에 해결책을 찾았다.
아래와 같이 DOM코드를 작성하면 구글 차트도 AJAX로 동적으로 보여지게 된다.

변경된 DOM 코드

var imgTag = "<img src='" + txtDoc + "' />";
           
var chartBox     = document.getElementById("google_chart_box");
chartBox.innerHTML = imgTag;

이걸 이용하면 실시간으로 차트를 보여줄 수 있어 너무 재미있다. ;)