Static | Dynamic | Interactive

Integrate a Dynamic Plot

This demo shows how to add a dynamic plot to your webpage where a user may choose which data vectors to use for plotting.

Live example

HTML

In this example shows how to dynamically load data from a text file and allow users to modify the plot.

As part of the icanplot system, we provide a data.js file which can be used to download and parse text files for plotting. So, include the data.js file with the main icanplot.js plotting library. You can also write your own script instead to get the data for plotting.

In addition to the canvas element which will contain the figure, create a div which will contain drop downs to allow users to dynamically change the plot. This div may be placed anywhere in your page layout.


<script src="/js/icanplot.js">
<script src="/js/data.js">





JavaScript

Here is a quick summary of the javascript

// define the data url and filetype
// the header values are used for assigning names to the data vectors in
// the drop downs
var url = '/files/demo/ttest_foldchange.to_plot.txt';
var filetype = 'tsv';
var header = true;

// put the id of the canvas and div tag
// you may also put the default columns of the data file to plot when the 
// page is loaded. users may subsequently plot other columns
var divCanvas = "plot-area";
var divParamCols = "param-columns";
var default_cols = [0, 1, 2, -1];

window.onload = function() {
	icanplot_init();
}

function icanplot_init() {
	viz.init(document.getElementById(divCanvas));

	viz.minPointSize = 2;
	viz.maxPointSize = 10;

	data.loadData({
		url: url,
		filetype: filetype,
		header: header
	});

	// if data is successfully loaded, start plotting
	if (data.success) {
		createDropdowns(default_cols);
		drawFig(default_cols[0], default_cols[1], default_cols[2], default_cols[3]);
	}
}

// get data vectors and draw the figure
function drawFig(x_axs, y_axs, color, size){
	// read the data columns, given the column indices
	cols = data.getCols(x_axs, y_axs, color, size);

	// set the labels
	viz.xAxisLabel = data.colNames[x_axs];
	viz.yAxisLabel = data.colNames[y_axs];
	if(color != -1) {
		viz.colorLabel = data.colNames[color];
	}
	if(size != -1) {
		viz.sizeLabel = data.colNames[size];
	}

	viz.plot({
		x: cols.x,
		y: cols.y,
		color: cols.color,
		size: cols.size,
		label: data.rowNames
	});
}

// when X axis, Y axis, color or size source is changed, redraw figure
function redrawFig() {
	var x_axs = document.getElementById('x-select').value;
	var y_axs = document.getElementById('y-select').value;
	var color = document.getElementById('color-select').value;
	var size = document.getElementById('size-select').value;
	drawFig(x_axs, y_axs, color, size);
}

// create dropdowns by using the names of the column header
// the default columns are pre-selected
function createDropdowns(default_cols) {
	var str = "";
	var selected = "";

	str += "<table cellpadding='3' border='0'>";

	// x-axis drop down
	str += "<tr><th>X axis</th>";
	str += "<td><select id='x-select' onchange=\"redrawFig()\">";
	str += dropdownOptions(data.colNames, default_cols[0]);
	str += "</select></td></tr>";

	// y-axis drop down
	str += "<tr><th>Y axis</th>";
	str += "<td><select id='y-select' onchange=\"redrawFig()\">";
	str += dropdownOptions(data.colNames, default_cols[1]);
	str += "</select></td></tr>";

	// color drop down
	str += "<tr><th>Color by</th>";
	str += "<td><select id='color-select' onchange=\"redrawFig()\">";
	str += "<option value='-1'>None";
	str += dropdownOptions(data.colNames, default_cols[2]);
	str += "</select></td></tr>";

	// size drop down
	str += "<tr><th>Size by</th>";
	str += "<td><select id='size-select' onchange=\"redrawFig()\">";
	str += "<option value='-1'>None";
	str += dropdownOptions(data.colNames, default_cols[3]);
	str += "</select></td></tr>";

	str += "</table>";

	$('#' + divParamCols).html(str);
}

function dropdownOptions(myArray, defaultVal) {
	var str = "";
	for(var i = 0; i < myArray.length; i++) {
		var selected = (i == defaultVal ? " selected" : "");
		str += "<option value='" + i + "'" + selected + ">" + myArray[i];
	}

	return str;
}