Embedding charts into HTML document?

[deeplook]

Is there a way to create HTML code using PlotlyPlotter.save() for a series of charts and embed them into some "outer" HTML document without playing the templating blues (like with jinja2)? Well, I can think of a way to do this...

[niloch]

Hmmm. If you are thinking of the use case of rendering multiple charts in one HTML template, there would be collisions with binding the charts to the same DOM element. You would have to have a way to specify unique elements for each chart in the series.

What are your concerns about the Jinja2 Templating?

[deeplook]

Well, I have a prototype that takes output from PlotlyPlotter.save() like this

<!-- Load d3.js and plotly.js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='https://d14fo0winaifog.cloudfront.net/plotly-basic.js'></script>

<div id=chart></div>
<script>
    CHART = document.getElementById('chart');
    Plotly.plot(CHART, [{'type': 'pie', 'labels': ['Residential', 'Non-Residential', 'Utility'], 'values': [29, 26, 55]}], {'title': 'Forcasted 2014 U.S. PV Installations by Market Segment'});
</script>

picks only the last script element, replaces the CSS id named chart and embeds this (for several plots) into some HTML template using Jinja2. Nothing wrong with that. I just think that Bokeh kind of did that already last time when I evaluated it. But, sadly, it's still unable to make a decent pie chart...

It would just be nicer to not create the snippets to be embedded as real files, but get them as simple strings, too.

[niloch]

Ah, I think I understand. I do want to keep most of the the api geared to single plots, buti have an idea. What if I separate the script tags for loading the libraries from the template string and add a name paramter to the plotter.render() function that corresponds to the div id. Then you could concatenate the html for multiple plots into one html string. Then saving them to one file is simple, and even rendering them before saving them is trivial like so:

from iplotter.iplotter import PlotlyPlotter
from IPython.display import HTML

plotter = PlotlyPlotter()

trace1 = {
  "x": ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  "y": [20, 14, 25, 16, 18, 22, 19, 15, 12, 16, 14, 17],
  "type": 'bar',
  "name": 'Item 1',
  "marker": {
    "color": 'rgb(49,130,189)',
    "opacity": 0.7,
  }
}

trace2 = {
  "labels": ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  "values": [19, 14, 22, 14, 16, 19, 15, 14, 10, 12, 12, 16],
  "type": 'pie',
  "name": 'Item 2',
  "marker": {
    "opacity": 0.7
  }
}

charts = [
    [trace1], 
    [trace2]
]

# plotter.head will return the html string containing script tags for loading the plotly.js/C3.js libraries
multiple_plot_html = plotter.head

for i, chart in enumerate(charts):
    multiple_plot_html += plotter.render(name="chart1_"+str(i), data=chart)

# Write multiple plots to file    
with open("multiple_plots.html", 'w') as outfile:
    outfile.write(multiple_plot_html)

# display multiple plots in iframe   
HTML(plotter.iframe.format(multiple_plot_html, 600, 900))