Comments (2)
Hi @huong-li-nguyen that did the trick for me. I really appreciate your help and explanation!
Just as a side note for anyone who comes across this- the @capture("graph")
decorator comes from import from vizro.models.types import capture
from vizro.
Hello @tjm165,
Thanks for raising the issue!
What you describe above is already possible by leveraging our custom charts; see our user guide here. Given that you want to use a post figure update call, the only step you are missing in the example above is to wrap your chart with our @capture("graph")
decorator.
By using the @capture("graph")
decorator you can create any custom Plotly chart that returns a go.Figure
inside the Vizro dashboards. :)
Example
import pandas as pd
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.models.types import capture
def aggregate_data():
df_gapminder = px.data.gapminder()
df_gapminder_agg = px.data.gapminder()
df_gapminder_agg["lifeExp"] = df_gapminder_agg.groupby(by=["continent", "year"])["lifeExp"].transform("mean")
df_gapminder_agg["gdpPercap"] = df_gapminder_agg.groupby(by=["continent", "year"])["gdpPercap"].transform("mean")
df_gapminder_agg["pop"] = df_gapminder_agg.groupby(by=["continent", "year"])["pop"].transform("sum")
df_gapminder["data"] = "Country"
df_gapminder_agg["data"] = "Continent"
df_gapminder = pd.concat([df_gapminder_agg, df_gapminder], ignore_index=True)
return df_gapminder
df_gapminder = aggregate_data()
@capture("graph") # Note change here
def my_figure(data_frame):
fig = px.line(
data_frame=data_frame,
x="year",
y="gdpPercap",
color="data",
labels={"year": "Year", "data": "Data", "gdpPercap": "GDP per capita"},
color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"},
markers=True,
)
fig.add_vline(x=1970, line_color="green", line_dash="dash")
return fig
page = vm.Page(
title="Country Analysis",
layout=vm.Layout(grid=[[0, 1]]),
components=[
vm.Graph(
id="bar_country",
figure=px.bar(
df_gapminder,
x="year",
y="pop",
color="data",
barmode="group",
labels={"year": "Year", "data": "Data", "pop": "Population"},
color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"},
),
),
vm.Graph(id="line_country",
figure=my_figure(data_frame=df_gapminder) # Add your custom chart as usually
),
],
controls=[
vm.Filter(column="country", selector=vm.Dropdown(value="India", multi=False, title="Select country")),
vm.Filter(column="year", selector=vm.RangeSlider(title="Select timeframe")),
],
)
dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
This should then give you this:
I hope that helps! The above example works on my machine, so if it does not work on yours, it might be a local issue, as you suggested. But I hope it does 🤞
Feel free to let me know if you have any other questions.
from vizro.
Related Issues (20)
- Using multiple datasets for custom graphs HOT 5
- How do I get Vizro to run in a Google Colab Notebook? HOT 3
- Updating Meta Tags HOT 8
- Non equal distribution of space when using cards HOT 1
- ModuleNotFoundError: No module named 'vizro.tables' HOT 1
- the selector option is from another selector HOT 5
- Use vizro.models.button to switch to another page HOT 1
- Make a grouped charts HOT 7
- Add Python 3.12 to tests
- Convert warnings into errors in tests
- The graph sample from the doc doesn't work HOT 2
- Editable data table HOT 3
- Integrate a chatbox feature to enhance the capabilities of natural language applications HOT 1
- Automatically generated navigation homepage
- BUG: `value` for slider does not work properly
- Add support for Latex in Markdown HOT 1
- How to add color to text in Markdown with vm.Card? HOT 1
- Consider using dbc components to enable dbc.themes HOT 3
- How to modify card text based on a value selected in Dropdown filter? HOT 12
- Getting FieldInfo error while running vizro HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vizro.