Skip to content

Filtering & adding new records

Filtering enables you to zoom in or out within a chart, allowing the viewer to focus on certain selected elements, or get more context. You can also add new records to the data on the chart which makes it easy to work with real-time sources.

We add two items from the Genres dimension - using the || operator - to the filter, so the chart elements that belong to the other two items will vanish from the chart.

Info - How to setup Vizzu

In HTML, create a placeholder element that will contain the rendered chart.

<html>
 <body>
  <div id="myVizzu">
  </div>
 </body>
</html>

In JavaScript, initialize and configure the chart:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.1/dist/vizzu.min.js'
import data from 'https://lib.vizzuhq.com/0.1/assets/data/music_data.js'

let chart = new Vizzu('myVizzu')

await chart.initializing

chart.animate({
    data: data,
    config: {
        channels: {
            y: {
                set: ['Popularity', 'Kinds']
            },
            x: {
                set: ['Genres']
            },
            color: {
                set: ['Kinds']
            },
            label: {
                set: ['Popularity']
            },
        },
    }
})

chart.animate({
    data: {
        filter: record =>
            record['Genres'] == 'Pop' ||
            record['Genres'] == 'Metal',
    }
})

Now we add a cross-filter that includes items from both the Genres and the Kinds dimensions. This way we override the filter from the previous state. If we weren't update the filter, Vizzu would use it in subsequent states.

chart.animate({
    data: {
        filter: record =>
            (record['Genres'] == 'Pop' || record['Genres'] == 'Metal') &&
            record['Kinds'] == 'Smooth'
    }
})

Switching the filter off to get back to the original view.

chart.animate({
    data: {
        filter: null,
    }
})

Here we add another record to the data set and update the chart accordingly.

chart.animate({
    data: {
        records: [
            ['Soul', 'Hard', 91],
            ['Soul', 'Smooth', 57],
            ['Soul', 'Experimental', 115],
        ]
    }
})

Info

Combining this option with the store function makes it easy to update previously configured states with fresh data since this function saves the config and style parameters of the chart into a variable but not the data.