Skip to content
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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Including html file #322

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

Including html file #322

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

Comments

@cserteGT3
Copy link
Contributor

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?

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

tlienart commented Dec 25, 2019

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 tlienart added enhancement question labels Dec 25, 2019
@tlienart
Copy link
Owner

tlienart commented Dec 25, 2019

Ok here are simple steps to a working example.

  1. (optional) create a new website
newsite("plotly", template="sandbox")
  1. download the plotly file from https://plot.ly/javascript/getting-started/, put it in /libs/plotly/plotly.min.js

then

  1. 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}}
  1. in your config.md add a line @def hasplotly = false

then finally

  1. 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

Screen Shot 2019-12-25 at 11 25 34

@tlienart
Copy link
Owner

tlienart commented Dec 25, 2019

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:

Screen Shot 2019-12-25 at 12 19 49

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

Sign up for free 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