I need to make a graph from the data in the SQLite database. I am using Flask for this particular project. Basically, the table has a column named emotion which has the emotions - sad, happy, and neutral listed many times. I need to count the number of times these emotions are shown in the table and then make a graph with the emotions as labels and the number of times as the bars.
The below code is for extracting the number of duplicate values and append it to a list. The below code correctly appends the number of values in the list. As of now, the output shows a list with the values - [6,33,7]
from flask import Flask, render_template
import sqlite3
app = Flask(__name__)
@app.route("/")
def graph_data():
con = sqlite3.connect('gazemaster.db')
cur = con.cursor()
cur.execute('SELECT COUNT(emotion) FROM GazeData GROUP BY emotion')
values = []
for row in cur.fetchall():
values.append(row[0])
return render_template("graph.html", values = values)
if __name__ == "__main__":
app.run(debug = True)
The code shown below is the HTML file that will show the output for the graph.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graph Sample</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="barChart"></canvas>
<script>
var ctx = document.getElementById("barChart").getContext("2d");
var lineChart = new Chart(ctx,{
type:"bar",
data:{
labels: ['Happy','Sad','Neutral'],
datasets:[{
label: "Emotion",
data: "{{ values | safe }}",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
}]
},
})
</script>
</body>
</html>
However, the output shown is this -
This is the output shown; it shows only one value when the list clearly is [6,33,7]
![This is the output shown; it shows only one value when the list clearly is [6,33,7]](https://mapledrawhubb.com/i.sstatic.net/iwXFx.png){kind=link}
What I noticed is, if I add more labels, the other values come up but that's not how I want it, as it leaves the other labels empty. Plus, it treats 33 as 3-3.
I feel like I am making a silly mistake but I can't point it out.
valuesvariable contains the list [6,33,7] because it seems to draw fine with those values: jsfiddle.net/Leelenaleee/r6y0jozm/1data: {{ values | safe }},(also, always always always check the source (press Ctrl+U) to find out what is actually rendered, otherwise you're flying completely blind)https://stackoverflow.com/questions/23038710/accessing-python-list-in-javascript-as-an-array'