Skip to main content

Data Grid

JavaScript Chart Types

  1. Home
  2. JavaScript Chart Types
  3. Data Grid

Data Grid

Back To Categories

JSCharting supports JavaScript data grids that can consume JSON from any data source populated by chart data without the need for CSS or HTML. Chart data sets and remote data are seamlessly rendered with the built in grid component data-binding to the chart grid column with configurable column headers. Grid rows can also include SVG icons as well as micro charts and sparklines. The grid is fully client side, so no server side components are required. Load CSV, database or other data by AJAX and add your own custom styling easily. Large data sets handled automatically with pagination / paging displaying large data sets by loading on demand when scrolling. Work with any JavaScript frameworks including angular, vue, react, along with pure javascript and HTML5 explore the javascript grid library more through the open source samples included below.

Checkbox Comparison Grid
Legend checkboxes to compare iPhone models in a data grid.
Win Loss Datagrid
Points created for specific map features.
Chart Grid Switch
Chart with alternative data grid view and grid export to CSV.
Data Grid Deep
Stand-alone data grid with nested JSON values.
Grid CSV Large
Stand-alone JS data grid with 15k data rows and multiple CSV headers.
Grid Custom Columns
Populate two grids from an existing chart with custom column definitions.
Grid Custom Icons
Demonstrate using SVG images in data grids.
Grid Dynamic
Datagrid and chart combination displaying step data.
Grid From JSON
Stand-alone JS data grid from CSV.
Grid Live
Simulated live data updates of data grid.
Grid Summary Row
A summary row defined for a data grid connected to a chart.
World Holidays
Federal holidays of several countries highlighted using calendar patterns.

See also Data Grid Tutorial