How to render many charts without crashing the browser?

📊 Plotly Python
1

Hello,

considering having a HTML file with many charts generated by plotly’s Python API, let’s say 60, common browsers tend to crash while rendering this amount of data.

Example Code:

# -*- coding: utf-8 -*-
import numpy as np
from plotly.offline.offline import get_plotlyjs
import plotly.graph_objs as go
from jinja2 import Environment
import plotly

HTML_TEMPLATE = """
<!DOCTYPE html>
<html>
    </script>
    {{plotly_js_script}}
    <body>
        {% for div in divs %}
             {{ div }}
        {% endfor %}
    </body>
</html>
"""

def GetPlotlyJsScript():

    """
    returns the plotly js script
    """

    plotly_js_script = ''.join(['<script type="text/javascript">', get_plotlyjs(), '</script>'])

    return plotly_js_script

divs = []
N = 10000

for i in xrange(60):

    random_x = np.random.randn(N)
    random_y = np.random.randn(N)

    # Create a trace
    trace = go.Scatter(
        x = random_x,
        y = random_y,
        mode = 'markers'
    )    

    data = [trace]

    divs.append(plotly.offline.plot(data, output_type='div'))

#Content to be rendered into the template
rendering_content = {"divs":divs,
                     "plotly_js_script":GetPlotlyJsScript()
                     }

#Get the template's object
template = Environment().from_string(HTML_TEMPLATE)
with open("Test.html", 'w') as f:
    html_report = template.render(rendering_content)
    f.write(html_report.encode("UTF-8"))

Now, how to overcome this issue, if I still want to display interactive charts in the browser? Is there anyway to render this externally?

Thanks.