How to display plotly graph on github pages?

[charlie66]

I am trying to display a plotly graph on github page (not the static image)

On Stackoverflow I found this:

Display interactive plotly chart (.html file) on GitHub Pages

I generated the HTML file and set up _includes folder, but it didnt work for me, I couldn’t find any similar question on Google, please help

[pokgak]

I did this in my repository. You need to enable Github Pages for the repo in the Settings but you don’t need to use Jekyll. You can commit the output files of write_html() and push it to the repository. After that you can access the graph by using URL in format <username>.github.io/<repository>/<filepath>.

This is an example of how I configure my repo:

[alaa137]

Can you please elaborate on this a little bit? After enabling Github Pages and committing the html file, what should I write in the .md file to display it? Of course simply typing the link my-username.github.io/my-repo/path/to/file.html doesn’t display the content…

Thanks in advance

[pokgak]

Sorry to necro this thread but since the link to my old repo is now gone since I archived the repo. Here’s an updated guide for those who stumbled across this.

I have a script (main.py) that I used to generate a plain HTML containing a Plotly graph that can be viewed from my Github Pages site (https://pokgak.xyz/citf-graphs/).

1. Enable Github Pages. Here’s an example of my setting for the example:
   

   

2. Create your plot as usual and at the end import it to HTML using the write_html function. Snippet from my script: citf-graphs/main.py at 1080a51151ba0029ba611ba9d3cb59e77809513a · pokgak/citf-graphs · GitHub

Since the file is just plain HTML, Github Pages will pick it up. Bonus if you name your file index.html and put it at the configured root directory of your Github Pages setting like I did in my example repo. Then, Github will automatically shows it when you go to the Github Pages URL of that repository. In my case, this is pokgak.github.io/citf-graphs.

Example file structure of my repo:

If you name your file other than that, then you’ll need to also specify the file name to access from Github Pages e.g. output file example.html can be accessed using URL pokgak.github.io/citf-graphs/example.html (link example only, not working).

Hope that clears up any confusion.

[fatal_shots]

@pokgak Any idea how to display the plot using an iframe? I have an iframe that gets the HTML code from a file on my repo, but I get an error… Here’s an example of the HTML and the output on my GitHub Pages site:

<iframe src="https://raw.githubusercontent.com/s-lasch/s-lasch.github.io/main/_includes/scatter_matrix.html" 
        width="100%" 
        height="300px"></iframe>

I went into the console on my site, and this is the following output:

[fatal_shots]

If you’re having the same issues with putting a plotly graph in an HTML iframe, I found another solution that works. Since Github Pages serves these certain files as text-type, for my project, I had to look elsewhere. Using githack you can bypass GitHub pages’ lack of content-type serving.

Go to the website and paste in the link to the file from Github, in my case here:

I used the production link, as it gives a slight increase to privacy. Githack serves files content-type, so putting a link to the file will serve it without displaying the content of the file as regular text. Here is the link to the webpage I was having issues with, now fixed.