Streamlit Dashboards to Quarto #11086

msh855 · 2024-10-16T21:16:22Z

msh855
Oct 16, 2024

I have a quarto webpage and I want to add a new page where I want to show a dashboard that I deployed it in streamlit.

Is this possible to do it ? if so, can someone help with a step by step instructions how to do it ?

mcanouil · 2024-10-16T21:22:15Z

mcanouil
Oct 16, 2024
Collaborator

Without anything to work with you unlikely get what you want unfortunately.
Note that there are nearly no streamlit users here which makes it also unlikely.

The few that come here opened discussion which might be of interest:

rendering with .py to create a dashboard using streamlit #9872

Note that searching for "streamlit" is likely to list other discussion you might be interested in.

0 replies

msh855 · 2024-10-16T21:33:37Z

msh855
Oct 16, 2024
Author

Sounds more complicated than I thought based on the discussion you posted.

My attempt so far included the following:

I deployed a dashboard using Streamlit Cloud.
Created a new page in my webpage and attempted to use an iframe:


---
title: "When Should you Buy A House?"
include-iframe: true
---

```{=html}
<iframe src="https://housingcalculations.streamlit.app/" width="100%" height="800"></iframe>

But this idea did not work

My objective was to just show the dashboard that I developed in Python.

4 replies

mcanouil Oct 16, 2024
Collaborator

If your dashboard is hosted/deployed somewhere else, then yes it is way simpler.
The iframe should work.

Could you share a complete small reproducible example?

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R

Python

````qmd
---
title: "Reproducible Quarto Document"
format: html
engine: knitr
---

This is a reproducible Quarto document.

{{< lipsum 1 >}}

```{r}
x <- c(1, 2, 3, 4, 5)
y <- c(1, 4, 9, 16, 25)

plot(x, y)
```

![An image]({{< placeholder 600 400 >}}){#fig-placeholder}

{{< lipsum 1 >}}

The end after @fig-placeholder.
````

````qmd
---
title: "Reproducible Quarto Document"
format: html
engine: jupyter
---

This is a reproducible Quarto document.

{{< lipsum 1 >}}

```{python}
import matplotlib.pyplot as plt

x = [1, 2, 3, 4, 5]
y = [1, 4, 9, 16, 25]

plt.plot(x, y)
plt.show()
```

![An image]({{< placeholder 600 400 >}}){#fig-placeholder}

{{< lipsum 1 >}}

The end after @fig-placeholder.
````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

mcanouil Oct 16, 2024
Collaborator

I reused your dashboard URL and the issue is not Quarto (you can try with plain HTML), see below, it's the host of your dashboard which might not allow iframe inclusion (because you are basically hiding it).

Input	Output
--- title: "Quarto Playground" format: html --- This is a playground for Quarto. ```{=html} <iframe src="https://housingcalculations.streamlit.app/" width="100%" height="400"></iframe> ```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default HTML Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a default HTML document structure.</p>
    <iframe src="https://housingcalculations.streamlit.app/" width="100%" height="400"></iframe>
</body>
</html>

msh855 Oct 16, 2024
Author

The link to the dashboard is private. But even when I made it public again did not work.

I am not very familiar with html syntax and how to "unhide" it in streamlit.

Any idea or suggestions ?

mcanouil Oct 16, 2024
Collaborator

That's not up to you. That's up to the host/cloud provider to protect "its content".

If your app does not show up with the simple HTML code I have provided, there is nothing you can do about it, except host your dashboard elsewhere.

Streamlit Dashboards to Quarto #11086

Uh oh!

Uh oh!

msh855 Oct 16, 2024

Replies: 2 comments · 4 replies

Uh oh!

mcanouil Oct 16, 2024 Collaborator

Uh oh!

Uh oh!

msh855 Oct 16, 2024 Author

Uh oh!

mcanouil Oct 16, 2024 Collaborator

Uh oh!

Uh oh!

mcanouil Oct 16, 2024 Collaborator

Uh oh!

msh855 Oct 16, 2024 Author

Uh oh!

Uh oh!

mcanouil Oct 16, 2024 Collaborator

msh855
Oct 16, 2024

Replies: 2 comments 4 replies

mcanouil
Oct 16, 2024
Collaborator

msh855
Oct 16, 2024
Author

mcanouil Oct 16, 2024
Collaborator

mcanouil Oct 16, 2024
Collaborator

msh855 Oct 16, 2024
Author

mcanouil Oct 16, 2024
Collaborator