DataView documentation



A DataView offers a filtered and/or formatted view on a DataSet. One can subscribe on changes in a DataView, and easily get filtered or formatted data without having to specify filters and field types all the time.


The following example shows how to use a DataView.

// create a DataSet
var data = new vis.DataSet();
  {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
  {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
  {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
  {id: 4, text: 'item 4'}

// create a DataView
// the view will only contain items having a property group with value 1,
// and will only output fields id, text, and date.
var view = new vis.DataView(data, {
  filter: function (item) {
    return ( == 1);
  fields: ['id', 'text', 'date']

// subscribe to any change in the DataView
view.on('*', function (event, properties, senderId) {
  console.log('event', event, properties);

// update an item in the data set
data.update({id: 2, group: 1});

// get all ids in the view
var ids = view.getIds();
console.log('ids', ids); // will output [1, 2]

// get all items in the view
var items = view.get();


A DataView can be constructed as:

var data = new vis.DataView(dataset, options)


Getting Data

Data of the DataView can be retrieved using the method get.

var items = view.get();

Data of a DataView can be filtered and formatted again, in exactly the same way as in a DataSet. See sections Data Filtering and Data Formatting for more information.

var items = view.get({
  fields: ['id', 'score'],
  filter: function (item) {
    return (item.score > 50);


One can subscribe on changes in the DataView. Subscription works exactly the same as for DataSets. See the documentation on subscriptions in a DataSet for more information.

// create a DataSet and a view on the data set
var data = new vis.DataSet();
var view = new vis.DataView({
  filter: function (item) {
    return ( == 2);

// subscribe to any change in the DataView
view.on('*', function (event, properties, senderId) {
  console.log('event:', event, 'properties:', properties, 'senderId:', senderId);

// add, update, and remove data in the DataSet...

Data Policy

All code and data is processed and rendered in the browser. No data is sent to any server.