Events

You can register handlers for various events. There are mouse events (click, mouseon), animation events (begin, update, complete), and rendering events that are called before rendering the chart elements. Handlers can be registered/unregistered with the on(), off() method pair.

Note: Currently chart.on(event, handler) only accept handler's JavaScript expression as string. Event can be accessed via event object, see the examples below.

We are registering a handler for the click event which will show an alert block with information about the clicked marker.

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


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


click_chart = Chart()

click_chart.animate(data)


click_handler_method = "alert(JSON.stringify(event.data));"

click_handler = click_chart.on("click", click_handler_method)


click_chart.animate(
    Config(
        {
            "channels": {"y": {"set": ["Popularity", "Kinds"]}, "x": {"set": "Genres"}},
            "label": {"attach": "Popularity"},
            "color": {"set": "Kinds"},
            "title": "Click on a column!",
        }
    )
)

Unregistering the previously registered handler.

In [2]:
# click_chart.off(click_handler)

Here we override the axis label color for 'Jazz' to red and all others to gray.

In [3]:
label_chart = Chart()

label_chart.animate(data)


label_draw_handler_method = """event.renderingContext.fillStyle = 
    (event.data.text === 'Jazz') ? 'red' : 'gray';"""

label_draw_handler = label_chart.on("plot-axis-label-draw", label_draw_handler_method)


label_chart.animate(
    Config(
        {
            "channels": {"y": {"set": ["Popularity", "Kinds"]}, "x": {"set": "Genres"}},
            "label": {"attach": "Popularity"},
            "color": {"set": "Kinds"},
            "title": "Look at the color of Jazz label!",
        }
    )
)

Unregistering the previously registered handler.

In [4]:
# label_chart.off(label_draw_handler)

The default behaviour of all events can be blocked by calling the event's preventDefault() method. Here we block the drawing of the Vizzu Logo in the bottom right corner of the chart.

In [5]:
logo_chart = Chart()

logo_chart.animate(data)


logo_draw_handler_method = "event.preventDefault();"

logo_draw_handler = logo_chart.on("logo-draw", logo_draw_handler_method)


logo_chart.animate(
    Config(
        {
            "channels": {"y": {"set": ["Popularity", "Kinds"]}, "x": {"set": "Genres"}},
            "label": {"attach": "Popularity"},
            "color": {"set": "Kinds"},
            "title": "Block the drawing of the Vizzu Logo",
        }
    )
)

Unregistering the previously registered handler.

In [6]:
# logo_chart.off(logo_draw_handler)

Next chapter: Shorthands & Store ----- Previous chapter: Animation options ----- Back to the Table of contents