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
<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>
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'));
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. |
Method | Return Type | Description |
---|---|---|
draw(data, options) |
none | Draws the table. |
No triggered events.
All code and data are processed and rendered in the browser. No data is sent to any server.