Visualization: A Magic Table

Overview
Example
Loading
Data Format
Configuration Options
Methods
Events
Data Policy

Overview

The Magic Table is a JavaScript library that allows you to see more in your data by applying some simple visual techniques to transform a table. The table is displayed in the browser by the canvas element. Internet Explorer is not supported.

This project is hosted by Google-code. Click here to go to the homepage and see additional examples and documentation.

By: Greg Ross

Example

The above example demonstrates a table view of financial volatilities. If the data were to be rendered in a normal table the number of rows and columns would make it difficult to view them all in one go. Uncheck the 'Fisheye' box and observe how you now have to scroll both horizontally and vertically. However, with the fisheye visualisation, you can now see all of the data simultaneously - no need for tiresome scrolling...

The following code demonstrates basic usage of the API. To see more possibilities, click here.

<html>
  <head>
  <title>A Magic Table</title>
		
  <script type="text/javascript" 
    src='http://magic-table.googlecode.com/svn/trunk/magic-table/javascript/magic_table.js'></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
	    
  <script type="text/javascript">
    google.load("visualization", "1");
    google.setOnLoadCallback(drawVisualization);
	
    function drawVisualization()
    {
      var rows = 16;
      var columns = 5;
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'column 1');
      data.addColumn('number', 'column 2');
      data.addColumn('number', 'column 3');
      data.addColumn('number', 'column 4');
      data.addColumn('number', 'column 5');
      data.addRows(rows);

      var i = rows - 1;
      var j;
		
      do
      {
         j = columns - 1;
         do
         {
            data.setCell(i, j, Math.round(Math.random()*10));
         }
         while (j-- > 0) 
      }
      while (i-- > 0)

      var vis = new greg.ross.visualisation.MagicTable(document.getElementById('chart_div'));

      options = {};
      options.tableTitle = "Bar-fill";
      options.enableFisheye = true;
      options.enableBarFill = true;
      options.defaultRowHeight = 25;
      options.defaultColumnWidth = 60;
      options.rowHeaderCount = 0;
      options.columnHeaderCount = 0;
      options.tablePositionX = 0;
      options.tablePositionY = 0;
      options.tableHeight = 403;
      options.tableWidth = 315;

      vis.draw(data, options);
  }
  </script>
		
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Loading

A google.load package name is not required.

	  	google.load("visualization", "1");

The visualization's class name is greg.ross.visualisation.MagicTable

	  	var vis = new greg.ross.visualisation.MagicTable(document.getElementById('chart_div'));

Data Format

The table can contain strings as well as numbers, although the default background colour for strings is white.

Any number of rows and columns.
Any number of row and header scale cells. These are displayed when the 'fisheye' function is switched off.

Configuration Options

Name	Type	Default	Description
tableTitle	String	none	The title that appears above the table.
enableFisheye	boolean	true	This switches the fisheye function on or off.
enableBarFill	boolean	false	This switches the bar-fill function on or off.
defaultRowHeight	number	none	The default height of rows when the fisheye function is switched off.
defaultColumnWidth	number	none	The default width of columns when the fisheye function is switched off.
columnWidths	object	none	An array of objects. Each object has a 'column' index property and a 'width' property.
rowHeaderCount	number	0	This specifies the number of vertical scales, i.e. the row headers.
columnHeaderCount	number	0	This specifies the number of horizontal scales, i.e. the column headers.
tablePositionX	number	0	The x-position of the table, relative to the containing element.
tablePositionY	number	0	The y-position of the table, relative to the containing element.
tableHeight	number	none	The height of the table.
tableWidth	number	none	The width of the table.

Methods

Method	Return Type	Description
`draw(data, options)`	none	Draws the table.

Events

No triggered events.

Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server.