How can I embed a chart in a custom html?

[EderSantana]

I'm thinking about a way to create custom dashboards with lightning, do you have an example of how to bind the resulting chart to a div?

[mathisonian]

Hey @EderSantana, awesome to hear!

Depending on how you are ingesting data, there are two ways to accomplish this:

1. Creating new charts - every period of time (hour, day, week, etc) you can send the relevant data to lightning and get back a new visualization object containing that data. You can keep a reference to this ID and use then use it to embed the chart in the dashboard. This would require some intelligence on the part of the dashboard to figure out which charts to display, but the advantage is that this will be a little cleaner in terms of data storage and you'll have access to a nice history of all the plots that have been created over time.
2. Updating existing charts - alternatively you could set up visualizations in lightning ahead of time and continually add data to them through the API. With this strategy the ID's of the charts being embedded in the dashboard will never change, but you won't have a historical account of the data.

With either strategy the actual embedding can be done in a few ways. See all the docs on this starting here: http://lightning-viz.org/usage/#iframes. The most straightforward is to use an iframe (or pym.js embed).

Alternatively each chart has an endpoint (http:///visualizations//embed/) that will produce html that is conducive to just being embedded straight onto the page (no iframes). This is what we use to embed the charts in IPython for example.

I'm just getting back from a short vacation, but I saw your message in the gitter channel as well. We don't support subplots at the moment, but this can be replicated through embedding. Having real subplot support would be awesome to add.

If any of this doesn't make sense or needs clarification feel free to ask in gitter or on this thread.

[EderSantana]

Thanks for the reply, @mathisonian

My solution was similar to your 2º suggestion. I rendered the template with a python/Flask server. I've seen how you did it for ipython and just got the html. Later I had an API to send new numbers to the server, which would update the chart and send the new html using Server Sent Events to the browser. But something wrong is happening in this last step. Maybe SSE protocols converted something, but I couldn't update the html in the browser. When I tried to change the div's html, the chart just disappeared. The new html was there, but it didn't render the chart.

So yeah, I'll keep investigating. Tkx for the help.