-
Notifications
You must be signed in to change notification settings - Fork 793
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Multiple Charts in one HTML #1422
Comments
Yes, you can export charts as JSON, and use vega-embed to embed as many of them as you'd like into a single page. Altair's You can see a simple example HTML template here: https://altair-viz.github.io/user_guide/saving_charts.html#html-format |
A more complete answer, for people finding this via Google: If you want to combine multiple charts into a single chart, you can use concatenation: import altair as alt
import pandas as pd
chart1 = alt.Chart(df).mark_point().encode(x='x', y='y')
chart2 = alt.Chart(df).mark_line().encode(x='x', y='y')
(chart1 | chart2).save('charts.html') If for some reason you'd like the charts to be rendered separately and the two renderings embedded into a single HTML page, this is possible, but Altair has no built-in functionality for that. The best approach would be to construct an HTML template using vega-embed directly, and insert the output of Here is a simple example, from which you can use standard HTML/CSS approaches to customize the layout if you wish: import altair as alt
import pandas as pd
two_charts_template = """
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega@{vega_version}"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@{vegalite_version}"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@{vegaembed_version}"></script>
</head>
<body>
<div id="vis1"></div>
<div id="vis2"></div>
<script type="text/javascript">
vegaEmbed('#vis1', {spec1}).catch(console.error);
vegaEmbed('#vis2', {spec2}).catch(console.error);
</script>
</body>
</html>
"""
df = pd.DataFrame({'x': range(5), 'y': range(5)})
chart1 = alt.Chart(df).mark_point().encode(x='x', y='y')
chart2 = alt.Chart(df).mark_line().encode(x='x', y='y')
with open('charts.html', 'w') as f:
f.write(two_charts_template.format(
vega_version=alt.VEGA_VERSION,
vegalite_version=alt.VEGALITE_VERSION,
vegaembed_version=alt.VEGAEMBED_VERSION,
spec1=chart1.to_json(indent=None),
spec2=chart2.to_json(indent=None),
)) |
It looks like magic, and it works ! However, charts are disposed horizontally. Is there a way to make Altair to dispose them vertically ? |
Is there a way to display multiple charts on the same webpage using Altair? I am currently saving the files individually using chart.to_html("filename.html), but can't figure out a way to show the 5 different visuals into one html page.
Please let me know if there's a way to do that.
The text was updated successfully, but these errors were encountered: