@def hascode = true
@def hasplotly = true

# Work with Plotly

If you want interactive plots on some pages and are not afraid of using heavy javascript libraries, then [Plotly](https://plot.ly/javascript/) is a nice library.
The Julia wrapper [PlotlyJS.jl](https://github.com/sglyon/PlotlyJS.jl) can be used to generate Plotly plots.

## Pre-requisites

Download [`plotly.min.js`](https://cdn.plot.ly/plotly-latest.min.js) saving it to `/_libs/plotly/plotly.min.js`.

Then create a variable `hasplotly` with default value `false`: in your `config.md` write

```
@def hasplotly = false
```

Finally, in your `src/_layout/head.html` add

```html
{{if hasplotly}} <script src="/libs/plotly/plotly.min.js"></script> {{end}}
```

## Offline-generated plot

Assuming you already have the Plotly code for some plot, displaying  the  result on a page with Franklin is now pretty straightforward.
Start by adding

```
@def hasplotly = true
```

so that the JS library  will be  loaded then somewhere appropriate add:

```html
~~~
<div id="tester" style="width:600px;height:350px;"></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>
~~~
```

This will give:

~~~
<div id="tester" style="width:600px;height:350px;"></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>
~~~

## Live-generated plot

One step further is to use `PlotlyJS` to define a  plot then pass the result to Franklin.
Start by adding `PlotlyJS` and `Random` to your environment:

```julia-repl
(myWebsite) pkg> add PlotlyJS Random
```

Then, beyond the `@def hasplotly = true`, add the following code:

`````plaintext
```julia:ex1
using PlotlyJS
z =  [10     10.625  12.5  15.625  20
     5.625  6.25    8.125 11.25   15.625
     2.5    3.125   5.    8.125   12.5
     0.625  1.25    3.125 6.25    10.625
     0      0.625   2.5   5.625   10]

data   = contour(; z=z)
layout = Layout(; title="Basic Contour Plot")
plt    = plot(data, layout)

fdplotly(json(plt)) # hide
```
\textoutput{ex1}
`````

**Note**: the `fdplotly` is a convenience function exported by `Franklin`; it just prints the required HTML such that a plotly object gets placed. It takes the JSON string of the plot (which you can get with `json(plt)`) and takes two optional keyword arguments:
- `id`: to specify the name of the div the plotly object is associated to, it's randomly generated by default, and,
- `style` which takes a string indicating the desired CSS for the div e.g. the default is `"width:600px;height:350px"`.

The code block above gives:

```julia:ex1
using PlotlyJS
z =  [10     10.625  12.5  15.625  20
     5.625  6.25    8.125 11.25   15.625
     2.5    3.125   5.    8.125   12.5
     0.625  1.25    3.125 6.25    10.625
     0      0.625   2.5   5.625   10]

data   = contour(; z=z)
layout = Layout(; title="Basic Contour Plot")
plt    = plot(data, layout)

fdplotly(json(plt)) # hide
```
\textoutput{ex1}