Shorthands & Store

To assist you with the development we added various shorthands that will make your code more compact. And we also added the store function, which enables you to save a chart state into a variable that you can reuse later instead of setting up that state once again.

Note: The data used in this tutorial is available here. You can read more about the available types of data in the Adding data chapter.

In [1]:
from ipyvizzu import Chart, Data, Config, Style


data = Data.from_json("./music_data.json")


chart = Chart()

chart.animate(data)

chart.animate(
    Config(
        {
            "channels": {"y": {"set": ["Popularity", "Kinds"]}, "x": {"set": "Genres"}},
            "label": {"attach": "Popularity"},
            "color": {"set": "Kinds"},
        }
    )
)

chart.animate(
    Config(
        {
            "align": "stretch",
        }
    )
)

# Let's save this state by calling the `chart.store()` function.

snapshot1 = chart.store()

If you set/attach/detach just one series on a channel, you don't have to put that series into an array.

In [2]:
chart.animate(snapshot1)

chart.animate(
    Config(
        {
            "channels": {
                # "x": { "attach": [ "Kinds" ] },
                "x": {"attach": "Kinds"},
                "y": {"detach": "Kinds"},
            },
            "align": "none",
        }
    )
)

snapshot2 = chart.store()

If you use set on a channel and no other options like range, you don't have to express that channel as an object. If you only set one series on a channel you can simply write the series' name after the channel name.

In [3]:
chart.animate(snapshot2)

chart.animate(
    Config(
        {
            "channels": {
                # "y": { "set": [ "Kinds", "Popularity" ] },
                "y": ["Kinds", "Popularity"],
                "x": "Genres",
            }
        }
    )
)

snapshot3 = chart.store()

In any case, you can simply omit the the channel object, Vizzu will automatically recognize the channels by their names.

In [4]:
chart.animate(snapshot3)

chart.animate(
    Config(
        {
            # "channels": {
            "y": "Kinds",
            "x": ["Genres", "Popularity"]
            # }
        }
    )
)

snapshot4 = chart.store()

Instead of creating nested objects, you can set the styles like this.

In [5]:
chart.animate(snapshot4)

chart.animate(
    Style(
        {
            # "plot": { "xAxis": { "label": { "fontSize": "150%" } } },
            "plot.xAxis.label.fontSize": "150%",
            "title.backgroundColor": "#A0A0A0",
        }
    )
)

snapshot5 = chart.store()

This is how you can get back to a state that you previously stored.

In [6]:
chart.animate(snapshot5)

chart.animate(snapshot1)

Next chapter: Chart presets ----- Previous chapter: Events ----- Back to the Table of contents