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 | |||||
|---|---|---|---|---|---|
| Pop | Rock | Jazz | Metal | ||
| Kinds | Hard | 114 | 96 | 78 | 52 |
| Smooth | 56 | 36 | 74 | 121 | |
| Experimental | 127 | 83 | 94 | 58 | |
| 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
});