Added charts along with dashboard using UKdata

flaskapp/routes.py

@@ -9,6 +9,9 @@
 import plotly
 import plotly.express as px
 
+# Import the UkData model from models.py
+from flaskapp.models import UkData
+
 
 # Route for the home page, which is where the blog posts will be shown
 @app.route("/")
@@ -38,18 +41,66 @@ def new_post():
     return render_template('create_post.html', title='New Post', form=form)
 
 
-# Route to the dashboard page
 @app.route('/dashboard')
 def dashboard():
     days = Day.query.all()
     df = pd.DataFrame([{'Date': day.id, 'Page views': day.views} for day in days])
-
     fig = px.bar(df, x='Date', y='Page views')
-
     graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
     return render_template('dashboard.html', title='Page views per day', graphJSON=graphJSON)
 
 
+@app.route("/first_chart")
+def first_chart():
+    # Query the UK parliamentary data from the database
+    data = UkData.query.all()
+
+    # Create a DataFrame from the queried data
+    df = pd.DataFrame([{
+        'Constituency': row.constituency_name,
+        'Turnout19': row.Turnout19,
+        'ConVote19': row.ConVote19,
+    } for row in data])
+
+    # Create a scatter plot using Plotly Express
+    fig = px.scatter(df, x='Turnout19', y='ConVote19',
+                     hover_name='Constituency',
+                     labels={'Turnout19': 'Turnout Rate (%)', 'ConVote19': 'Conservative Votes'})
+
+    # Add title and axis labels
+    fig.update_layout(title='Turnout Rate vs. Conservative Votes',
+                      xaxis_title='Turnout Rate (%)',
+                      yaxis_title='Conservative Votes')
+    # Convert the visualization to JSON
+    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
+
+    # Render the template with the visualization
+    return render_template('first_chart.html', graphJSON=graphJSON)
+
+
+
+# Route for the second chart
+@app.route("/second_chart")
+def second_chart():
+    # Query the UK parliamentary data from the database
+    data = UkData.query.all()
+
+    # Create a DataFrame from the queried data
+    df = pd.DataFrame([{
+        'Region': row.region,
+        'TotalVote19': row.TotalVote19,
+    } for row in data])
+    # Create a bar chart using Plotly Express
+    fig = px.bar(df, x='Region', y='TotalVote19',
+                labels={'Region': 'Region', 'TotalVote19': 'Total Votes'},
+                title='Total Votes by Region')
+    # Convert the visualization to JSON
+    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
+
+    # Render the template with the visualization
+    return render_template('second_chart.html', graphJSON=graphJSON)
+
+
 @app.before_request
 def before_request_func():
     day_id = datetime.date.today()  # get our day_id
@@ -71,3 +122,4 @@ def before_request_func():
         db.session.add(ip_view)  # insert into the ip_view table
 
     db.session.commit()  # commit all the changes to the database
+

flaskapp/templates/first_chart.html

@@ -0,0 +1,15 @@
+{% extends "layout.html" %}
+
+{% block content %}
+    <h1>Turnout Rate vs. Conservative Votes </h1>
+    <!-- Placeholder div for the Plotly visualization -->
+    <div id='first_chart' class='first_chart'></div>
+
+    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
+
+    <!-- JavaScript code to render the Plotly visualization -->
+    <script type='text/javascript'>
+        var graphs = {{graphJSON | safe}};
+        Plotly.plot('first_chart', graphs, {});
+    </script>
+{% endblock %}

flaskapp/templates/layout.html

@@ -16,6 +16,9 @@ <h1 class="logo">My web app</h1>
                     <li><a href="{{ url_for('about') }}">About</a></li>
                     <li><a href="{{ url_for('new_post') }}">New post</a></li>
                     <li><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
+                    <li><a href="{{ url_for('first_chart') }}">first_chart</a></li>
+                    <li><a href="{{ url_for('second_chart') }}">second_chart</a></li>
+
                 </ul>
             </nav>
         </strong>

flaskapp/templates/second_chart.html

@@ -0,0 +1,15 @@
+{% extends "layout.html" %}
+
+{% block content %}
+    <h1>Total Votes vs. Region </h1>
+    <!-- Placeholder div for the Plotly visualization -->
+    <div id='second_chart' class='second_chart'></div>
+
+    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
+
+    <!-- JavaScript code to render the Plotly visualization -->
+    <script type='text/javascript'>
+        var graphs = {{graphJSON | safe}};
+        Plotly.plot('second_chart', graphs, {});
+    </script>
+{% endblock %}