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.
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.
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.
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.
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.
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.
chart.animate(snapshot5)
chart.animate(snapshot1)
Next chapter: Chart presets ----- Previous chapter: Events ----- Back to the Table of contents