-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
59 lines (43 loc) · 1.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<py-env>
- plotly
</py-env>
</head>
<body>
<div class="header">
<h1>Interactive Plotly with Pyscript</h1>
</div>
<div class="row">
<div id="my_chart"></div>
</div>
<script type='text/javascript'>
function plot(graph, chart) {
var figure = JSON.parse(graph)
Plotly.newPlot(chart, figure, {});
}
</script>
<py-script>
import js
import json
import plotly
import plotly.graph_objects as go
from pyodide.http import pyfetch, FetchResponse
from typing import Optional, Any
from js import console
import asyncio
import js
url = 'https://openmc-data-storage.github.io/isotope_xs_plotter_pyscript/src/li6_205.json'
response = await pyfetch(url= url, method="GET")
data = await response.json()
print(data)
fig = go.Figure(data=go.Scatter(x=data['energy'], y=data['xs']))
graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
js.plot(graphJSON,"my_chart")
</py-script>
</body>
</html>