Check my My portfoloio
25 years of writing &
designing Software.
ViniGrid: Free JavaScript Grid & SVG Chart
Rich UI components with simple HTML attributes
List of Features

This DHTML framework is composed of three main independants components
  • Grid (60% of the code)
  • Chart (35% of the code)
  • Drag & Drop and frame managers (5% of the code)

Full Client Side
All features are entirely processed in the browser.
The only requests to the server are made to get static files (HTML, XML, Images, JavaScript, CSS and SVG).
Saving a Chart or a Layout is also processed locally: using either cookies or DOM storage.
Here are some advantages of this solution:
  • Interactivity :
    Many effects are only possible on the client: drag & drop, mouse over, window resize ...
  • Performance :
    Because it avoids:
    • Network delay to process http requests and responses.
    • Server delay to handle the requests, create the appropriate objects, execute all the presentation and business layers, plus sometimes costly database SQL queries - caching the result in memory can improve this latest bottleneck but then it consumes resources and decrease scalability.
    • Entire unload and reload of the page in the browser.
    The server can also process requests faster if they are less numerous.
  • Infinite Scalability :
    4 billion people can Sort/Group/Create Charts.. at the same time and the CPU on the server is 0%.
    (Static pages are often cached by the browser)
  • Technology Independance :
    100% compatible with any past, current and future server technologies: .NET, JSP, Perl, Python, C++ ...
    It is built around HTML, CSS, JavaScript which are THE standard technologies for the browser,
    and SVG which is the only open source specification for vectorial graphic on Internet.
    SVG XML Spec from the World Wide Web Consortium (W3C)
  • Available Disconnected :
    Save this framework to your desktop and you can work disconnected with the last data you have downloaded.
Development Simplicity & Flexibility
  • There is virtually no need to write a single line of code to get all these features
  • All features can be Enable/Disable and customized through direct html attributes
  • Events are fired before and after the execution of each function.
    The default process can be dynamically stopped in each before event.
    For example, you can catch the event 'onbeforesort' to let the client side sort continues if all the records are in the grid, or to stop the process and do a round trip if some records are missing.
Grid Class Diagram
  • Layout
    • Automatic Resizing of the Grid according to its window
    • Max width and max height properties
    • Frozen Header and Footer rows
    • Frozen First Columns which can be changed dynamically
    • HTML is (almost) kept the same, allowing developers to work with a normal HTML table or to reuse the component wherever they have an HTML table.
  • Columns
    • Move Columns by Drag & Drop
    • Resize Columns by moving their borders including hiding and showing them back
    • Reset column order and size as they were when the page loaded
    • Dynamically enable/disable the UI to Move & Resize columns
    • (Double click on column border to resize it with optimal width: not implemented anymore)
  • Sort
    • Sort the Grid by clicking on its header
    • The Grid can be sorted simultaneously on three different columns:
      1 - Simple Click
      2 - Simple Click with Ctrl pushed
      3 - Simple Click with Ctrl and Alt pushed
    • Click again on a sort column to invert the Sort (ASC/DESC)
    • (Server side sort available by handling onbeforesort event)
    • 3 types of data are available: number, string and date.
      If no datatype has been defined for a column, the grid will estimate itself the best one
    • Sort is compatible with all features (Stripe, Group By, Filter, Select...)
  • Group By
    • Add or remove Group By on any column
    • Group By rows can have a single column that expands the entire row or one cell by column
    • Collapse & Expand each Summary by simple click on image '+' and '-'
    • Tooltip on images '+' and '-' gives the number of rows below each summary
    • Expand or Collapse all Summary at once
    • Available calcul for each column: SUM, 3 types of AVG, MAX, MIN...
    • The three possible sorts are maintained for all summaries and all child rows below each one
    • Text of the grouped Column is removed for each child row and put back when the grouping is removed
    • The format of the column is kept (hyperlink ...) in the new summary row
    • Alternate styles are applied to summary rows (see stripe feature)
  • Filter & Subtotal
    • Two filters exist: One to keep the first 'n' main rows, one to keep the first 'n' child rows in case a Group By exist
    • If some rows are hidden, a subtotal row is displayed to give the result for the first visible rows.
    • Possibility to display a new row at the bottom which is a subtotal of the 'n' first rows
    • If a Group By exists, this subtotal row can exist for the Summary row and for each group of child rows below a summary
    • Style of this partial total Row can be specified
  • Select
    • Selection can be defined for either Row, Column or a Cell
    • Select style can be defined differently for each part of the Grid
      (Header, Frozen columns, Scroll Columns, Footer ...)
    • Keyboard Navigation can be used to change the selection:
      - Arrow left, right, down, up, home, End, PageUp, PageDown
      - Hit a character on the keyboard change the selection to the first row or cell that starts with it
  • Hover
    • Hover effect can be defined either on Row, Column or Cell
    • Hover style can be defined differently for each part of the Grid
      (Header, Frozen columns, Scroll Columns, Footer ...)
    • Possibility to define a specific style for cells getting at the same time Hover & Select effects
  • Stripe
    • Stripe style can be defined differently for the frozen columns and the scroll ones
    • Stripe style can also be defined for Group By Summary rows
  • Row Modulo
    • Rows concerning the same element can be grouped together.
      For example, a table with countries as rows and year as columns can split each country to three rows Population/GDP/Unemployment.
    • Compatibility with all features (Sort, Group By, Filter, Stripe, Chart, Calculation ...)
    • Possibility to Show or Hide all rows of a specific type (all Population and Unemployment rows for example)
  • Calcul & Miscellaneous
    • CSV Export
    • Change Values to Percent of the Row
    • Change Values to Percent of the Column
    • Change Values to Percent of the Grand Total
    • Inititialize a Row as the difference between 2 other rows
    • Inititialize a Row as a percent difference between 2 other rows
