Skip to content
{{ message }}
/ Franklin.jl Public

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

# Including html file#322

Closed
opened this issue Dec 23, 2019 · 3 comments
Closed

# Including html file #322

opened this issue Dec 23, 2019 · 3 comments
Labels
enhancement plots question

## Comments

### cserteGT3 commented Dec 23, 2019

 This time I want to use PlotlyJS (and its interactive plots) and can't figure out how to insert the generated html into a page. Did I miss a command that is for this purpose? Or should I write my own? 😄 😄 PS: what do you find a better option? Adding plotly-latest.min.js to /libs or Download on the fly (https://plot.ly/javascript/getting-started/) The text was updated successfully, but these errors were encountered:

### tlienart commented Dec 25, 2019 • edited

 So to insert HTML on a page, just do some markdown ~~~ THE HTML ~~~ if it's generated and in a file myhtml.html you can also do some markdown ~~~ {{insert path/to/myhtml.html}} ~~~ I'll try to come up with a working example with Plotly later, it's a good idea :-). If you do, please post it here as this would be a cool thing to add to the doc or to examples. PS: for your second question, my personal preference is to have all JS files served by you directly (in your /libs/) for two main reasons: you're sure that it works, breaking updates upstream won't break your site you can test stuff offline I think a reason to do the opposite is that potentially it's faster to use the online version but this should be tested...

added enhancement question labels Dec 25, 2019

### tlienart commented Dec 25, 2019 • edited

 Ok here are simple steps to a working example. (optional) create a new website newsite("plotly", template="sandbox") download the plotly file from https://plot.ly/javascript/getting-started/, put it in /libs/plotly/plotly.min.js then modify src/_html_parts/head.html to have the lines (the first 2 are already there, just add the 3d one) {{if hasmath}} {{insert head_katex.html }} {{end}} {{if hascode}} {{insert head_highlight.html }} {{end}} {{if hasplotly}} {{end}} in your config.md add a line @def hasplotly = false then finally in src/index.md add @def hasplotly = true and ## Plotly ~~~
~~~ Now if you serve() you get

### tlienart commented Dec 25, 2019 • edited

Now something even fancier is to have Julia code generating the plot in your markdown, there's a few more steps but it shouldn't be much more difficult. I'll get back soon with an example:

Edit: here we go:

1. Activate the environment in your website folder and add PlotlyJS so
(plotly) pkg> add PlotlyJS

1. consider the following markdown
## Another test, a bit more complicated

julia:preplot
#hideall
function jdplotly(plot::String, id::String, style::String="width:600px;height:250px;")
println("""
~~~<div id="$id" style="$style"></div>
<script>
var fig = JSON.parse('$plot'); CONTAINER = document.getElementById('$id');
Plotly.plot(CONTAINER, fig.data, fig.layout);
</script>
~~~""")
end


julia:plotly2
using PlotlyJS

trace1 = scatter(;x=1:4, y=[10, 15, 13, 17], mode="markers")
trace2 = scatter(;x=2:5, y=[16, 5, 11, 9], mode="lines")
trace3 = scatter(;x=1:4, y=[12, 9, 15, 12], mode="lines+markers")
p = plot([trace1, trace2, trace3])

jdplotly(json(p), "test2")


\textoutput{plotly2}

### explanations

The first code block just defines a jd_plotly function which prints JuDoc Markdown that looks similar to the initial example I gave earlier, the difference is that it takes a JSON string of the plot and reads it.

The #hideall means that code is not shown on the page.

Then the second block (and you could have more of those) has some valid PlotlyJS code and then passes the jsonstring to jd_plotly which writes the markdown and it ends up being displayed:

Notes: hopefully that should give you a good idea on how to tweak things and make them better or more appropriate to your case. For instance you could also add a #hideall in the second code block if you didn't want to show the code etc.

Hope this answers the question! please let me know and I'll close the issue (I'll add this stuff to the docs as well).

to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement plots question
Projects
None yet
Development

No branches or pull requests

2 participants