: Cannot Read Property 'canvas' of Undefined Plotly
I take generated a scatter matrix using px.scatter_matrix()
import plotly.express as px df = px.data.iris() fig = px.scatter_matrix(df, dimensions=["sepal_width", "sepal_length", "petal_width", "petal_length"], color="species") fig.show() fig.write_html("/.../scattermatrix.html", include_plotlyjs="cdn") I so:
- Open the file scattermatrix.html with Chrome
- Save the file to create scattermatrixV2.html
- Open the new saved scattermatrixV2.html
The new saved flashes into view and hten dissapers: 
I can see the post-obit error: 
VM5129 plotly-latest.min.js.download:61 Uncaught TypeError: Cannot read property 'key' of undefined at HTMLCanvasElement.<anonymous> (VM6 plotly-latest.min.js.download:61) at o (VM6 plotly-latest.min.js.download:20) at Array.Y.information (VM6 plotly-latest.min.js.download:20) at due east (VM6 plotly-latest.min.js.download:61) at Object.c.syncOrAsync (VM6 plotly-latest.min.js.download:61) at Object.r.plot (VM6 plotly-latest.min.js.download:61) at Object.r.newPlot (VM6 plotly-latest.min.js.download:61) at characterization.php.html:785 (anonymous) @ VM5129 plotly-latest.min.js.download:61 o @ VM5129 plotly-latest.min.js.download:20 Y.information @ VM5129 plotly-latest.min.js.download:xx e @ VM5129 plotly-latest.min.js.download:61 c.syncOrAsync @ VM5… I only have this issue with Plotly plots: scatter matrix and go.Figure(data= become.Parcoords.., while with the other plots i generate (px.parallel_categories, get.Figure() & fig.add_trace(go.Scatter... ) it works fine.
It seems to exist simlar to Uncaught TypeError: Cannot read property 'keys' of undefined all the same i am non sure where to apply: "Utilize Object.keys(uniqVisitorDeviceType) instead."
Here is the scatter matrix V1 original file:
<html> <head><meta charset="utf-8" /></head> <torso> <div> <script blazon="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <div id="4cadf67b-95de-4ee0-824e-ab5b83efea70" grade="plotly-graph-div" style="height:100%; width:100%;"></div> <script blazon="text/javascript"> window.PLOTLYENV=window.PLOTLYENV || {}; if (document.getElementById("4cadf67b-95de-4ee0-824e-ab5b83efea70")) { Plotly.newPlot( '4cadf67b-95de-4ee0-824e-ab5b83efea70', [{"diagonal": {"visible": false}, "dimensions": [{"axis": {"matches": true}, "label": "sepal width", "values": [iii.5, 3.0, iii.2, 3.1, 3.half-dozen, 3.nine, three.4, iii.4, two.9, 3.ane, 3.7, iii.4, three.0, 3.0, 4.0, four.4, iii.9, 3.5, 3.viii, 3.8, three.4, 3.vii, three.6, 3.3, 3.four, 3.0, 3.iv, 3.5, 3.iv, 3.2, iii.ane, 3.iv, 4.1, iv.2, 3.1, 3.ii, 3.5, 3.1, three.0, 3.4, 3.5, ii.three, 3.2, 3.5, 3.8, iii.0, 3.8, three.2, three.7, 3.iii]}, {"axis": {"matches": truthful}, "label": "sepal length", "values": [5.1, iv.ix, 4.vii, 4.half-dozen, 5.0, 5.4, 4.half dozen, 5.0, 4.4, 4.9, 5.iv, 4.8, four.8, iv.3, five.8, 5.7, v.four, 5.1, 5.7, 5.1, 5.iv, 5.1, iv.6, 5.1, 4.8, 5.0, 5.0, 5.2, 5.2, four.seven, 4.8, five.4, 5.ii, 5.five, four.nine, v.0, 5.five, iv.nine, 4.4, 5.1, v.0, iv.5, iv.iv, 5.0, 5.1, 4.8, 5.ane, 4.6, 5.3, 5.0]}, {"axis": {"matches": true}, "label": "petal width", "values": [0.ii, 0.2, 0.2, 0.two, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.ii, 0.2, 0.ane, 0.1, 0.2, 0.4, 0.4, 0.three, 0.3, 0.iii, 0.two, 0.four, 0.two, 0.5, 0.ii, 0.2, 0.iv, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.1, 0.2, 0.ii, 0.1, 0.2, 0.2, 0.three, 0.3, 0.ii, 0.vi, 0.four, 0.3, 0.2, 0.2, 0.2, 0.2]}, {"axis": {"matches": true}, "label": "petal length", "values": [1.4, i.iv, 1.3, i.5, 1.4, ane.vii, 1.4, 1.5, 1.4, 1.v, 1.5, 1.6, 1.four, 1.i, one.2, 1.five, 1.iii, 1.4, i.7, 1.v, one.seven, 1.5, 1.0, 1.7, 1.9, i.six, one.6, 1.v, ane.four, 1.6, i.vi, 1.v, 1.5, 1.iv, i.5, i.2, i.3, ane.5, 1.3, one.5, 1.3, 1.3, 1.3, 1.6, 1.nine, ane.4, 1.6, 1.4, ane.5, 1.4]}], "hoverlabel": {"namelength": 0}, "hovertemplate": "species=setosa<br>%{xaxis.title.text}=%{10}<br>%{yaxis.title.text}=%{y}", "legendgroup": "species=setosa", "mark": {"color": "#636efa", "symbol": "circle"}, "proper name": "species=setosa", "showlegend": true, "blazon": "splom"}, {"diagonal": {"visible": false}, "dimensions": [{"axis": {"matches": truthful}, "characterization": "sepal width", "values": [3.two, 3.2, three.i, two.iii, 2.8, 2.eight, 3.three, two.4, two.9, 2.vii, ii.0, 3.0, 2.2, 2.nine, 2.9, 3.ane, 3.0, 2.7, 2.2, 2.5, 3.2, 2.eight, 2.five, ii.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.half dozen, 2.iv, 2.iv, 2.7, 2.7, 3.0, 3.4, three.1, ii.three, 3.0, 2.v, 2.6, 3.0, 2.6, 2.3, 2.seven, three.0, 2.9, 2.ix, two.5, 2.8]}, {"axis": {"matches": true}, "label": "sepal length", "values": [7.0, 6.four, 6.9, 5.5, 6.5, 5.7, six.iii, iv.9, 6.half-dozen, five.ii, five.0, five.9, 6.0, half-dozen.i, 5.6, half-dozen.7, 5.6, 5.8, six.2, five.6, five.nine, vi.1, half-dozen.3, vi.i, 6.iv, half dozen.6, 6.8, 6.seven, 6.0, v.seven, 5.five, 5.5, five.8, half-dozen.0, 5.4, 6.0, 6.7, 6.three, 5.6, 5.v, v.5, 6.i, 5.eight, 5.0, 5.6, 5.7, 5.7, half dozen.2, v.1, five.7]}, {"axis": {"matches": true}, "label": "petal width", "values": [1.iv, 1.five, one.5, i.three, 1.5, 1.three, 1.6, 1.0, 1.iii, 1.4, 1.0, 1.five, 1.0, ane.4, i.iii, 1.iv, one.v, 1.0, 1.5, ane.one, 1.8, ane.3, 1.five, one.ii, 1.3, ane.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, i.2, 1.6, 1.5, 1.6, i.5, 1.3, 1.3, 1.3, i.2, 1.four, 1.2, i.0, 1.3, ane.two, 1.iii, 1.3, one.1, i.three]}, {"axis": {"matches": true}, "label": "petal length", "values": [4.vii, four.5, 4.nine, iv.0, 4.6, 4.5, four.7, 3.three, 4.vi, three.9, 3.5, 4.ii, iv.0, 4.7, 3.vi, 4.iv, iv.5, four.1, 4.5, 3.9, iv.8, four.0, 4.9, 4.7, iv.iii, iv.4, iv.eight, five.0, 4.five, 3.5, three.8, three.7, 3.nine, 5.1, 4.v, 4.v, 4.vii, 4.iv, 4.1, four.0, 4.four, 4.half-dozen, four.0, 3.3, four.two, four.2, four.two, four.three, 3.0, 4.1]}], "hoverlabel": {"namelength": 0}, "hovertemplate": "species=versicolor<br>%{xaxis.championship.text}=%{x}<br>%{yaxis.title.text}=%{y}", "legendgroup": "species=versicolor", "marking": {"colour": "#EF553B", "symbol": "diamond"}, "name": "species=versicolor", "showlegend": true, "type": "splom"}, {"diagonal": {"visible": false}, "dimensions": [{"axis": {"matches": truthful}, "characterization": "sepal width", "values": [3.3, ii.seven, three.0, 2.nine, 3.0, 3.0, 2.5, two.9, 2.v, three.vi, 3.ii, ii.7, three.0, 2.v, 2.viii, 3.2, iii.0, three.viii, 2.half-dozen, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.ii, 2.eight, 3.0, two.8, 3.0, 2.viii, 3.viii, 2.8, 2.8, 2.half-dozen, 3.0, 3.4, 3.1, three.0, 3.1, iii.1, iii.i, 2.seven, three.2, 3.3, 3.0, 2.5, three.0, 3.4, 3.0]}, {"centrality": {"matches": true}, "label": "sepal length", "values": [6.iii, 5.viii, 7.1, 6.3, six.v, 7.six, 4.9, 7.3, 6.7, seven.2, vi.5, half dozen.iv, 6.8, 5.7, five.8, half dozen.four, half-dozen.5, 7.7, seven.7, 6.0, 6.9, 5.6, 7.7, 6.3, six.seven, 7.2, half-dozen.2, 6.ane, half dozen.four, 7.2, 7.4, 7.nine, half-dozen.4, half-dozen.three, half-dozen.1, 7.vii, 6.3, 6.4, vi.0, six.9, 6.7, 6.9, 5.8, 6.8, 6.7, vi.7, 6.iii, 6.5, half dozen.ii, 5.9]}, {"axis": {"matches": true}, "label": "petal width", "values": [2.5, 1.9, ii.1, 1.eight, 2.2, two.ane, 1.7, 1.8, 1.viii, 2.5, 2.0, 1.9, 2.one, 2.0, two.4, ii.3, 1.8, 2.2, 2.three, ane.v, 2.3, 2.0, ii.0, 1.8, 2.1, one.viii, ane.8, i.8, 2.1, ane.6, ane.9, 2.0, two.2, 1.5, i.4, two.3, 2.4, ane.viii, 1.8, two.one, 2.iv, 2.three, 1.9, 2.3, 2.five, 2.3, ane.nine, 2.0, two.3, i.8]}, {"centrality": {"matches": true}, "label": "petal length", "values": [vi.0, v.one, 5.9, 5.6, v.8, half-dozen.6, 4.v, vi.three, 5.viii, half-dozen.1, 5.1, five.3, v.five, 5.0, 5.i, v.3, 5.5, half-dozen.vii, six.nine, 5.0, 5.vii, iv.9, half-dozen.vii, 4.9, 5.seven, 6.0, 4.viii, four.9, 5.6, 5.viii, 6.one, vi.4, v.half dozen, five.ane, 5.6, 6.one, five.6, five.v, four.viii, 5.four, 5.6, 5.ane, five.one, 5.9, five.7, 5.2, 5.0, 5.2, 5.4, 5.1]}], "hoverlabel": {"namelength": 0}, "hovertemplate": "species=virginica<br>%{xaxis.title.text}=%{10}<br>%{yaxis.title.text}=%{y}", "legendgroup": "species=virginica", "marker": {"colour": "#00cc96", "symbol": "circle"}, "name": "species=virginica", "showlegend": true, "type": "splom"}], {"dragmode": "select", "legend": {"tracegroupgap": 0}, "template": {"data": {"bar": [{"error_x": {"colour": "#2a3f5f"}, "error_y": {"color": "#2a3f5f"}, "marker": {"line": {"colour": "#E5ECF6", "width": 0.v}}, "type": "bar"}], "barpolar": [{"marker": {"line": {"colour": "#E5ECF6", "width": 0.5}}, "type": "barpolar"}], "carpet": [{"aaxis": {"endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f"}, "baxis": {"endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f"}, "type": "carpet"}], "choropleth": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "choropleth"}], "contour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "contour"}], "contourcarpet": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "contourcarpet"}], "heatmap": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmap"}], "heatmapgl": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmapgl"}], "histogram": [{"mark": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "histogram"}], "histogram2d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2d"}], "histogram2dcontour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2dcontour"}], "mesh3d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "mesh3d"}], "parcoords": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "parcoords"}], "pie": [{"automargin": true, "type": "pie"}], "scatter": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatter"}], "scatter3d": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatter3d"}], "scattercarpet": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "blazon": "scattercarpet"}], "scattergeo": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergeo"}], "scattergl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "blazon": "scattergl"}], "scattermapbox": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "blazon": "scattermapbox"}], "scatterpolar": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "blazon": "scatterpolar"}], "scatterpolargl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterpolargl"}], "scatterternary": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "blazon": "scatterternary"}], "surface": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [one.0, "#f0f921"]], "type": "surface"}], "table": [{"cells": {"fill": {"colour": "#EBF0F8"}, "line": {"color": "white"}}, "header": {"fill up": {"color": "#C8D4E3"}, "line": {"color": "white"}}, "type": "tabular array"}]}, "layout": {"annotationdefaults": {"arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": one}, "coloraxis": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "colorscale": {"diverging": [[0, "#8e0152"], [0.1, "#c51b7d"], [0.ii, "#de77ae"], [0.three, "#f1b6da"], [0.4, "#fde0ef"], [0.5, "#f7f7f7"], [0.6, "#e6f5d0"], [0.seven, "#b8e186"], [0.eight, "#7fbc41"], [0.9, "#4d9221"], [1, "#276419"]], "sequential": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "sequentialminus": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]]}, "colorway": ["#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52"], "font": {"colour": "#2a3f5f"}, "geo": {"bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white"}, "hoverlabel": {"align": "left"}, "hovermode": "closest", "mapbox": {"style": "low-cal"}, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": {"angularaxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}, "bgcolor": "#E5ECF6", "radialaxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}}, "scene": {"xaxis": {"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": ii, "linecolor": "white", "showbackground": truthful, "ticks": "", "zerolinecolor": "white"}, "yaxis": {"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"}, "zaxis": {"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"}}, "shapedefaults": {"line": {"color": "#2a3f5f"}}, "ternary": {"aaxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}, "baxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}, "bgcolor": "#E5ECF6", "caxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}}, "title": {"x": 0.05}, "xaxis": {"automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "championship": {"standoff": 15}, "zerolinecolor": "white", "zerolinewidth": 2}, "yaxis": {"automargin": truthful, "gridcolor": "white", "linecolor": "white", "ticks": "", "championship": {"standoff": 15}, "zerolinecolor": "white", "zerolinewidth": 2}}}, "title": {"text": "Scatter matrix of iris data set"}}, {"responsive": true} ) }; </script> </div> </trunk> </html> EDIT Later on TRYING @Mark H solution.
The solution proposed works. We accept also establish the issue:
When saving the plot opened with Chrome, Chrome changes the content in line eight (you see that the _saved version is much longer and with many added attributes), and so breaking the Plotly graph: Original line 8:
<div id="4cadf67b-95de-4ee0-824e-ab5b83efea70" grade="**plotly-graph-div**" style="superlative:100%; width:100%;"></div> Afterwards saving from Chrome it chanes the grade: Notice how the class changes, I believe it is this
<div id="4cadf67b-95de-4ee0-824e-ab5b83efea70" form="**plotly-graph-div js-plotly-plot**" style="acme:100%; width:100%;">... Irresolute The div above to the one below fixes the issue:
<div id="4cadf67b-95de-4ee0-824e-ab5b83efea70" course="**plotly-graph-div**" style="height:100%; width:100%;"></div> By only restoring that line to the original version the plot regularly works
Source: https://stackoverflow.com/questions/66598736/plotly-uncaught-typeerror-cannot-read-property-key-of-undefined-at-htmlcanvas
0 Response to ": Cannot Read Property 'canvas' of Undefined Plotly"
Post a Comment