Spreadsheet functions are case sensitive. They must be either lower or upper: (ABS(), abs(); AVERAGE(), average();) |  |  |  |  |  |
Excel Function | Arguments | Example | Result | Additional Information | Sample # | Sample Text
CHART | *Values *Legend *Axis Labels *Height as integer *Width as integer (For more info see the link "Charts" in the sheet title) | "=CHART.BAR(F3:F13)" |  | (For more info see the link "Charts" in the sheet title) |  |
ABS | Perfect | "=ABS(F4)" | 23 |  | 23 | Hello World
AVERAGE | number | "=AVERAGE(F4:F14)" | 144.45454545454547 | Synonym: AVG | 45 | True
CEILING | Perfect | "=CEILING(F4:F14)" | 2.345621082003618e+23 |  | 62 | False
COUNT | numbers_as_array | "=COUNT(F2:F14)" | 12 |  | 108 | To High
DAYSFROM | values_as_array | "=DAYSFROM(2009,4,15)" | 125 |  | 200 | To Low
DOLLAR | Perfect | "=DOLLAR(F13)" | $999.00 |  | 36 | Perfect
FALSE |  | "=IF(F4 < 100, TRUE(), FALSE())" | true |  | 17 | number
FIXED | number, decimals, noCommas? | "=FIXED(F4+F14)" | -77.00 | Two decimal places | 99 | numbers_as_array
FLOOR | Perfect | "=FLOOR(F4-F5)" | -22 | Synonym: INT | 100 | values_as_array
HTML | date | "=HTML(' <div style="color: red;">Hello World!!!</div>')" | Hello World!!! | The value sent to the HTML function must start and end with double quotes (""). All element values must have single quotes (''). | 999 | date
HYPERLINK | html_as_string | "=HYPERLINK("http://www.jquery.com", "jQuery's website")" | jQuery's website |  | -100 | html_as_string
IF | IF(logical_test, value_if_true, value_if_false) | "=IF(F12 < 100, TRUE(), FALSE())" |  | Can have nested IF functions. | -14 | url_as_string
IMG | html_as_string | "=IMG("http://ui.jquery.com/images/logo.gif")" |  | The url can be sensitive to numbers. Also, on initial load, because the image doesn't really have a size, the outerheight can be distorted. An easy way to offset this is to have some text in front of it that's taller than the image :). |  | values
MAX | number | "=MAX(F3:F13)" | 999 |  | -21 |
MIN | number | "=MIN(F3:F13)" |  |  |  |
N | Perfect | "=N(F3)" |  |  |  |
PI |  | "=PI()" | 3.141592653589793 | If you use "=PI" it will return the actual function as text, which is incorrect. Use "=PI()". |  |
TODAY |  | "=TODAY()" | Tue Aug 18 2009 16:38:19 GMT-0400 (Eastern Daylight Time) |  |  |
TRUE |  | "=TRUE() || FALSE()" | true |  |  |
SUM | number | "=SUM(F2:F13)" | 1689 |  |  |
ROUND | Perfect | "=ROUND(1.6)" | 2 |  |  |
RAND |  | "=RAND()" | 0.37520818775224773 | Synonym: RND |  |
LIST | numbers_as_array | "=LIST(b3:b10)" |  | I really didn't want to much lag on this, so to get the values to update, just click the refresh button in the top left of the cell bars. |  |
LISTVAL | url_as_string | "=INPUTVAL(D26)" | values_as_array |  |  |
Advanced Functionality |  | Example | Result | Additional Information |  |
Direct Javascript |  | "=jQuery.sheet.version" | 0.53 | The character '=' simply starts a reference to javascript. The example here interacts with the jS (or jQuery.sheet) object and calls a function that returns it's current version. |  |
Math.PI |  | "=Math.PI" | 3.141592653589793 | The Math function here is actually the javascript Math function. So in a since, you are writing javascript from the sheet. |  |

