How to add Vizro-AI created charts into a Vizro dashboard

This guide explains the different ways in which you can add a chart generated by Vizro-AI to your Vizro dashboard.

Use Vizro-AI's generated code

Create a chart with Vizro-AI that you would like to visualize in a dashboard.

In this example, we aim to create a chart that illustrates the population development of each continent over time. To gain deeper insights and access the underlying code responsible for generating the chart, include explain=True in the plot() method. Let's execute the provided code and examine the outcome.

Vizro-AI chart

Code for the cellResult

import vizro_ai
from vizro_ai import VizroAI
import vizro.plotly.express as px
from dotenv import load_dotenv

load_dotenv()

df = px.data.gapminder()
vizro_ai = VizroAI(model="gpt-4-0613")

vizro_ai.plot(df,
              """Plot a bubble chart to show the changes in life expectancy
               and GDP per capita for each country over time.
               Color the bubbles by continent.
               Add animation on yearly basis, and do not use facets.
               Put the legend on top""", explain=True)

Insert the resulting chart into a dashboard.

Once you are satisfied with the chart, you can add it to a Vizro dashboard. In the explanation section from the result of the example above, you'll find the code snippet used to generate the chart.

@capture('graph')
def custom_chart(data_frame=pd.DataFrame()):
    # Create a bubble chart
    fig = px.scatter(data_frame, x='gdpPercap', y='lifeExp', animation_frame='year', animation_group='country',
                     size='pop', color='continent', hover_name='country', log_x=True, size_max=60,
                     range_y=[20,90],
                     labels={'gdpPercap':'GDP per Capita', 'lifeExp':'Life Expectancy', 'year':'Year', 'continent':'Continent', 'pop':'Population'},
                     title='Life Expectancy v. Per Capita GDP, 1952-2007',
                     height=400)
    # Put the legend on top
    fig.update_layout(legend=dict(y=1, yanchor='top', x=0.5, xanchor='center'))
    # Return the plot
    return fig

The provided custom_chart function is an example of the custom chart, and it returns a go.Figure() object. This object must then be passed to the figure argument of the Vizro Graph model.

Vizro-AI chart within vizro dashboard

Code for the cellResult

from vizro import Vizro
import vizro.models as vm
from vizro.models.types import capture
import pandas as pd
import vizro.plotly.express as px


@capture('graph')
def custom_chart(data_frame=pd.DataFrame()):
    # Create a bubble chart
    fig = px.scatter(data_frame, x='gdpPercap', y='lifeExp', animation_frame='year', animation_group='country',
                     size='pop', color='continent', hover_name='country', log_x=True, size_max=60,
                     range_y=[20,90],
                     labels={'gdpPercap':'GDP per Capita', 'lifeExp':'Life Expectancy', 'year':'Year', 'continent':'Continent', 'pop':'Population'},
                     title='Life Expectancy v. Per Capita GDP, 1952-2007',
                     height=400)
    # Put the legend on top
    fig.update_layout(legend=dict(y=1, yanchor='top', x=0.5, xanchor='center'))
    # Return the plot
    return fig


df = px.data.gapminder()

page = vm.Page(
    title = 'Demographics',
    components = [
        vm.Graph(id='bubble chart', figure=custom_chart(df)),
        vm.Graph(id='histogram', figure = px.box(df,
                                                 x='continent',
                                                 y='lifeExp',
                                                 color='continent',
                                                 title='Life Expectancy per Continent'))],
    controls = [
        vm.Filter(column='country'),
        vm.Filter(column='continent')])

Vizro().build(vm.Dashboard(pages=[page])).run(port=8000)

Use Vizro-AI dynamically to return a `fig` object

Alternatively, we can use Vizro-AI dynamically and assign the output of plot() directly to the fig variable, enabling its reuse in the vm.Graph.figure argument. This method offers streamlined efficiency, eliminating the need for code copying. However, it is important to note that each dashboard run triggers an API call to OpenAI, potentially escalating costs, although this can be avoided if the fig object is stored and retrieved as needed, instead of making repeated calls to plot().

Executing the code below yields the identical dashboard as the example above.

Use Vizro-AI fig directly in vizro dashboard

Code for the cellResult

from vizro import Vizro
import vizro.models as vm
import pandas as pd
import vizro.plotly.express as px
import vizro_ai
from vizro_ai import VizroAI

from dotenv import load_dotenv
load_dotenv()
df = px.data.gapminder()
vizro_ai = VizroAI(model="gpt-4-0613")

fig = vizro_ai.plot(df,
              """Plot a bubble chart to show the changes in life expectancy
               and GDP per capita for each country over time.
               Color the bubbles by continent.
               Add animation on yearly basis, and do not use facets.
               Put the legend on top""")

page = vm.Page(
    title = 'Demographics',
    components = [
        vm.Graph(id='bubble chart', figure=fig),
        vm.Graph(id='histogram', figure = px.box(df,
                                                 x='continent',
                                                 y='lifeExp',
                                                 color='continent',
                                                 title='Life Expectancy per Continent'))],
    controls = [
        vm.Filter(column='country'),
        vm.Filter(column='continent')])

Vizro().build(vm.Dashboard(pages=[page])).run(port=8000)

With Vizro-AI you can create visually captivating charts and plug them into your Vizro dashboard in seconds!

How to add Vizro-AI created charts into a Vizro dashboard

Use Vizro-AI's generated code

Use Vizro-AI dynamically to return a fig object

Use Vizro-AI dynamically to return a `fig` object