Check my My portfoloio
25 years of writing &
designing Software.
ViniGrid: Free JavaScript Grid & SVG Chart
Rich UI components with simple HTML attributes
In One Line
By setting a new HTML attribute "vg_viniGrid=1" to any HTML TABLE, ViniGrid will enhance it into a dynamic mini-spreadsheet, from where you can extract, manipulate and register charts, without having you to write a single line of code.
Why ViniGrid?
  • For the Developer
    No code required to activate any feature, while a rich & intuitive API lets you access the entire object model.
  • For the UI Designer
    Keep & reuse your HTML tables exactly as they are; elements can keep your current styles.
    Configure new Features with simple HTML attributes.
  • For the End User
    Drag & Drop any Row or Column of your HTML table to create new views like Charts.
    A ribbon lets you easily modify your chart, including adding/removing series.
Free, Compatible & Open
  • Free.
  • Compatible with any HTML table, as long as HTML attribute rowspan is not used.
  • Compatible with any A-grade browser, including IE >=6*, Firefox, Chrome, Safari, Opera.
  • Full Client Side: written entirely in JavaScript with source code available.
  • www Compliant: JavaScript, HTML, CSS, SVG and XML.
  • Full documentation that includes both Class Diagrams and Javascript API Reference for Developper and layout and HTML reference for UI Designer.
  • Original Code & Design: no dependancy or copy/paste from other libraries.
* To get Charts with IE 6-8, Adobe SVG plugin is required download and install it from Adobe Web Site
Complete & Unique set of Features
  • Frozen Header, Footer and First columns.
  • Automatically fit to frame.
  • Group, Sort, Filter on both Rows & Columns.
  • Top n Filter with creation of SubTotal rows.
  • Select one or multiple rows or columns. Change your selection with the keyboard (arrow keys...), including first letter lookup.
  • Save and Load locally or server side your entire layout, including the position, size and state of each client (ex Chart) and DataSource (ex table).
  • Dynamic auto-scaling Charts. Your chart will look good at any resolution (thanks to SVG technology).
Sleek Design
  • Top notch Performance. To include VinigGrid javascript will have virtually no impact on the loading time of your page. All algorythms are highly optimized.
  • Clean separation between the UI and Business/Data layers, with the latter having no dependency on the UI.
  • Generic Framework that binds and synchronizes any DataSource to multiple Client, and any Client to multiple DataSource.
  • Grid, Chart and Document/View are Stand-Alone Components.
  • Framework can Save and Rebuild all clients in 'one click'.
  • All features are compatible with each others.
  • Flexiblity: each new feature triggers two events, before and after, that allow you to cancel any default processing or plug in any specific behavior.

There are 5 main components:
  • A generic DataSource/DataClient or Document/View Architecture.
    It manages and synchronizes a list of Clients connected to a list of Servers.
  • DataTable:
    It is a DataSource that holds its data in a tabular way and contains all the algorythms of grouping, filtering and sorting, without any GUI representation.
  • GridView:
    It is a DataClient that is represtated by an HTML Table element, and uses under the hood a DataTable for all data manipulation.
  • DataChart:
    It is a DataSource that holds its data which must be numbers in a list of series. Among other parameters, each serie has its own unit and defined an array of values (numbers) that may contain subvalues.
  • ChartView:
    It is a DataClient that can be linked and synchronized to any number of clients SVG Charts
These Charts can be created independantly of the Grid, or from its rows and columns through an intuitive and flexible Drag & Drop.
Beneath the dynamic Grids, Charts and Frames lies a generic event based Client/Server (or Document/View) architecture, that synchronized any modification in the data model to all current views tied to it.

Grid Comparison
Main advantages compare to competition (YUI, Ext, Dojo...):
  • Simpler for designer/developer: not a single line of code required!
  • Faster: no extra loading time as your Grid is already there in HTML and javascript code is optimized.
  • Cleaner, lighter and less intrusive: you keep your HTML mostly intact
  • Compatible with many Server Side Grids like Microsoft .NET GridView and DataGrid
  • Many Unique Features: Group Columns, Top n Filter, SubTotal, AutoFit to page, Frozen header, footer & columns, Charts by Drag & Drop, Frames management including synchronization, saving and loading...
Demos & Examples
Three Demos with Statistics from the United Nations
Each one of these demos includes a control panel to interract with the Grid and most of its public API.
  • World Population from 1950 to 2002
    Around year 1995, the population of Africa passed the one in Europe. In the last 50 years, it has been multiplied by 3.75 and the one in Asia by 2.7.
    Where are we going?
  • World Population by Age
    More than 50% of the population in Japan, Germany and Italy is above 60 years old, while 10 countries in Africa have more than 47% of the population under 15 years old.
    There are 32 European countries among the 33 'oldest' countries.
  • World Population by Sex
    The 10 most crowded countries in the world represent 60% of the world population, and the top 2 (China and India) more than 37%.
    5 countries in Asia have less than 78 women for 100 men.
    4 countries in the former USSR have more than 116 women for 100 men (this is where I want to live ;-)).
  • Dashboard
One Demos with Graphic Card Benchmark from Tom's Hardware
Includes Columns Grouping & Filtering.

How to create Charts from a Grid

  • Click the chart image at the top of a column or beginning of a row from the Grid.
    It will create a red rectangle on the screen.
  • Move the mouse to place this red rectangle somewhere on the screen.
  • Click again to create a chart;
    but you won't get the same result depending on where you drop it:
    If the red rectangle is positionned on top, left (like here), right or bottom A new frame is created at this location and a new chart will fill it
    If the red rectangle doesn't stick to a side and the frame below is a chart The framework will try to add a new serie to the existing chart below (Notice that to add a serie, you can also use the dropdown in the chart toolbar)
    If the red rectangle doesn't stick to a side and the frame below is not a chart A new chart is created in a new popup window (popup blocker might prevent the window to appear...)
Notice that when a chart is displayed, the chart legend can be moved by drag & drop.

For the Dashboard page which has no Grid, drag & drop the chart image displayed in the toolbar.

You can also directly select a predefined layout that contains a bunch of charts by using the Load dropdown of the toolbar.

Written by Vincent Guilbaud.
For any info, you can send an email at

2004-2014 Vincent Guilbaud. All rights reserved.