Firejune

HumbleFinance는 HTML5 데이터 비주얼라이제이션 도구입니다. 마치 플래시로 만들어진 듯한 모양과 기능을 가진 차트를 제공합니다. 표현 범위의 제한이 없고 서로 다른 자료의 축을 공유하여 비교해야하는 금융 자료를 2D 차트로 표현하기에 적합합니다.(Google Finance 와 유사한) 그리고 특정한 구간을 선택하여 확대할 수도 있습니다. Prototype과 Flotr 자바스크립트 라이브러리를 이용하였으며, 자바스크립트 변수에 저장된 데이터와 파라미터를 근거로 그래프를 표현하고 CSS와 HTML을 이용하여 컨트롤러와 플래그 모양을 만들었습니다.

HTML:

div id="finance">
    <div id="labels">
        <div id="financeTitle">NASDAQ:GOOG</div>
        <div id="time">
            <a onclick="HumbleFinance.zoom(5);">1w</a>
            <a onclick="HumbleFinance.zoom(21);">1m</a>
            <a onclick="HumbleFinance.zoom(65);">3m</a>
            <a onclick="HumbleFinance.zoom(127);">6m</a>
            <a onclick="HumbleFinance.zoom(254);">1y</a>
            <a onclick="HumbleFinance.zoom(1265);">5y</a>
        </div>
        <div id="dateRange"></div>
    </div>
</div>

Javascript:

Event.observe(document, 'dom:loaded', function() {
    HumbleFinance.trackFormatter = function (obj) {
        var x = Math.floor(obj.x);
        var data = jsonData[x];
        var text = data.date + " Price: " + data.close + " Vol: " + data.volume;
        return text;
    };
    
    HumbleFinance.yTickFormatter = function (n) {
        if (n == this.axes.y.max) return false;
        return '$'+n;
    };
    
    HumbleFinance.xTickFormatter = function (n) { 
        if (n == 0) return false;
        var date = jsonData[n].date;
        date = date.split(' ');
        date = date[2];
        return date; 
    }
    
    HumbleFinance.init('finance', priceData, volumeData, summaryData);
    HumbleFinance.setFlags(flagData); 
    
    var xaxis = HumbleFinance.graphs.summary.axes.x;
    var prevSelection = HumbleFinance.graphs.summary.prevSelection;
    var xmin = xaxis.p2d(prevSelection.first.x);
    var xmax = xaxis.p2d(prevSelection.second.x);
    
    $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);
    
    Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
        var area = e.memo[0];
        xmin = Math.floor(area.x1);
        xmax = Math.ceil(area.x2);
        var date1 = jsonData[xmin].date;
        var date2 = jsonData[xmax].date;
        $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);
    });
});

ExplorerCanvas를 이용하면 완벽하지는 않지만 IE계열 브라우저에서도 사용할 수 있습니다.