Developer's Guide
Using DataViewsJS
Creating a Basic Grid
Version 1
Version 1

Creating a Basic Grid

Using DataViewsJS, you can generate grid columns automatically by retrieving the data from JSON files. Use the following steps to create a basic grid layout.

Adding a Basic Grid

  1. Add the JavaScript for the page. The following code is a general example.
<!DOCTYPE html>
<html>
  <head>
    <title>DataViews test page</title>
  </head>
</html>
  1. Add reference scripts. The gc.dataviews.common.min.js, gc.dataviews.core.min.js references provide the core features of DataViews and gc.dataviews.grid.js provides a grid layout for use.
<script src="[Your Script Path]/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="[Your Script Path]/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="[Your Script Path]/gc.dataviews.grid.min.js" type="text/javascript"></script>
  1. Add CSS files to customize the appearance. Use the gc.dataviews.core.min.css file for the default appearance.
<link rel="stylesheet" href="[Your Stylesheet Path]/gc.dataviews.core.min.css" type="text/css" />
  1. Add the product license.
<script src="[Your Script Path]/license.js" type="text/javascript"></script>
  1. Add your data set.
var countries = ['US,Germany,UK,Japan,Italy,Greece'];
var data = [];
for (var i = 0; i < 100; i++) {
  data.push({
    id: i,
    country: countries[i % countries.length],
    date: new Date(2015, i % 12, i % 28),
    amount: Math.floor(Math.random() * 10000),
    active: i % 4 === 0,
  });
}
  1. Add the initialization code for the DataViews control in a DOM (Document Object Model) element with grid1 as the ID.
var dataView = new GC.DataViews.DataView('#grid1', data, new GC.DataViews.GridLayout());
  1. Create the target DOM element for the DataViews control.
<body>
  <div id="grid1" style="height:100%"></div>
</body>

Note: The license.js file should contain the following license string. Replace the text in quotes with your actual license key string.

GC.DataViews.LicenseKey = 'your license key';