Grid & Chart
  • SVG client Side Chart directly takes its values from the Grid: nothing is processed on the server
  • Each chart is created in its own frame/window
  • This window can be then easily removed through the button close on the right end of the toolbar
  • Any chart can be easily resized by moving the border of its window. The great advantage of vectorial graphic and SVG is their scaling feature.
  • Pressing 'CTRL' while droping a chart will create the chart in a popup window
  • Choose easily the placement of your chart, Top/Right/Bottom/Left by draging it around any client window.
  • Easily make any page a client for the drag & drop chart.
    You just need to include one JavaScript file (DragDropClient.js) and make one function call (initDragAndDropClient();)
  • Sync your chart with the Grid so that any change in the Grid redraw the Chart, or don't sync it to keep exactly what you have
  • All charts will be notified if the Grid is removed.
    if another Grid comes back in the same window, all charts will sync again with it.
  • If you Chart the selection (row or column), the chart will follow it
  • Save & Load:
    The entire frameset and layout, including the content of each Grid and Chart can be saved and reloaded either in the browser (cookies) or on the server.
  • Allow Server or Client Side Chart
  • Four types of Chart available: Horizontal Bars, Vertical Bars, Pies, Lines
  • For Vertical Bars and Lines, the bottom captions draw accordingly to the width available:
    Flat Horizontal / Alternate Horizontal / Oblique with dynamic angle / Hidden
  • For Horizontal Bars, the left captions show or hide accordingly to the width available
  • To add a new Serie to an existing chart, just drop it without placing it on top, right, bottom or left
  • The other way to add a serie is to select a value in the drop down on the chart toolbar and click 'Add'.
  • If a chart contains at least 2 series of values, a legend box is displayed and a delete button in front of each serie allows its removal
  • The Legend is moveable by Drag & Drop. If it is not moved completely on the right, it floats over the chart, giving it more space.
  • If a 'Group By' exists on the Grid,
    • The bars chart on the columns display the summary values and each rectangle shows inside the list of values that make the total.
    • The bars chart on the the summary rows display inside the list of values that make the total.
    • 2 buttons allow to stack these child bars vertically or horizontally inside each summary
    • The opacity of these child bars inside the summary bars can be moved from 0% (hidden) to 100%.
  • Mouse Over effect gives caption and value on all charts except Line. Both bar charts also display an horizontal or vertical line at the top of their rectangle.
  • Four level of zoom are available corresponding to the four layouts of the bottom captions:
    • No Zoom (default): the chart is entirely displayed in its window.
    • Zoom 1: bottom captions are displayed with a 45 angle.
    • Zoom 2: bottom captions are displayed horizontally and alternatively
    • Zoom 3: bottom captions are displayed horizontally and flat
  • If a Drill Down or any other function exists in the Grid, it is translated to the same function in the Chart.
  • Data Mode:
    Each serie has a 'data mode' which is used to differentiate each type of data. For example, you can have 'Dollars', 'number of people', 'number of days' ...
    All series can be drawn in the same chart, but only series with the same 'data mode' will share the same grid scale.
  • Print will print the current chart without the toolbar
  • Save will generate an http post with all the properties of the chart and can be handled by any server side technlogy
  • Chart toolbar can be hidden and put back

2004-2011 Vincent Guilbaud. All rights reserved.