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
- 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
- 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 documentation
and layout and HTML reference for UI Designer.
- Original Code & Design: no dependancy or copy/paste from other libraries.
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).
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.
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.
It is a DataClient that is represtated by an HTML Table element,
and uses under the hood a DataTable for all data manipulation.
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.
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.
Main advantages compare to competition (YUI, Ext, Dojo...):
- Simpler for designer/developer: not a single line of code required!
- 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 ;-)).
One Demos with Graphic Card Benchmark from Tom's Hardware
Includes Columns Grouping & Filtering.
How to create Charts from a Grid
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 firstname.lastname@example.org.
© 2004-2014 Vincent Guilbaud. All rights reserved.