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';