Embed interactive plotly generated html in dashboard

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!

Using a Custom HTML Block, you can add a block that utilizes third-party charting libraries (such as Plotly’s JavaScript library) and feed data into those libraries.

It’s a bit of a jump to go from our Notebooks 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. 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 to a Data Table, and the Custom HTML Block could use that table as an input. 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.

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!

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

Being successful with this block requires a fairly strong understanding of JavaScript. The docs for the Custom HTML Block 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:

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.

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.
image

However, when I substitute the xArray and yArray (that i just previously logged in the console), into the plotly implementation,
I get this error

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 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.

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; }
<div id="test"></div>

<script>

    var data = [{

      x: [xArray],

      y: [yArray],

      mode: 'lines',

      marker: {

        color: ['red', 'black',  'blue', 'grey', 'red'],

        size: [50, 100, 150, 50, 50]

      }

    }];

    var layout = {font: {size: 18}};

    var config = {

        responsive: true

    };

    Plotly.newPlot('test', data, layout, config);

</script>

Head Content:

<div class="col">

  <div class="card">

    <div class="card-header">Block Input</div>

    <div class="card-body">

      <pre id="blockInput" class="card-text"></pre>

    </div>

  </div>

</div>

Sorry, I am cutting and pasting the code, its not displaying in editor mode

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() 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, 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.

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

@Andreia_Smith-Moritz based on your use case, we just published an example of using Plotly.js in a Custom HTML Block. 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.

I cannot express how grateful I am for this!!!
Thank you so much for your assistance!