API

API

attr(name, [value])

Get or set attributes.

name - (Required) the name of the attribute/option to set or get
value - (Optional) if omitted the current value of the attribute is returned. If set to null the attribute is removed. Otherwise the attribute is set to the specified value.

Current set of available attributes include:

JavaScript name	HTML data attribute	Type	Description
type	data-vis-type	string	the visualization to render (e.g., bar-chart, bubble-chart, etc.)
tooltip	data-vis-tooltip	string or function	the message or a function that returns the message to be dislayed when hovering over a specific areas of the visualization (based on the visualization). Examples: dataVis.attr('tooltip', 'Nothing to see here') dataVis.attr('tooltip', function(d) { return d.key })

on(type, callback)

Set the callback functions.

type - (Required) the callback type to set (i.e., data, end, fail)
value - (Required) if omitted the callback is returned. If set to null the callback is removed. Otherwise the callback is set to the specified value.

For example:

// insert HTML link in the data
var datawithlink = function(data) {
	return data.map(function(d) {
		d.link = '<a href="' + d.key + '">' + d.value + '</a>'
		return d
	});
}

// create a table-vis with HTML enabled cells, making the inserted links clickable
SimpleDataVis(URL_or_JSONArray)
	.attr('type', 'table-vis')
	.attr('htmlcells', true)
	.on('data', datawithlink)
	.render('#dataTableWrapper')

// create a bar-chart, displaying only first ten results
SimpleDataVis(URL_or_JSONArray)
	.attr('type', 'bar-chart')
	.on('data', function(data) { return data.slice(0, 10)})
	.render('#firstTenWrapper')

Available callbacks include:

JavaScript type	HTML data attribute	Type	Callback Arguments	Description
start	data-vis-onstart	string or function	dataUrl - the url that will be used to retrieve the data	Optional - called when data is about to be retrieved
data	data-vis-ondata	string or function	data - the data that was retrieved	Optional - called when data has been retrieved but before rendering begins. This callback can be used to transform the data before it is rendered.
end	data-vis-onend	string or function		Optional - called when data visualization completes.
fail	data-vis-onfail	string or function	error - the error message	Optional - called when data retrieval fails or data visualization fails.
click	data-vis-onclick	string or function	selection - the selection that was clicked	Optional - called when specific elements of the visualization is clicked

render(selector)

Render the visualization within the HTML DOM defined by the given CSS selector. Any svg elements within the selector DOM will be replaced.

init()

Visualization is automatically performed when the DOM is successfully processed. In addition, it can also be triggered programmatically to reinspect and reinitiate the DOM elements.

SimpleDataVis.init()

More Info

• Visualizations
• Samples