Skip to content
This repository has been archived by the owner on May 4, 2019. It is now read-only.
Adil edited this page Nov 13, 2013 · 58 revisions

  • You have some list-of-items (mails, digital collections, news, …) that you want to easily get an overview of?
  • Filtering options that feels intuitive, and gives you the right power when needed?
  • Don’t have much screen space for the box, and want to scale easily without losing control?
  • + Simple API to convert data into your interface.

Keshif is here to help you.

Tutorial & Sample Code

Tutorial is here . Using Nobel dataset, simply import the dataset with default configurations, then customize for more effective and detailed browsing.

Sample code:

kshf.init({
    domID : "#chart_div4",
    categoryTextWidth:186,
    source : {
        gdocId : '0Ai6LdDWgaqgNdFhuMXh0V1E2Wk5tU19JaDltUWVMVnc',
        sheets : [ {name:"Posts"} ]
    },
    loadedCb: function(){
        postCols = kshf.dt_ColNames.Posts;
        kshf.cellToArray(kshf.dt.Posts, [postCols.categories], ",", false);
    },
    charts: [ // 2 facets, the first one also describing time chart
        {   facetTitle: "Category",
            timeTitle: "Date"
        },{
            facetTitle: "Author",
            catDispCountFix: 6,
            textFilter: 'by', textGroup: 'authors'
        }
    ],
    sortOpts:{
        columns : [
            {   name: 'Date',
                width: 45,
                value: function(d){ return d.data[postCols.date].getUTCFullYear(); },
                value_type : 'number'
            }
        ],
        textSearch : function (d) { return d.data[postCols.title]; },
        textSearchTitle : "post title",
        contentFunc : function(d) { 
        	// return an html string which you can generate from the data parameter, d
        }
    }
});

API Documentation

Main Parameters
Data Source Parameters
Facet Parameters
List Parameters
Notes

Demos

Author

Mehmet Adil Yalcin @ HCIL, University of Maryland, College Park

Funded in part by Huawei.