Skip to content

Data

Data types

Vizzu currently supports two types of data series: dimensions and measures. Dimensions slice the data cube Vizzu uses, whereas measures are values within the cube.

Dimensions are categorical series that can contain strings and numbers, but both will be treated as strings. Temporal data such as dates or timestamps should also be added as dimensions. By default, Vizzu will draw the elements on the chart in the order they are provided in the data set. Thus we suggest adding temporal data in a sorted format from oldest to newest.

Measures at the moment can only be numerical.

Adding data

There are multiple ways you can add data to Vizzu:

  • Specify data by series - column after column if you think of a spreadsheet
  • Specify data by records - row after row
  • Using data cube form

Elements with a missing value should contain the number zero. null, undefined and empty cells will result in an error. In case of dimensions, add '' as a value to have a category without a name.

In the first two cases, data has to be in first normal form. Here is an example of that:

Genres Kinds Popularity
Pop Hard 114
Rock Hard 96
Jazz Hard 78
Metal Hard 52
Pop Smooth 56
Rock Smooth 36
Jazz Smooth 174
Metal Smooth 121
Pop Experimental 127
Rock Experimental 83
Jazz Experimental 94
Metal Experimental 58

In the type parameter, you can set if a series is a dimension or a measure. Adding the type parameter is optional. If omitted, Vizzu will automatically select the type depending on the first element of the values array using the typeof operator. If the value is a number, it will be declared as a measure, in any other case, a dimension.

Specify data by series:

let data = {
    series: [{
        name: 'Genres',
        type: 'dimension',
        values: [
            'Pop', 'Rock', 'Jazz', 'Metal',
            'Pop', 'Rock', 'Jazz', 'Metal',
            'Pop', 'Rock', 'Jazz', 'Metal'
        ]
    }, {
        name: 'Kinds',
        type: 'dimension',
        values: [
            'Hard', 'Hard', 'Hard', 'Hard',
            'Smooth', 'Smooth', 'Smooth', 'Smooth',
            'Experimental', 'Experimental', 'Experimental', 'Experimental'
        ]
    }, {
        name: 'Popularity',
        type: 'measure',
        values: [114, 96, 78, 52, 56, 36, 174, 121, 127, 83, 94, 58]
    }]
};

Specify data by records:

let data = {
    series: [{
        name: 'Genres',
        type: 'dimension'
    }, {
        name: 'Kinds',
        type: 'dimension'
    }, {
        name: 'Popularity',
        type: 'measure'
    }],
    records: [
        ['Pop', 'Hard', 114],
        ['Rock', 'Hard', 96],
        ['Jazz', 'Hard', 78],
        ['Metal', 'Hard', 52],
        ['Pop', 'Smooth', 56],
        ['Rock', 'Smooth', 36],
        ['Jazz', 'Smooth', 174],
        ['Metal', 'Smooth', 121],
        ['Pop', 'Experimental', 127],
        ['Rock', 'Experimental', 83],
        ['Jazz', 'Experimental', 94],
        ['Metal', 'Experimental', 58],
    ]
};

Using data cube form:

Genres
PopRockJazzMetal
Kinds Hard 114967852
Smooth 563674121
Experimental 127839458
Popularity
let data = {
    dimensions: [{
        name: 'Genres',
        values: ['Pop', 'Rock', 'Jazz', 'Metal']
    }, {
        name: 'Kinds',
        values: ['Hard', 'Smooth', 'Experimental']
    }],
    measures: [{
        name: 'Popularity',
        values: [
            [114, 96, 78, 52],
            [56, 36, 174, 121],
            [127, 83, 94, 58]
        ]
    }]
};

You should set the data in the first animate call:

chart.animate({
    data
});