HTML5 interactive stock graphic data HumbleFinance-

This article describes in detail the interactive stock graphic data HumbleFinance in HTML5. It is similar to the online display of stock software. It is completely written in JavaScript, and HumbleFinance uses the interactive stock graphic data of Prototype and Flotr library HTML5. It is similar to the online display of stock software. It is completely written in JavaScript and uses Prototype and Flotr libraries. It can be used to display the axes of real value data sharing for any two 2D datasets. Use FireFox, Chrome, or Safari for the best results.

HTML

    
        
NASDAQ:GOOG
        
         1w          1m            3m             6m              1y                5y        
        
    

JS

Event.observe(document, 'dom:loaded', function () {    prettyPrint();    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);    });});

The above is the HumbleFinance content of HTML5 interactive stock graphic data. For more information, see PHP Chinese Network (www.php1.cn )!