Im trying to render a plot generated in python and exported as JSON. Im trying to use bokehjs within React to render the plot. But when i try to call embed_item i get this error. The data isnt modified in any way after it has been generated.
This error may indicate many things: data corruption, usage error (e.g. using incompatible versions of bokeh and bokehjs for serialization and deserialization, or using wrong method of embedding for the generated serialized data) or a bug. Without at least the relevant version numbers and preferably a minimal reproducible example (MRE), we can’t give any useful feedback.
Im using version 3.5.2 for both the python and the javascript side.
I made a MRE with plain JS and the json data.
The error will show up in the console when the page loads.
The data should be in a file named data.json
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Test</title>
<script crossorigin="anonymous" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.5.2.min.js"></script>
</head>
<body>
<div>
<script>
fetch("data.json")
.then(res => res.json())
.then(data => {
window.Bokeh.embed.embed_item(data.data, "bokeh-plot")
})
</script>
<div id="bokeh-plot"></div>
</div>
</body>
</html>
{
"data": {
"doc": {
"roots": [
{
"attributes": {
"below": [
{
"attributes": {
"formatter": {
"id": "p1347",
"name": "BasicTickFormatter",
"type": "object"
},
"major_label_policy": {
"id": "p1348",
"name": "AllLabels",
"type": "object"
},
"ticker": {
"attributes": {
"mantissas": [
1,
2,
5
]
},
"id": "p1346",
"name": "BasicTicker",
"type": "object"
},
"visible": false
},
"id": "p1345",
"name": "LinearAxis",
"type": "object"
}
],
"center": [
{
"attributes": {
"axis": {
"id": "p1345"
}
},
"id": "p1349",
"name": "Grid",
"type": "object"
},
{
"attributes": {
"axis": {
"id": "p1350"
},
"dimension": 1
},
"id": "p1354",
"name": "Grid",
"type": "object"
}
],
"left": [
{
"attributes": {
"formatter": {
"id": "p1352",
"name": "BasicTickFormatter",
"type": "object"
},
"major_label_policy": {
"id": "p1353",
"name": "AllLabels",
"type": "object"
},
"ticker": {
"attributes": {
"mantissas": [
1,
2,
5
]
},
"id": "p1351",
"name": "BasicTicker",
"type": "object"
},
"visible": false
},
"id": "p1350",
"name": "LinearAxis",
"type": "object"
}
],
"renderers": [
{
"attributes": {
"data_source": {
"attributes": {
"data": {
"entries": [
[
"icoord",
[
[
15.0,
15.0,
25.0,
25.0
],
[
5.0,
5.0,
20.0,
20.0
]
]
],
[
"dcoord",
[
[
0.0,
0.0,
0.0,
0.0
],
[
0.0,
0.39709158785892806,
0.39709158785892806,
0.0
]
]
],
[
"color_list",
[
"C1",
"C0"
]
],
[
"line_colors",
[
"#ff7f0e",
"#000000"
]
]
],
"type": "map"
},
"selected": {
"attributes": {
"indices": [],
"line_indices": []
},
"id": "p1331",
"name": "Selection",
"type": "object"
},
"selection_policy": {
"id": "p1332",
"name": "UnionRenderers",
"type": "object"
}
},
"id": "p1330",
"name": "ColumnDataSource",
"type": "object"
},
"glyph": {
"attributes": {
"line_color": {
"field": "line_colors",
"type": "field"
},
"line_width": {
"type": "value",
"value": 2
},
"xs": {
"field": "dcoord",
"type": "field"
},
"ys": {
"field": "icoord",
"type": "field"
}
},
"id": "p1371",
"name": "MultiLine",
"type": "object"
},
"muted_glyph": {
"attributes": {
"line_alpha": {
"type": "value",
"value": 0.2
},
"line_color": {
"field": "line_colors",
"type": "field"
},
"line_width": {
"type": "value",
"value": 2
},
"xs": {
"field": "dcoord",
"type": "field"
},
"ys": {
"field": "icoord",
"type": "field"
}
},
"id": "p1373",
"name": "MultiLine",
"type": "object"
},
"nonselection_glyph": {
"attributes": {
"line_alpha": {
"type": "value",
"value": 0.1
},
"line_color": {
"field": "line_colors",
"type": "field"
},
"line_width": {
"type": "value",
"value": 2
},
"xs": {
"field": "dcoord",
"type": "field"
},
"ys": {
"field": "icoord",
"type": "field"
}
},
"id": "p1372",
"name": "MultiLine",
"type": "object"
},
"view": {
"attributes": {
"filter": {
"id": "p1376",
"name": "AllIndices",
"type": "object"
}
},
"id": "p1375",
"name": "CDSView",
"type": "object"
}
},
"id": "p1374",
"name": "GlyphRenderer",
"type": "object"
}
],
"sizing_mode": "scale_both",
"title": {
"id": "p1340",
"name": "Title",
"type": "object"
},
"toolbar": {
"attributes": {
"active_scroll": {
"id": "p1356"
},
"tools": [
{
"id": "p1355",
"name": "PanTool",
"type": "object"
},
{
"attributes": {
"renderers": "auto"
},
"id": "p1356",
"name": "WheelZoomTool",
"type": "object"
},
{
"attributes": {
"overlay": {
"attributes": {
"bottom": {
"type": "number",
"value": "nan"
},
"bottom_units": "canvas",
"fill_alpha": 0.5,
"fill_color": "lightgrey",
"handles": {
"attributes": {
"all": {
"attributes": {
"fill_color": "white",
"hover_fill_color": "lightgray"
},
"id": "p1363",
"name": "AreaVisuals",
"type": "object"
}
},
"id": "p1364",
"name": "BoxInteractionHandles",
"type": "object"
},
"left": {
"type": "number",
"value": "nan"
},
"left_units": "canvas",
"level": "overlay",
"line_alpha": 1.0,
"line_color": "black",
"line_dash": [
4,
4
],
"line_width": 2,
"right": {
"type": "number",
"value": "nan"
},
"right_units": "canvas",
"syncable": false,
"top": {
"type": "number",
"value": "nan"
},
"top_units": "canvas",
"visible": false
},
"id": "p1358",
"name": "BoxAnnotation",
"type": "object"
}
},
"id": "p1357",
"name": "BoxZoomTool",
"type": "object"
},
{
"id": "p1365",
"name": "SaveTool",
"type": "object"
},
{
"id": "p1366",
"name": "ResetTool",
"type": "object"
},
{
"id": "p1367",
"name": "HelpTool",
"type": "object"
}
]
},
"id": "p1341",
"name": "Toolbar",
"type": "object"
},
"toolbar_location": null,
"x_range": {
"attributes": {
"end": -0.07943738559521221,
"max_interval": 3,
"min_interval": 0.2,
"start": 0.39709158785892806
},
"id": "p1342",
"name": "Range1d",
"type": "object"
},
"x_scale": {
"id": "p1343",
"name": "LinearScale",
"type": "object"
},
"y_range": {
"id": "p1335",
"name": "DataRange1d",
"type": "object"
},
"y_scale": {
"id": "p1344",
"name": "LinearScale",
"type": "object"
}
},
"id": "p1333",
"name": "Figure",
"type": "object"
}
],
"title": "",
"version": "3.5.2"
},
"root_id": "p1333",
"target_id": null,
"version": "3.5.2"
}
}