Getting Started with DataViewsJS

August 26 2019

GrapeCity is pleased to announce DataViewsJS, the newest product in our JavaScript product line. DataViewsJS is the ultimate JavaScript data presentation control. Previously under the name Spread.Views, DataViews is a complete overhaul with new features. Whether you are new to DataViews or have used the previous Spread.Views, this article will show you how to get started with DataViewsJS, adding it into your own application.

Read the full release

DataViewsJS - Basic Grid

One of the basic implementations of DataViewsJS is as a simple grid. To add the DataView component to a page in your application, you will need the four required components:

gc.dataviews.core.css - This is the base style sheet which configures the basic formatting for the DataView component.
gc.dataviews.common.js - This is the base JavaScript library which loads the basic functionality that is shared with SpreadJS.
gc.dataviews.core.js - This is the JavaScript library that contains the core functionality of the DataVIew component.
Layout Engine - This can differ depending on which layout you choose to use for the DataViews component. In this instance, we will use gc.dataviews.grid.js, which is the typical grid view.

These can be referenced like so:

<link rel="stylesheet" type="text/css" href="/static/dataviews/gc.dataviews.core.css">
<link rel="stylesheet" type="text/css" href="/static/dataviews/gc.dataviews.grid.css">

<script src="/static/dataviews/gc.dataviews.common.js" type="text/javascript"></script>
<script src="/static/dataviews/gc.dataviews.core.js" type="text/javascript"></script>
<script src="/static/dataviews/gc.dataviews.grid.js" type="text/javascript"></script>

Once referenced a simple DIV element can be added:

<div id="grid" class="grid"></div>

And then finally a line of code to initialize it:

new GC.DataViews.DataView('#grid', data, new GC.DataViews.GridLayout());

In addition to the grid layout, DataViews also has a few other layouts:

Horizontal Layout

In this layout, columns are arranged horizontally to present the data like a product catalog:

var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, columns, new GC.DataViews.HorizontalLayout({}));

Masonry Layout

This layout includes the masonry and metro layouts, which are essentially similar to the way in which Pinterest is laid out, which elements placed in optimal positions based on vertical space.

var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, columns, new GC.DataViews.MasonryLayout({gutter: 12, rowTemplate: '#rowTemplate'}));

Card Layout

Cards are the main element of this layout, which are essentially defined blocks that are laid out in rows. These cards can usually be used in a typical grid or in something more complex like a tree column for hierarchical data.

var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, columns, new GC.DataViews.CardLayout({cardHeight: 250, cardWidth: 290, rowTemplate: '#filmDisplay', direction: 'horizontal'}));

These layouts can then be customized with different grouping strategies that provide a way to arrange the data:

Trellis: The Trellis Grouping Strategy allows users to group cards and change those groups by dragging and dropping cards between them. This can be used to make something similar to the Kanban board in Trello™.
Calendar: The Calendar Grouping Strategy can be used to make a simple calendar or more advanced implementations like sales reports or weather forecasts.
Timeline: With this layout, data can be displayed in a timeline, for things like meeting plans or conventions schedules.

Calculation Engine

In addition to the different layouts, DataViewsJS has a calculation engine that be used within and without DataViewsJS, allowing you to utilize the powerful calculation on JSON data not necessarily inside of DataViewsJS. This calculation engine give you the ability to create implementations with calculated columns, fields, and column aggregators.

var formula = '=SUMX(FILTER([Country]="United States" && [State]="NY"), [Quantity] * [Price])';
var result = dataView.data.evaluate(formula);
daxSheet.setValue(args.row, 1, result);

Framework Support

While DataViews can be used in pure JavaScript, it has support for other frameworks, including React, Vue, and Angular.