Including html file

[cserteGT3]

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?

1. Adding plotly-latest.min.js to /libs or
2. Download on the fly (https://plot.ly/javascript/getting-started/)

[tlienart]

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:

1. you're sure that it works, breaking updates upstream won't break your site
2. 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...

[tlienart]

Ok here are simple steps to a working example.

1. (optional) create a new website

newsite("plotly", template="sandbox")

2. download the plotly file from https://plot.ly/javascript/getting-started/, put it in /libs/plotly/plotly.min.js

then

3. 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}} <script src="/libs/plotly/plotly.min.js"></script> {{end}}

4. in your config.md add a line @def hasplotly = false

then finally

5. in src/index.md add @def hasplotly = true and

## Plotly

~~~
<div id="tester" style="width:600px;height:250px;"></div>

<script>
	TESTER = document.getElementById('tester');
	Plotly.plot( TESTER, [{
	x: [1, 2, 3, 4, 5],
	y: [1, 2, 4, 8, 16] }], {
	margin: { t: 0 } } );
</script>
~~~

Now if you serve() you get

[tlienart]

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

2. 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).