Dear all,
I like to add a heatmap.jpg to a dashboard as I don´t want to recreate a sophisticated sns.heatmap in px due to time constraints.
I import the jpg with
heatmap = io.imread(‘heatmap.png’)
I can´t display it like the other graph objects (histograms, etc) with
dcc.Graph(
id=‘heatmap’,
figure=heatmap,
style={‘width’:‘49’, ‘display’: ‘inline-block’}
)
Errror message is “Invalid argument figure passed into Graph with ID “heatmap”.”
Is dcc.Graph the wrong approach for a jpg?
This is the error message:
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
propTypeErrorHandler@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:98421:9
CheckedComponent@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:92763:77
renderWithHooks@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:14938:29
mountIndeterminateComponent@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:17617:15
beginWork@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:18731:18
callCallback@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:182:16
invokeGuardedCallbackDev@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:231:18
invokeGuardedCallback@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:286:33
beginWork$1@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:23338:30
performUnitOfWork@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:22292:14
workLoopSync@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:22265:24
performSyncWorkOnRoot@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:21891:11
flushSyncCallbackQueueImpl/<@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:11224:26
unstable_runWithPriority@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react@16.v1_8_3m1606377558.14.0.js:2685:14
runWithPriority$1@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:11174:12
flushSyncCallbackQueueImpl@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:11219:26
flushSyncCallbackQueue@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:11207:5
batchedUpdates$1@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1606377558.14.0.js:21997:9
notify@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:88742:12
notifyNestedSubs@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:88815:20
handleChangeWrapper@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:88820:12
dispatch@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:90245:7
createThunkMiddleware/</</<@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:89995:16
dispatch@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:90661:28
apiThunk/<@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:93011:13
createThunkMiddleware/</</<@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:89992:18
componentDidMount/intervalId<@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1606377558.dev.js:96003:21