\
**Category:** Help\
**Tags:** dashboard\
**Created:** [February 2, 2022, 6:12pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342 "2022-02-02T18:12:16Z")\
**Posts on this page:** 14\
**Page:** 1
**Author:**  [@Andreia\_Smith-Moritz](https://forums.losant.com/u/Andreia_Smith-Moritz)\
**Post date:** [February 2, 2022, 6:12pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/1 "2022-02-02T18:12:17Z")
Is there a way to generated an plotly interactive figure using the jupyter notebook feature, which then can be imbedded on to a dashboard. The goal is for the figure to have the same features on the dashboard (zoom, highlighting, etc.).
Thanks!
---
**Author:**  [@Dylan\_Schuster](https://forums.losant.com/u/Dylan_Schuster)\
**Post date:** [February 2, 2022, 7:16pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/2 "2022-02-02T19:16:34Z")
Using a [Custom HTML Block](https://docs.losant.com/dashboards/custom-html/), you can add a block that utilizes third-party charting libraries (such as [Plotly’s JavaScript library](https://plotly.com/javascript/)) and feed data into those libraries.
It’s a bit of a jump to go from our [Notebooks](https://docs.losant.com/notebooks/overview/) feature over to the dashboard block, but there are a couple paths to what you’re requesting here …
### Save Notebook Output to Files
If the notebook is outputting all the HTML and JavaScript files that make up the chart, you could write those to your [Application Files](https://docs.losant.com/applications/files/). Then, within the Custom HTML Block’s code, you can reference those files to paint the chart. Bear in mind that **anything written to Application Files is public** ; if that is a concern, you can try this other approach …
### Save Notebook Output to a Data Table
Alternatively, your notebook could save an [output](https://docs.losant.com/notebooks/outputs/#data-table) to a [Data Table](https://docs.losant.com/data-tables/overview/), and the Custom HTML Block could use that table as an [input](https://docs.losant.com/dashboards/custom-html/#data-table-queries). In this case, all the Plotly code that turns that raw data into a zoomable, highlightable chart lives in the Custom HTML Block’s configuration. Then, utilizing the events exposed by the Custom HTML Block, that data can be fed into Plotly.
* * *
This should be enough to get you started; depending on how you are writing the outputs, you can get pretty dynamic here as well by having the block reflect data respective to the user’s [dashboard time](https://docs.losant.com/dashboards/overview/#viewing-past-dashboard-states).
---
**Author:**  [@Andreia\_Smith-Moritz](https://forums.losant.com/u/Andreia_Smith-Moritz)\
**Post date:** [February 2, 2022, 7:32pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/3 "2022-02-02T19:32:00Z")
Thanks a lot for the fast response! I will try the custom html block on data I upload and see if I can get working over the next few days
Thanks!
---
**Author:**  [@Andreia\_Smith-Moritz](https://forums.losant.com/u/Andreia_Smith-Moritz)\
**Post date:** [May 10, 2022, 6:42pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/4 "2022-05-10T18:42:07Z")
Hi!
So next few days turned out to be next few months.
I am having trouble understanding how to “code” plotly.js to talk to data in losant. I have been able to plot use “static” variables (defining x and y explicitly).
See what I have below. I plotted an example code (Housing). But what I want to do is the time-series-0 inquiry. Can you direct me to more tutorials that can aid me? First time trying to do Java stuff
---
**Author:**  [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\
**Post date:** [May 10, 2022, 7:07pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/5 "2022-05-10T19:07:36Z")
Being successful with this block requires a fairly strong understanding of JavaScript. The docs for the [Custom HTML Block](https://docs.losant.com/dashboards/custom-html/) do contain examples for other charting libraries that should map well to how Plotly does things.
Time Series queries are returned as an array of objects each with a `time` and `value` property.
Starting from the default example code provided by the block, this is how I’d translate a time series query into separate X and Y arrays:
```auto
function renderBlock(input) {
document.getElementById('blockInput').innerHTML =
JSON.stringify(input, undefined, 2);
if(input.queries['time-series-0']) {
let xArray = input.queries['time-series-0'].map((point) => point.time);
let yArray = input.queries['time-series-0'].map((point) => point.value);
console.log(xArray);
console.log(yArray);
}
}
```
Using `console.log` and your browser’s developer tools, you can inspect the result:
I don’t have personal experience with Plotly, but hopefully this helps point you in the right direction.
---
**Author:**  [@Andreia\_Smith-Moritz](https://forums.losant.com/u/Andreia_Smith-Moritz)\
**Post date:** [May 17, 2022, 9:18pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/6 "2022-05-17T21:18:05Z")
I was able to get the data I wanted to query to log in the console as you have demonstrated.
I was able to plot using plotly using set x and y values.
However, when I substitute the xArray and yArray (that i just previously logged in the console), into the plotly implementation,
I get this error
---
**Author:**  [@Dylan\_Schuster](https://forums.losant.com/u/Dylan_Schuster)\
**Post date:** [May 17, 2022, 9:39pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/7 "2022-05-17T21:39:12Z")
Without seeing the entirety of your block’s configuration I can’t say for sure, but I’m guessing the variables you are logging out exist in a different scope than where you are trying to define the values to pass to Plotly. I’m guessing you need to call [Plotly’s update method](https://plotly.com/javascript/plotlyjs-function-reference/#plotlyupdate) in the callback for when new data comes into the block, passing that newly received data into the library.
If you can paste the entirety of the code you have in place here, I can better point you in the right direction.
---
**Author:**  [@Andreia\_Smith-Moritz](https://forums.losant.com/u/Andreia_Smith-Moritz)\
**Post date:** [May 17, 2022, 9:55pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/9 "2022-05-17T21:55:11Z")
Code below
I do have some extra lines of code that I was using to test out examples
Custom Head Content:
body { padding: 10px; background: transparent; }
```
```
Head Content:
```
```
---
**Author:**  [@Andreia\_Smith-Moritz](https://forums.losant.com/u/Andreia_Smith-Moritz)\
**Post date:** [May 17, 2022, 9:56pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/10 "2022-05-17T21:56:12Z")
Sorry, I am cutting and pasting the code, its not displaying in editor mode
---
**Author:**  [@Andreia\_Smith-Moritz](https://forums.losant.com/u/Andreia_Smith-Moritz)\
**Post date:** [May 17, 2022, 10:58pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/11 "2022-05-17T22:58:18Z")
---
**Author:**  [@Dylan\_Schuster](https://forums.losant.com/u/Dylan_Schuster)\
**Post date:** [May 18, 2022, 1:14pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/12 "2022-05-18T13:14:19Z")
Yes, the issues are as I suspected:
- `xArray` and `yArray` are locally scoped variables to the `renderBlock()` function, which is why you cannot access them when declaring your `data` variable.
- Furthermore, those values probably haven’t even been set yet as they are only set when the `change` event fires on the dashboard block, and the spot where you are trying to use them runs when the block first mounts.
You need to call [Plotly.update()](https://plotly.com/javascript/plotlyjs-function-reference/#plotlyupdate) with the updated data argument ( `[{ x: xArray, y: yArray }]` ) inside the `renderBlock()` function.
As @Brandon_Cannaday noted above, the Custom HTML Block does require a working knowledge of HTML and JavaScript to use successfully. I would recommend checking out [Plotly’s documentation](https://plotly.com/javascript/), including their variety of examples, for some hints on how to use their library first; once you have that figured out, it should not be much of a jump to pull those data values out of the Losant block callbacks and apply them to your chart.
---
**Author:**  [@Andreia\_Smith-Moritz](https://forums.losant.com/u/Andreia_Smith-Moritz)\
**Post date:** [May 18, 2022, 1:52pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/13 "2022-05-18T13:52:10Z")
Understood.
Losant had provided an easily implementable IoT platform but there were some limitation with how you can interact with the data (simply to zoom in and out easily, unclick/click certain data sets). Since everything else seemed straightforward I took a chance that I could hobble my way through the custom html without prior coding experience in Java.
I may just post for a feature request.
Thank you for your patience
---
**Author:**  [@Dylan\_Schuster](https://forums.losant.com/u/Dylan_Schuster)\
**Post date:** [May 18, 2022, 8:39pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/14 "2022-05-18T20:39:22Z")
@Andreia_Smith-Moritz based on your use case, we just published an example of [using Plotly.js in a Custom HTML Block](https://docs.losant.com/dashboards/custom-html/#using-plotlyjs). Hopefully this is enough to get you started; you may want to update some of these configuration options, either globally or on a per-segment basis. To do that, you will need to reference their [API documentation](https://plotly.com/javascript/).
---
**Author:**  [@Andreia\_Smith-Moritz](https://forums.losant.com/u/Andreia_Smith-Moritz)\
**Post date:** [May 18, 2022, 8:54pm UTC](https://forums.losant.com/t/embed-interactive-plotly-generated-html-in-dashboard/4342/15 "2022-05-18T20:54:06Z")
I cannot express how grateful I am for this!!!
Thank you so much for your assistance!