add-generated-chart-usecase.md•6.42 kB
# How to add Vizro-AI created charts to a Vizro dashboard
This guide explains the different ways in which you can add a chart generated by Vizro-AI to an existing [Vizro dashboard](https://github.com/mckinsey/vizro/tree/main/vizro-core).
## Use Vizro-AI's generated code
1. 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 `return_elements=True` in the `plot()` method. Let's execute the provided code and examine the outcome.
!!! example "Vizro-AI chart"
=== "Code for the cell"
```python
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-4o")
result = 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""",
return_elements=True,
)
print(f"Insight:\n{result.chart_insights}\n")
print(f"Code explanation:\n{result.code_explanation}\n\nCode:\n{result.code_vizro}\n")
result.get_fig_object(df).show()
```
=== "Result"
[![VizroAIChart]][vizroaichart]
1. Insert the resulting chart into a dashboard.
Once you are satisfied with the chart, you can add it to a [Vizro](https://github.com/mckinsey/vizro/tree/main/vizro-core) dashboard.
```py
@capture("graph")
def custom_chart(data_frame):
fig = px.scatter(
data_frame,
x="gdpPercap",
y="lifeExp",
size="pop",
color="continent",
animation_frame="year",
hover_name="country",
size_max=60,
)
fig.update_layout(
legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1)
)
return fig
```
The `custom_chart` function is an example of the [custom chart](https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-charts). It returns a `go.Figure()` object. This object must then be passed to the `figure` argument of the Vizro [Graph](https://vizro.readthedocs.io/en/stable/pages/user-guides/graph) model.
!!! example "Vizro-AI chart within vizro dashboard"
=== "Code for the cell"
```py hl_lines="8-23 31"
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):
fig = px.scatter(
data_frame,
x="gdpPercap",
y="lifeExp",
size="pop",
color="continent",
animation_frame="year",
hover_name="country",
size_max=60,
)
fig.update_layout(
legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1)
)
return fig
df = px.data.gapminder()
page = vm.Page(
title = 'Demographics',
components = [
vm.Graph(figure=custom_chart(df)),
vm.Graph(
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=8090)
```
=== "Result"
[![VizroDashboard]][vizrodashboard]
## Use Vizro-AI dynamically to return a `fig` object
We can also 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. Note that each dashboard run triggers an API call to the LLM, possibly escalating costs. 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.
!!! example "Use Vizro-AI fig directly in vizro dashboard"
=== "Code for the cell"
```py hl_lines="13-18 23"
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-4o")
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(figure=fig),
vm.Graph(
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=8090)
```
=== "Result"
[![VizroDashboard2]][vizrodashboard2]
[vizroaichart]: ../../assets/user_guides/vizro-ai-chart.png
[vizrodashboard]: ../../assets/user_guides/chart_into_dashboard_large.png
[vizrodashboard2]: ../../assets/user_guides/chart_into_dashboard_large.png