Using DataViewsJS in PureJS

Installation

DataViewsJS is hosted on npm with separate packages for each module.

Note: You need to have NodeJS installed on your computer to use the npm packages.

The latest DataViewsJS release version can be installed from npm by executing the following command from the NodeJS command prompt:

npm install @grapecity/dataviews.all

This will install all of the pure JavaScript modules. If you want to install support for other frameworks or to install specific control modules, see: referencing npm.

Adding DataViewsJS to your Application

Add a host element to your application and give it an ID. This is the HTML element that will be a container for the DataViewsJS control.

<div id="host-container"></div>

DataViewsJS package contains JavaScript modules in UMD format. You can use them along with tools that are capable of loading modules, like the Webpack bundler or SystemJS run-time module loader.

To import DataViewsJS modules into your application backed by TypeScript or Babel, you can use ES2015 import statements. All module names in import statements begin with the "@grapecity/" prefix, followed by the module name. For example, the following code imports the "dataviews.core" module and creates an instance of the DataViewsJS control:

import DataView from '@grapecity/dataviews.core';
import { GridLayout } from '@grapecity/dataviews.grid';

const data = []; // your data set
const dataView = new DataView('#host-container', data, new GridLayout());

If you write code in ES5 then the CommonJS require() function can be used to import modules. For example:

var DataView = require('@grapecity/dataviews.core');
require('@grapecity/dataviews.grid');
var grid = new DataView('#host-container');