jQuery.sheet() Settings | Description | Default | Example
urlGet | The url of the table that is loaded into jQuery.sheet() | documentation.html table:first | $(obj).sheet({ urlGet: "mySheet.html" });
urlSave | The url for the sheet info to be saved at. | save.html |
editable | Makes the sheet editable. Boolean value. | true |
urlBaseCss | Location of the base css file used to configure the sheet. | jquery.sheet.css |
urlTheme | jQuery UI Themeroller css theme location used to style the sheet. | theme/jquery-ui-1.7.2.custom.css |
urlMenu | Loads the menu bar found at the top that uses jQuery.clickMenu(). If left blank, will not load menu. | menu.html |
urlMenuJs | Location of the jQuery.clickMenu plugin for use with the menu control. | plugins/mbMenu.min.js |
urlMenuCss | Location of the jQuery.clickMenu's style file. | plugins/menu.css |
urlScrollTo | Loads the plugin jQuery.scrollTo. Makes editing the sheet an absolute pleasure :). | plugins/jquery.scrollTo-min.js |
loading | The loading html message when jQuery.sheet() first starts. | Loading Spreadsheet... |
newColumnWidth | Sets the width of newly added columns. | 120 |
ajaxSaveType | Sets the type of forums/ajax submit type. | POST |
buildSheet | Lets you create a new sheet. Example: '10x30' (Column count by Row count). If you use this option it cancels out urlGet. Must be separated by an "x" ("10x30") or be set to boolean false. Note: Large sheets will take some time to load. | false | $(obj).sheet({ buildSheet: "10x30" });
calcOff | Enables or disables the sheet calculations; on loadup only. Boolean value. This usually isn't needed because the values are saved when the sheet is saved. | false |
log | Enables or disables sheet log, used for debugging. Boolean value. | false |
title | Overrides the sheet's sheettitle attribute. | "" |
lockFormulas | Turns function edit off. This protects your spreadsheet's supplied functions. Note: If you create a function, after the first edit, it will no longer be editable. | false |
parent | The sheet's parent, needed for internal usage, doesn't need to change. | this |
colMargin | The width and height of standard toolbars. | 18 |
fnBefore | Function ran just before the sheet is initialized. | function () { } |
fnAfter | Function ran after the sheet is initialized and styled. | function () { jS.obj.formula().focus().select(); } |
fnSave | Function used for saving the spreadsheet, default is jS.saveSheet(). | function () { jS.saveSheet(); } |
fnOpen | Function used to open a spreadsheet. | function () { } |
fnClose | Function used to close the current spreadsheet. | function () { } |
Regular Initialization | Initialization with Options |  |
$(document).ready(function() { $(selector).sheet(); }); | $(document).ready(function() { $(selector).sheet({ urlGet: "documentation.html table:first", urlSave: "save.html", title: '', editable: true, urlBaseCss: 'jquery.sheet.css', urlTheme: "theme/jquery-ui-1.7.2.custom.css", urlMenu: "menu.html", urlMenuJs: "plugins/mbMenu.min.js", urlMenuCss: "plugins/menu.css", urlMetaData: "plugins/jquery.metadata.js", urlScrollTo: "plugins/jquery.scrollTo-min.js", urlScrollsync: 'plugins/scrollsync.js', urlJGCharts: 'plugins/jgcharts.pack.js', loading: 'Loading Spreadsheet...', newColumnWidth: 120, ajaxSaveType: 'POST', buildSheet: false,//'10x30', this can be slow calcOff: false, log: false, lockFormulas: false, parent: this, colMargin: 18, //If text size make cell bigger than this number the bars will be off on loadtime fnBefore: function() {}, fnAfter: function() { jS.obj.formula().focus().select(); }, fnSave: function() { jS.saveSheet(); }, fnOpen: function() {}, fnClose: function() {}, joinedResizing: false //this joins the column/row with the resize bar }); }); |  |
jQuery.sheet Dependencies | Plugin File Name | Size (kb) | Compressed
jQuery | jquery-1.3.2.min.js | 56 | yes
jQuery.sheet | jquery.sheet.min.js | 42 | yes
jQuery.sheet Style Sheet | jquery.sheet.css | 5 | no
jQuery UI - ThemeRoller style | Make your theme using jQuery UI Themeroller. This is a pack of files. | 61.9 | yes
(MB)Menu (optional plugin) | plugins/mbMenu.min.js | 14 | yes
(MB)Menu Style Sheet (optional plugin) | plugins/menu.css | 4 | yes
jQuery.metaData (A dependency of (MB)Menu) | plugins/jquery.metadata.js | 4 | yes
Menu Html | menu.html | 8 | yes
jQuery.scrollTo (optional plugin) | plugins/jquery.scrollTo-min.js | 3 | yes
jQCharts - jQuery Google Charts Plugin (optional plugin) | plugins/jgcharts.pack.js | 6 | yes
scrollsync (optional plugin) | plugins/scrollsync.js | 3 | yes
| Total App Size: | 207KB | <--Note:this field is dynamic :)
The below area is mainly for those that would like to really build around the sheet. I tried to be as detailed as possible. I will try to keep this as updates as possible. |  |  |
jQuery.sheet Object/Function | Description |  |
jQuery.sheet / jS | Object that holds all the functions used for jQuery.sheet (A jQuery extension, different from jQuery.fn.sheet(), a jQuery extension). |  |
jQuery.calculationsEngine / cE | Object that holds the functions used to calculate the table as a spreadsheet. |  |
EMPTY_VALUE | Empty object - {} |  |
cellIsEdit | Is true on the first keydown for a cell edit. Makes cell navigation very speedy! |  |
cl | Class list shorthand |  |
getResizeControl | returns the resize function needed for a Id bar resizer. |  |
id | Id list shorthand |  |
obj | Object list shorthand |  |
s | jQuery.sheet.settings shorthand |  |
themeRoller | Themeroller object. Used for styling. |  |
toggleHide | Not yet used, too buggy. Used for hiding and showing sheets. |  |
version | Returns jQuery.sheet's current verison. |  |
ERROR | The value returned when a cell fails a function. |  |
HTMLtoCompactSource | Parses the sheet's HTML to compact source. Somewhat buggy, was included from trimpath. You should use jS.obj.pane().html() if you want the sheet as html. |  |
HTMLtoPrettySource | Parses the sheet's HTML to pretty source. Somewhat buddy, see above... |  |
addColumn | Adds a single column. Accepts atColumn (int) & insertBefore (bool) |  |
addColumnMulti | Calls jQuery.sheet.addColumn a specified number of times. |  |
addRow | Adds a single row. Accepts atRow (int) & insertBefore (bool) |  |
addRowMulti | Calls jQuery.sheet.addRow a specified number of times. |  |
barAdjustor | Runs in memory to re-adjust the position of the cell Id bars. Still in code but will only run if plugin scrollsync isn't used. |  |
barResizer | Object that holds the functions for bar resizing. |  |
buildSheet | Returns a jQuery object of a table. Accepts size (string) example: "10x100" - or 10 columns by 100 rows. |  |
calc | Function for compiling against the jQuery.calculationsEngine. |  |
cellClickFn | Decides which cellClick Function to use depending on jQuery.sheet.settings.lockFormulas - between jQuery.sheet.cellOnClickLocked() or jQuery.sheet.cellOnClickReg() |  |
cellClick | Enforces a cell click on a specified cell. Accepts keyCode (int). This is really for inplace arrow navigation and to make editing easier when a user presses enter. Fires on keydown. |  |
cellEdit | Causes a cell to enter into an edit mode. accepts td (jQuery 'td' object) |  |
cellEditAbandon | Takes the focus away from cells, escapes the edit process. Sets the current cell to A1. |  |
cellEditDone | Occurs when cell focus is lost. Decides if the sheet should recompile. Accepts bsheetClearActive (bool). |  |
cellOnClickReg /cellOnClickLocked | Step 1 of the cell click function. Accepts evt (jQuery click event). |  |
cellOnClickManage | Step 2 of the cell click function. On first click, sets the cell to editable. On second click it grabs the html in the cell or formula and throws it into a textarea and the textarea within the cell. Accepts td (jQuery 'td' Object). |  |
cellOnMouseDown | Makes multi selectable cells possible. When occurs, sets cellSetActiveMulti to run through it's mousemove and mouseup on document. Accepts evt (jQuery mousedown event). |  |
cellSetActive | Sets the cell Id bars and cell visually active. Accepts td (jQuery 'td' object), loc (Array [row, col]). |  |
cellSetActiveMulti | Works in accord with cellOnMouseDown. For use with styling the cells. Accepts evt (jQuery mousedown event). |  |
cellSetActiveMultiColumn | From a column's double click event, it selects all cells within that column. Accepts i (int) of selected column. |  |
cellSetActiveMultiRow | From a row's double click event, it selects all cells within that row. Accepts i (int) of selected row. |  |
cellStyleToggle | Manages all styles interactions. Accepts setClass (string) & removeClass (string). |  |
cellTextArea | Manages leaving, and entering a textarea. Returning the most current value. Also makes the formula disabled if textarea is active. Accepts td (jQuery 'td' Object), returnVal (bool), makeEdit (bool), setVal (var). |  |
deleteColumn | Deletes currently selected column. |  |
deleteRow | Deletes currently selected row. |  |
followMe | Used with jQuery.scrollTo plugin. Makes the pane follow the currently selected cell. |  |
formulaKeyDown | The centralized location for most keydown events. Takes advantage of select rather than if statements to make it almost seam like nothing is capturing these event. Accepts e (jQuery keydown event). |  |
getCss | Simple plugin that writes a css link for those that are needed. Interacts with any url setting of jQuery.sheet. Accepts url (string). |  |
getIndexTd | Mostly used with jQuery.calculationsEngine. |  |
getIndexTr | Mostly used with jQuery.calculationsEngine. |  |
getTd | Returns the currently selected cell from a tableBody var that's sent to it. Returns a cell very quickly. Accepts tableBody (DOM sheet object), row (int), col (int). |  |
getTdLocation | Returns an array of 2 numbers - [row, column]. Accepts td (jQuery 'td' Object). |  |
importColumn | Creates a new column, then sets their html to a value that's sent in the form of an array. Accepts columnArray (Array) of values for each cell. |  |
importRow | Creates a new row, then sets their html to a value that's sent in the form of an array. Accepts rowArray (Array) of values for each row. |  |
log | Used for debugging. Needs to have some timing values in the futures. Accepts msg (var). |  |
makeBarItemLeft | Creates the functional Id bar to the left of the spreadsheet. Accepts url (string) to detect how the sheet was imported. |  |
makeBarItemTop | Creates the functional Id bar to the top of the spreadsheet. Accepts url (string) to detect how the sheet was imported. |  |
makeControls | If a cell is editable, it create the formula textarea, FX, Menu, sheetTitle. Accepts parent (jQuery Object). |  |
manageHtmlToText | Converts different characters for use with formula textarea/in cell edit textarea. |  |
manageTextToHtml | Converts from different values from the formula textarea/in cell edit textarea to HTML. |  |
newSheet | This prompts the user for a value of sheet size. |  |
openSheet | Centralized location for all sheet traffic. |  |
refreshLabelsColumns | Resets all column labels. Used when adding new columns, deleting columns. |  |
refreshLabelsRows | Resets all row labels. Used when adding new rows, deleting rows. |  |
saveSheet | Standard function used for saving sheets. Called from jQuery.sheet.settings.fnSave(). If you have a different way that you'd like to save sheets, use the fnSave setting. |  |
sheetClearActive | Used to clear the themeRoller classes from the cell Id bars and to set the formula textare to ''. |  |
sheetDecorate | Set's the sheet up & syncronizing sheet size in accord with that of it's parent. |  |
sheetDecorateRemove | Returns a sheet back to normal html. |  |
sheetSyncSizeToCols / sheetSyncSizeToDivs | Syncs the actual sheet size from it's columns or from the resizing bars (div's). |  |
sheetTitle | Gets/Sets the sheet's title if it's enabled. |  |
tableCell | A prototype object for interacting with jQuery.calculationsEngine. |  |
tableCellProvider | A prototype object for interacting with jQuery.calculationsEngine. |  |
viewSource | A nice way of viewing source. Can be compact or pretty. |  |

If you are not a programmer, just using jQuery.sheet for it's spreadsheet purposes, just ignore the "Dependency" column. |  |
Cell Navigation | Result | Dependancy
Left Arrow | Active cell moves left if possible. | jQuery.sheet.cellClick()
Right Arrow | Active cell moves right if possible. | jQuery.sheet.cellClick()
Up Arrow | Active cell moves up if possible. | jQuery.sheet.cellClick()
Down Arrow | Active cell moves down if possible. | jQuery.sheet.cellClick()
Escape | Active cell is removed from focus. | jQuery.sheet.cellEditAbandon()
Enter | Starts in-place edit / Active cell moves down if possible. | jQuery.sheet.formulaKeyDown() private function enter()
Ctrl + Enter | Ends in-place edit / Active cell moves down if possible. |
Tab | Active cell moves right if possible. | jQuery.sheet.cellClick()
Feature | Info | Dependancy
jQuery.sheet is Re-sizable! | Click and drag on the cell Id bars, and it will resize the row. | jQuery.sheet.barResizer()
Charts | Click the "Charts" above for more info. | jGCharts plugin
Auto Scroll | When you navigate to a cell the spreadsheet pane automatically scrolls to it. | jQuery.scrollTo plugin
Multi cell select | If you drag your mouse over a range of cells, it will select them for you. You can use this to change their style. | jQuery.sheet.cellSetActiveMulti()
Multi cell select from cell Id bars | Double click on the mouse Id bars and it will select the range of cells associated with it. | jQuery.sheet.cellSetActiveMultiColumn() or jQuery.sheet.cellSetActiveMultiRow()
Add Row | Adds a row to the bottom of your spreadsheet. | jQuery.sheet.addRow()
Insert Row | Inserts a row just below the currently selected row. | jQuery.sheet.addRow()
Add Multi Row | Adds multiple rows to the end of the spreadsheet. | jQuery.sheet.addRowMulti()
Delete Row | Deletes the currently selected row. | jQuery.sheet.deleteRow()
Add Column | Adds a column to the last column of the spreadsheet. | jQuery.sheet.addColumn()
Insert Column | Insert column just after the currently selected column. | jQuery.sheet.addColumn()
Add Multi Column | Adds multiple columns to the last column in the spreadsheet. | jQuery.sheet.addColumnMulti()
Delete Column | Delete the currently selected spreadsheet. | jQuery.sheet.deleteColumn()
Style cells | Cells are styleable. | jQuery.sheet.cellStyleToggle()
Support of jQuery UI theme | You make the spreadsheet look like you want. Pick your theme here: http://ui.jquery.com/themeroller | jQuery UI Theme / jQuery.sheet.themeRoller
Sheet Title | You can change the sheet's title. | jQuery.sheet.sheetTitle()

jQuery.sheet | A jQuery Spreadsheet with Calculations | jQuery.sheet on jQuery's Website
Version | 0.4 |
Written By | Robert Plummer | My jQuery Project Website
Written Using | Notepad++ |
Compressed Using | YUI Compressor |
Compatibility | Firefox 3, IE 7, Chrome, Safari |
About Me | Professional Services |
Bugs? | Bugs Page |
Want to see a feature added? | Features Page |
Need support? | Support Page |

Chart Type | Example | Chart | Notes |  |  | Sample Data | Sample Legends |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Simple Vertical Bar Chart | "=CHART.BAR(G2:G17)" |  | Each of the char types accepts the following variables in this order: *Values - as array (ie "a1:a2") or jagged/multidimensional arrays (ie "[a1:a2, b1:b2]") *Legend - as array from string (ie "['First Legend Label', 'Second Legend Label']") or from cell values (ie "a1:a2") *Axis Labels - as array, similar to legend *Height as integer *Width as integer EXAMPLE: =CHART.BAR(a1:a2, "Sales", "2009", 100, 100) |  |  | 1 | Nov | 2000 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Simple Horizontal Bar Chart | "=CHART.BARH(G2:G17)" |  | One thing to note about dynamic images it that column sizing can get a bit messed up. |  |  | 2 | Dec | 2001 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Simple Stacked Vertical Bar Chart | "=CHART.SBAR(G2:G17)" |  |  |  |  | 3 | Jan | 2002 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Simple Stacked Horizontal Bar Chart | "=CHART.SBARH(G2:G17)" |  |  |  |  | 4 | Feb | 2003 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Simple Line Chart | "=CHART.LINE(G2:G17)" |  |  |  |  | 5 | Mar | 2004 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Simple Pie Chart | "=CHART.PIE(G2:G17)" |  |  |  |  | 7 | May | 2005 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Advanced Simple Vertical Bar Chart | "=CHART.BAR([G2:G7], ["Dec 2008 Sales" , "Jan 2009 Sales", "Feb 2009 Sales", "Mar 2009 Sales", "May 2009 Sales", "June 2009 Sales"])" |  |  |  |  | 7 | June | 2006 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Advanced Horizontal Bar Chart | "=CHART.SBARH([G2:G7, G2:G7, G2:G7, G2:G7, G2:G7], i2:i7, H2:H7, 850,250)" |  |  |  |  | 7.5 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Advanced Vertical Bar Chart | "=CHART.BARH([G2:G7, G2:G7, G2:G7, G2:G7, G2:G7], i2:i7, H2:H7, 350,500)" |  |  |  |  | 8 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Advanced Line Chart | "=CHART.LINE([[105.7,97.9],[108.1,101.6],[110.7,102.9],[111.0,93.7],[110.0,89.8],[109.0,90.7], [107.5,93.0],[106.1,94.5],[104.3,91.9],[102.0,93.9],[102.8,93.6],[103.8,92.6], [102.9,94.0],[102.1,92.7],[100.6,96.0],[101.7,97.9],[101.8,105.0], [103.3,104.1],[104.0,105.1],[103.7,108.1],[108.4,108.4],[109.4,113.8], [112.0,109.1],[112.6,106.3],[115.5,106.7],[115.7,108.8],[114.7,118.8], [115.9,120.4],[116.2,115.9],[118.0,124.7],[123.3,126.5],[127.6,131.6], [130.3,134.0],[135.5,135.7],[138.2,126.4],[139.6,127.4],[145.1,131.0], [146.4,129.9],[147.1,133.7],[149.0,138.4],[150.3,141.0],[151.3,139.3], [153.4,145.3],[152.7,142.9],[152.9,129.2],[152.2,126.0],[151.9,124.8], [150.1,125.9],[148.2,118.9],[145.3,122.9],[142.9,127.7],[142.6,134.4], [144.0,138.5],[145.5,138.7],[147.2,141.8],[150.0,139.2],[153.8,145.6], [155.4,147.6],[157.0,157.9],[158.4,156.2],[162.8,153.9],[162.8,158.6], [164.7,166.3],[168.5,165.8]], ["Dec 2008 Sales" , "Jan 2009 Sales"])" |  | A bit more complicated :) |  |  | 8.2 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
Advanced Pie Chart | "=CHART.PIE([G2:G5, g6:g8, g9:g11, g12:g15], '', ["Dec 2008 Sales" , "Jan 2009 Sales", "Feb 2009 Sales", "Mar 2009 Sales", "May 2009 Sales", "June 2009 Sales"], 400,200)" |  |  |  |  | 8.5 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
|  |  |  |  |  | 9.76 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
|  |  |  |  |  | 10 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
|  |  |  |  |  | 12 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
|  |  |  |  |  | 11 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
|  |  |  |  |  | 10 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |