CODEWITHSUNDEEP
pythonflaskplotly
user11665931
user11665931

Reputation:

Plotly scatter isn't displayed by Flask

I have a plotly scatter, but it's not displayed by flask I took it from examples from internet

Result of my work looks like that:

And here is my code:

plotly_test.py

from flask import Flask, render_template
import json
import plotly
from plotly import graph_objs as go
import numpy as np

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def kek():
    t = np.linspace(0, 10, 100)
    fig = go.Figure()
    fig.add_trace(go.Scatter(
        x=t, y=np.sin(t),
        name='sin',
        mode='markers',
        marker_color='rgba(152, 0, 0, .8)'
    ))
    fig.add_trace(go.Scatter(
        x=t, y=np.cos(t),
        name='cos',
        marker_color='rgba(255, 182, 193, .9)'
    ))
    fig.update_traces(mode='markers', marker_line_width=2, marker_size=10)
    fig.update_layout(title='Styled Scatter',
                      yaxis_zeroline=False, xaxis_zeroline=False)
    data = [fig]
    graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
    return render_template('test1.html', graphJSON=graphJSON)

if __name__ == '__main__':
    app.run()

And my html with styles and script:

test1.html

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .header{
                text-align: center;
                background-color: rgb(136, 185, 229);
                height: 70px;
                line-height: 70px;
            }
            .chart{
                margin-top: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h2>
                Plotly Chart Demo
            </h2>
        </div>
        <div id="chart" class="chart">
        </div>
    </body>
        <!-- D3.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>
        <!-- Plotly.js -->
        <script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>
        <script type="text/javascript">
            var graphs = {{ graphJSON|safe }};
            Plotly.plot('chart', graphs, {});        
        </script>
</html>

Can you explain me what do I do wrong? Scatter works good without flask, but it doesn't with it!

js concole

Upvotes: 1

Views: 2027

Answers (1)

PySeeker
PySeeker

Reputation: 874

Put this in the head:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

And delte this part:

    <!-- D3.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>
    <!-- Plotly.js -->
    <script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>

Upvotes: 2

Related Questions