JavaScript Grids

ZingChart has a basic grid type built in to display your chart data as a table. For more interactive tables and grids with data visualization features, check out ZingGrid!

ZingGrid is a JavaScript library for rendering grids and data tables. ZingGrid's main focus is on fast, responsive, and customizable grids utilizing ES6 and native web components. The goal is to solve the problem of creating a CRUD grid in under five minutes. With an appropriate REST endpoint, this is easily achievable. Download ZingGrid for free here.

Grid Chart Type

Add a type attribute to your chart object and set the value to grid.

{
  type: "grid"
}

Data

Grid charts support a series array of objects.

String/Number Array

Create a series object array. Each object corresponds to a row in the grid. Within each object, create a values array of numbers and/or strings to populate each cell of a row.

{
  type: "grid",
  series: [ // Array of objects
    {
      values: [ // Array of numbers | strings
        (Row 1-Col 1),
        (Row 1-Col 2),
        ...,
        (Row 1-Col N)
      ]
    },
    {
      values: [
        (Row 2-Col 1),
        (Row 2-Col 2),
        ...,
        (Row 2-Col N)
      ]
    },
    ...,
    {
      values: [
        (Row N-Col 1),
        (Row N-Col 2),
        ...,
        (Row N-Col N)
      ]
    }
  ]
}

Grid-Specific Properties

JavaScript grids include a number of unique chart-specific properties that allow you to manipulate the appearance and behaviors of your HTML5 grid. They can be implemented into your chart by placing them within an options object.

Header Column

The header-col attribute sets whether the grid has a header column or not. It can be added by setting the header-col attribute to true, or by creating an empty header-col object.

{
  options: {
    'header-col': true
  }
}

Header Row

The header-row attribute sets whether the grid has a header row or not. It can be added by setting the header-row attribute to true, or by creating an empty header-row object.

{
  options: {
    'header-row': true
  }
}

Column Labels

The col-labels attribute defines the labels of the grid columns.

{
  options: {
    'col-labels': [ "ID", "FIRST id", "LAST id", "BIRTHDAY", "SEX", "COUNTRY" ],
  }
}

Column Widths

The col-widths attribute defines the widths of the grid columns, specified either in fixed values or as a percentage.

{
  options: {
    'col-widths': [ "5%", "25%", "25%", "15%", "5%", "25%" ],
  }
}

Flat

The flat attribute sets whether the grid cells are clickable or not. Enter a boolean value.

{
  options: {
    flat: true
  }
}

Using Data Sources

Graph

The graph attribute sets the ID of the chart that the grid is being linked with.

{
  options: {
    'data-source': {
      graph: "..."
    }
  }
}

Scale

The scale attribute sets the ID of the scale from which the column labels are being imported.

{
  options: {
    'data-source': {
      scale: "..."
    }
  }
}

Further Customization

Once you have your basic grid, you can customize and style it to fit your data visualization needs.

Styling Attributes

The following attributes can be used to style grid charts: