Visualization: A Magic Table

  1. Overview
  2. Example
  3. Loading
  4. Data Format
  5. Configuration Options
  6. Methods
  7. Events
  8. 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. Instead, it is intended that the library is used in applications that have, wisely, embedded a non-IE browser engine such as Gecko or Presto.

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

By: Greg Ross

Download

Download the library from the project home page.

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.columnWidths = [{column : 0, width : 130}];
      options.defaultColumnWidth = 60;
      options.rowHeaderCount = 0;
      options.columnHeaderCount = 0;
      options.tablePositionX = 0;
      options.tablePositionY = 0;
      options.tableHeight = 403;
      options.tableWidth = 315;
      options.colourRamp = getColourRamp();

      vis.draw(data, options);
  }
  
  function getColourRamp()
  {
      var colour1 = {red:0, green:0, blue:255};
      var colour2 = {red:0, green:255, blue:255};
      var colour3 = {red:0, green:255, blue:0};
      var colour4 = {red:255, green:255, blue:0};
      var colour5 = {red:255, green:0, blue:0};
      return [colour1, colour2, colour3, colour4, colour5];
  }
	
  </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.
  1. Any number of rows and columns.
  2. 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.
colourRamp Colour array none Provides colours that will be applied across the range of values in 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.


Valid HTML 4.01 Strict