Simile Widgets

by Yan Sheng

介绍个生成数据图的开源js库----simileWidgets

simile-widgets不比google visualization api差多少, 而且画出的图更加漂亮些. 但是期间会加载很多js文件,,所以反应比较慢.

里面的timeline倒是有loadJSON方法, 但我使用的timeplot居然没实现..所以只能增加loadJSON方法, 可以扩展原来的timePlot, 如下代码, Timeplot的loadJson和Timeplot.DefaultEventSource的loadJSON可以独立起来, 就是如果不想用Timeplot的ajax请求, 自己获得一段json数据, 就可以直接实现Timeplot.DefaultEventSource的loadJSON,, 话说只扩展后者, 这样更加方便. 详细例子可见 http://www.ericmmartin.com/traffic-charts-for-my-commute/

/* Extend Timeplot functions */

/*
 * Mimic the timeplot.loadText function
 * - Only needed to change eventSource.loadText to eventSource.loadJSON
 */
Timeplot._Impl.prototype.loadJSON=function(url,separator,eventSource,filter){
    if(this._active){
        var tp=this;

        var fError=function(statusText,status,xmlhttp){
            tp.hideLoadingMessage();
            $('#my-timeplot').empty().html("<span class='error'>Failed to load JSON data from "+url+". Error: "+statusText+"</span");
        };

        var fDone=function(xmlhttp){
            try{
                if(xmlhttp.responseText.replace(/(\[|\])/g,'').length>0){
                    eventSource.loadJSON(xmlhttp.responseText,separator,url,filter);
                }
                else {
                    $('#my-timeplot').empty().html("<span class='error'>No data found</span>");
                }
            }catch(e){
                SimileAjax.Debug.exception(e);
            }finally{
                tp.hideLoadingMessage();
            }
        };

        this.showLoadingMessage();
        window.setTimeout(function(){SimileAjax.XmlHttp.get(url,fError,fDone);},0);
    }
}

/*
 * Mimic the eventSource.loadText function
 * - Do not parse all data, only the JSON value when creating an evt
 * - Parse the JSON into an Object
 */
Timeplot.DefaultEventSource.prototype.loadJSON=function(jsonText,separator,url,filter){
    if(jsonText==null){
        return;
    }

    var data = jsonText.parseJSON(); // 依赖json.js

    this._events.maxValues=new Array();
    var base=this._getBaseURL(url);

    var dateTimeFormat='iso8601';
    var parseDateTimeFunction=this._events.getUnit().getParser(dateTimeFormat);

    var added=false;

    if(filter){
        data=filter(data);
    }

    if(data){
        for(var i=0;i<data.length;i++){
            var row=data[i];
            if(row.date){
                var evt=new Timeplot.DefaultEventSource.NumericEvent(
                    parseDateTimeFunction(row.date),
                    this._parseJSONValue(row.value,separator)
                );
                this._events.add(evt);
                added=true;
            }
        }
    }

    if(added){
        this._fire('onAddMany',[]);
    }
}

/*
 * Turn the JSON value into an array so that it can be correctly processed
 * by Timeplot
 */
Timeplot.DefaultEventSource.prototype._parseJSONValue=function(value,separator){
    value=value.replace(/\r\n?/g,'\n');
    var pos=0;
    var len=value.length;
    var line=[];
    while(pos<len){
        var nextseparator=value.indexOf(separator,pos);
        var nextnline=value.indexOf('\n',pos);
        if(nextnline<0)nextnline=len;
        if(nextseparator>-1&&nextseparator<nextnline){
            line[line.length]=value.substr(pos,nextseparator-pos);
            pos=nextseparator+1;
        }else{
            line[line.length]=value.substr(pos,nextnline-pos);
            pos=nextnline+1;
            break;
        }
    }
    if(line.length<0)return;
    return line;
}

用用还是不错的,,,如果自己写就够呛了.^-^

条状bar, 内容空的div, 只设置高度/宽度的话, 设置背景色使其成为一个长条状时, ie6下需要注意, 也要将其font-size设为0, 不然会多出font-size的高度, 虽然里面没有字, 但还是会被撑开了.

Javascript